/* Base layout. Visual tokens and paper art are in sketch.css. */
*{box-sizing:border-box}
html,body{margin:0;overscroll-behavior:none}
body{font-family:system-ui,sans-serif}
.homeTop,.shelfHead{display:flex;justify-content:space-between;align-items:center}.brandMark{font-weight:1000}.brandMark small{display:block;letter-spacing:2px;margin-top:5px}.publicRooms{display:grid;gap:8px}.roomCard{display:grid;grid-template-columns:10px minmax(0,1fr) 22px;width:100%;text-align:left;align-items:center}.roomMeta{display:flex;flex-direction:column;gap:5px}.roomStatus{width:8px;height:8px;border-radius:50%}.roomLock{text-align:right}.emptyRooms{text-align:center;line-height:1.7}.nameField{display:block}.nameField span{display:block;margin-bottom:7px}.nameField input{width:100%}.eyebrow{font-weight:900}.heroCopy h1 em{font-style:normal}
.hidden{display:none!important}
button{cursor:pointer;padding:10px 14px;margin:4px;font-weight:800}
input,select{padding:10px;max-width:100%}
header{display:flex;align-items:center;justify-content:space-between}
header>div{display:flex;align-items:center;gap:8px}
#scorebar{display:flex;overflow:auto}
.track{overflow:hidden}.fill{height:100%;width:0}
main{display:grid}.gamewrap{position:relative}
#game{display:block;width:100%;height:auto;outline:0}
#phaseBanner{position:absolute;pointer-events:none}
.row{display:flex}.row input{min-width:0;width:100%}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modernModal{position:relative;width:min(440px,95vw);padding:28px}
.modernModal h2{margin:8px 0 24px;font-size:30px}
.modernModal label{display:block;margin:14px 0;font-size:13px}
.modernModal input{display:block;width:100%;margin-top:6px}
.modernModal label small{font-size:10px}
.modalX{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:25px}
.switchRow{display:flex!important;align-items:center;gap:8px}
.switchRow input{width:auto;display:inline}
.settingsbox{width:min(440px,92vw);padding:25px}
.settingsbox label{display:flex;align-items:center;gap:10px;margin:14px 0}
.editorbox{width:min(1000px,95vw);padding:20px;max-height:95vh;overflow:auto}
.editorbox canvas{width:100%;height:auto;background:#d1ddd6}
#customMaps{max-height:160px;overflow:auto}
.customRow{display:flex;gap:4px;padding:5px;border-bottom:1px dashed #aa9874}
.customRow span{flex:1;font-size:12px}
.advanced label{display:block;margin:8px 0}
.advanced input{width:100%}
#killfeed{position:fixed;right:18px;top:80px;width:300px;z-index:12;pointer-events:none}
.feed{margin:5px 0;padding:8px;border:1px solid #4b4130;border-left:5px solid #d05e42;box-shadow:2px 3px #0003}
#toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);padding:12px 20px;border:2px solid #322d21;box-shadow:3px 4px #0005;opacity:0;transition:opacity .2s;pointer-events:none}
#toast.show{opacity:1}
#mobile{display:none;position:fixed;bottom:8px;left:0;right:0;justify-content:space-around;pointer-events:none}
#mobile button{pointer-events:auto;touch-action:none;user-select:none}
#tvBadge{position:fixed;top:12px;right:12px;z-index:40;padding:10px;background:#f5df89}
#rotateGate{display:none}
#controller{position:fixed;inset:0;z-index:80;background:#eadfbd;color:#28271f;touch-action:none;user-select:none;padding:8px;display:grid;grid-template-rows:40px 60px minmax(70px,1fr) minmax(90px,1fr) 20px 20px;gap:5px}
.controllerTop{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:14px}
.ctlCharacters{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.ctlCharacters button{font-size:28px;margin:0;padding:3px}
.ctlCharacters .taken{opacity:.3}
#cursorPad{position:relative;border:2px dashed #514631;overflow:hidden;background:#f7edce;touch-action:none}
#cursorPad span{position:absolute;top:8px;left:10px;opacity:.5}
#cursorDot{position:absolute;left:50%;top:50%;width:25px;height:25px;border-radius:50%;border:2px solid #222;background:#f3d448;transform:translate(-50%,-50%)}
.controllerArena{display:grid;grid-template-columns:1fr 1fr 1.2fr 1.1fr .8fr;gap:8px}
.ctl{font-size:24px;touch-action:none;min-width:0}
.ctl.pressed{transform:translateY(3px);background:#f0d745}
.comboHint,.controllerHint{text-align:center;font-size:11px}
@media (orientation:portrait) and (pointer:coarse){
 html,body{overflow:hidden!important}
 #rotateGate{display:grid;position:fixed;inset:0;z-index:10000;place-items:center;text-align:center;background:radial-gradient(circle at 50% 34%,#46666b 0,#29464d 48%,#172a30 100%);color:#fff7df;padding:max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));touch-action:none;overscroll-behavior:none}
 #rotateGate>div{width:min(88vw,430px);padding:30px 24px;border:2px solid #fff1c75e;border-radius:24px;background:#183139d9;box-shadow:0 22px 60px #0007;font-size:58px;line-height:1}
 #rotateGate b{display:block;margin:20px 0 10px;font-size:clamp(24px,7vw,34px);line-height:1.2}
 #rotateGate small{display:block;margin:0;font-size:clamp(14px,4vw,18px);line-height:1.55;color:#e7ddc2}
}