:root{
  --bg:#0d0b18; --bg2:#15122a; --bg3:#211c3d; --ink:#f3f0ff; --muted:#9a92c0;
  --pink:#f5a9b8; --blue:#5bcefa; --bad:#ff6060; --good:#7be28f;
  --px:"Silkscreen",ui-monospace,monospace;
}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
/* phones: tapping twice fast was selecting menu text and zooming the page. nothing selects except things you type in,
   no long-press menu, no grey tap flash, and manipulation turns off double-tap zoom (pinch still works) */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
button,select,label,.screen,#editor,#settings,#menu{touch-action:manipulation}
#stage,#stage canvas{touch-action:none}
body{font:14px/1.4 var(--px);color:var(--ink);-webkit-font-smoothing:none}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#wrap{position:relative}
canvas{display:block}
#cv{image-rendering:pixelated;image-rendering:crisp-edges;background:#000;box-shadow:0 0 0 3px var(--bg3)}
#ov{position:absolute;left:0;top:0;pointer-events:none}
#hud{position:absolute;left:6px;top:6px;padding:7px 9px;background:rgba(13,11,24,.9);border:2px solid var(--bg3);
  font:12px/1.38 "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;pointer-events:none;max-width:calc(100% - 12px);overflow:hidden}
#hud pre{margin:0;font:inherit;white-space:pre}
#subpx{display:block;margin-top:6px}
[hidden]{display:none!important}

/* the pixel look. notched corners come from the 4 box shadows */
button,select,input,textarea{font:inherit;color:var(--ink)}
button{background:var(--bg3);border:0;padding:6px 12px;cursor:pointer;margin:3px;
  box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),2px 0 0 0 var(--ink),inset 0 -3px 0 0 rgba(0,0,0,.35)}
button:hover{background:var(--blue);color:#000}
button:active{transform:translateY(1px);box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),2px 0 0 0 var(--ink)}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,.padfocus:focus{outline:2px dashed var(--pink);outline-offset:4px}
/* the controller cursor: same as hovering with a mouse so you can see where you are */
button.padfocus:focus{background:var(--blue);color:#000}
button.danger:hover{background:var(--bad)}
button.go{background:var(--pink);color:#000}
button.go:hover{background:var(--blue)}
select,input[type=number],input[type=text],input:not([type]),textarea{background:var(--bg);border:2px solid var(--muted);padding:3px 6px}
input[type=checkbox]{appearance:none;width:16px;height:16px;border:2px solid var(--ink);background:var(--bg);margin:0 6px;vertical-align:middle;cursor:pointer}
input[type=checkbox]:checked{background:var(--pink);box-shadow:inset 0 0 0 2px var(--bg)}
input[type=range]{accent-color:var(--pink)}
textarea{width:100%;box-sizing:border-box;resize:vertical;font:12px "JetBrains Mono",monospace}
h2{font-weight:700;margin:0 0 12px}
h3{font-size:12px;color:var(--pink);margin:18px 0 6px;font-weight:400}
.small{font-size:11px;color:var(--muted);margin:0 0 8px}
.row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.row.center{justify-content:center}
.box{background:var(--bg2);padding:16px 20px;
  box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),8px 8px 0 0 rgba(0,0,0,.5)}
kbd{font:12px var(--px);color:var(--blue)}

/* trans flag stripes */
.flag{display:flex;flex-direction:column;width:180px;margin:0 auto}
.flag i{height:6px}
.flag i:nth-child(1),.flag i:nth-child(5){background:var(--blue)}
.flag i:nth-child(2),.flag i:nth-child(4){background:var(--pink)}
.flag i:nth-child(3){background:#fff}
.flag.small{width:90px;margin:0 auto 12px}
.flag.small i{height:3px}

/* screens over the paused game */
.screen{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;
  background:rgba(13,11,24,.72);padding:16px;box-sizing:border-box;overflow:auto;text-align:center}
/* auto margins instead of justify center, otherwise the top gets cut off on short phones */
.screen>:first-child{margin-top:auto}
.screen>:last-child{margin-bottom:auto}
.screen .box{max-width:min(460px,100%);width:100%;box-sizing:border-box}
.screen .box.wide{max-width:min(640px,100%)}
#title .logo{font:700 clamp(64px,16vw,140px)/1 var(--px);color:var(--ink);letter-spacing:.06em;
  text-shadow:6px 6px 0 var(--pink),12px 12px 0 var(--blue)}
#title .flag{margin-top:22px}
#title .sub{color:var(--pink);margin:12px 0 22px;letter-spacing:.1em}
#title .col{display:flex;flex-direction:column;gap:10px;width:min(260px,100%)}
#title .col button{font-size:16px;padding:10px}
#clear b{color:var(--blue)}
/* the clear box drops in, the flag grows across */
#clear.pop .box{animation:clrIn .35s cubic-bezier(.2,1.6,.4,1) both}
#clear.pop .flag.small{animation:flagGrow .6s .15s steps(9) both}
#clear.pop h2{animation:clrWiggle .5s .3s steps(4) both}
#clear{background:rgba(0,0,0,.8)}
@keyframes clrIn{from{transform:translateY(-40px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes flagGrow{from{width:0}to{width:90px}}
@keyframes clrWiggle{0%,100%{transform:none}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
#clrGoal.good{color:var(--good)} #clrGoal.meh{color:var(--pink)}
#lvList{display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow:auto;padding:4px 6px;text-align:left}
.lvRow{display:flex;align-items:center;gap:4px;background:var(--bg);padding:6px 8px;border:2px solid var(--bg3)}
.lvName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvName span{display:block;font-size:10px;color:var(--muted)}
.lvRow button{padding:4px 8px}

/* online stuff */
body.offline .online{display:none!important}
.who{margin-top:14px}
button.link{background:none;box-shadow:none;padding:0 2px;margin:0;color:var(--blue);text-decoration:underline;font-size:inherit}
button.link:hover{background:none;color:var(--pink)}
.tabs button.on,#lpLike.on,#lpFav.on,#wpLike.on{background:var(--pink);color:#000}
.bad{color:var(--bad)}
#brSearch,#weSearch,#liName,#plName,#accName{flex:1;min-width:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:55vh;overflow:auto;padding:6px;text-align:left}
.card{display:flex;flex-direction:column;gap:3px;align-items:stretch;text-align:left;padding:6px;margin:0;font-size:12px;position:relative}
.card b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .stats{font-size:10px;margin:0}
.card .small{margin:0}
.card.liked b::after{content:" ♥";color:var(--pink)}
.card .x{position:absolute;top:4px;right:4px;font-size:9px;background:var(--bg);padding:1px 4px;color:var(--bad)}
.card.world .swatch{display:block;height:28px;box-shadow:inset 0 -4px 0 0 rgba(255,255,255,.35)}
.thumb{width:100%;aspect-ratio:160/92;image-rendering:pixelated;background:var(--bg);display:block}
.thumb.big{width:min(320px,100%)}
.lpTop{display:flex;gap:14px;flex-wrap:wrap;text-align:left;align-items:flex-start}
.lpInfo{flex:1;min-width:180px}
.lpInfo h2{margin-bottom:4px}
.times{text-align:left;font-size:12px}
.times p{margin:3px 0}
#wpMap{width:100%;image-rendering:pixelated;cursor:pointer;display:block;margin:8px 0}
.field{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12px;text-align:left}
.field span{width:60px}
.field input,.field select{flex:1}
#wePick{display:flex;flex-wrap:wrap;gap:4px;max-height:24vh;overflow:auto}
#wePick .chip,#plBox button{font-size:11px;padding:3px 8px}
#plBox{display:flex;flex-direction:column}

/* only show game bits when actually playing */
body:not([data-mode=play]) :is(#hud,#touch,#tmenu,#tdebug,#hint){display:none!important}
body:not(.testing) #bEdit{display:none}

/* editor */
#editor{display:none}
body[data-mode=edit] #editor{display:block}
body[data-mode=edit] #stage{left:160px;top:50px;bottom:28px}
body[data-mode=edit] #ov{pointer-events:auto;cursor:crosshair;touch-action:none}
#edTop{position:fixed;top:0;left:0;right:0;height:50px;display:flex;align-items:center;gap:4px;padding:0 10px;
  background:var(--bg2);border-bottom:3px solid var(--pink);box-sizing:border-box;overflow-x:auto;z-index:3}
#edTop button{padding:4px 10px;flex:none}
#edTop .zoom{display:flex;align-items:center;flex:none}
#edZoom{min-width:44px;text-align:center;font-size:12px}
#edName{width:150px;flex:1 1 120px;min-width:90px;margin:0 6px}
#edTools{position:fixed;top:50px;left:0;bottom:28px;width:160px;background:var(--bg2);border-right:3px solid var(--bg3);
  box-sizing:border-box;display:flex;flex-direction:column;z-index:3}
#edTabs{display:flex;flex:none;border-bottom:3px solid var(--bg3)}
#edTabs button{flex:1;margin:0;padding:6px 0;font-size:11px;box-shadow:none;background:var(--bg2);color:var(--muted)}
#edTabs button.on{background:var(--bg);color:var(--pink)}
#edTabs button:hover{color:#000}
#edSide{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:2px}
#edSide button.tl{display:flex;align-items:center;gap:8px;text-align:left;font-size:12px;padding:4px 6px;margin:3px 2px;background:var(--bg)}
#edSide button.tl.on{background:var(--pink);color:#000}
#edSide button.tl.on:hover,#edSide button.tl:hover{background:var(--blue);color:#000}
#edSide h5{margin:8px 4px 0;font-size:10px;font-weight:400;color:var(--muted);letter-spacing:.08em}
#edSide canvas{width:24px;height:24px;image-rendering:pixelated;flex:none}
#edSide .mats,#edSide .faces,#edProps .faces{display:flex;gap:2px;flex-wrap:wrap}
#edSide .mats button{padding:3px;margin:3px}
#edSide .faces .chip,#edProps .faces .chip{padding:2px 7px;font-size:12px;margin:2px}
#edSide .chip.on,#edProps .chip.on{background:var(--pink);color:#000}
#edSide .find{margin:2px 2px 4px;font-size:11px}
#edSide label.tg{font-size:11px;display:flex;align-items:center;gap:2px;padding:2px 0;color:var(--muted)}
#edSide .rm{display:flex;align-items:center;gap:4px;padding:2px;border:2px solid transparent}
#edSide .rm.on{border-color:var(--blue)}
#edSide .rmName{flex:1;min-width:0;text-align:left;font-size:11px;padding:3px 6px;margin:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#edSide .rm .small{margin:0;font-size:9px}
#edSide .rm .chip{padding:2px 5px;font-size:10px;margin:2px}
#edMini{flex:none;width:148px;height:80px;margin:4px auto 6px;image-rendering:pixelated;cursor:pointer;box-shadow:0 0 0 2px var(--bg3)}
#edProps h5{margin:10px 0 2px;font-size:10px;font-weight:400;color:var(--muted);letter-spacing:.08em}
#edProps .pair{display:flex;gap:6px}
#edProps .pair label{flex:1}
#edProps .pair input[type=number]{width:52px}
#edProps .row button{padding:4px 8px}
#edProps .keys{display:block;font-size:10px}
#edProps .krow{display:grid;grid-template-columns:10px 34px 34px 36px 1fr 34px 16px;gap:2px;align-items:center;margin:2px 0}
#edProps .krow.head{color:var(--muted)}
#edProps .krow input[type=number],#edProps .krow select{width:100%;min-width:0;box-sizing:border-box;padding:1px 2px;font-size:10px}
#edProps .krow .chip{padding:0 4px;margin:0;font-size:10px}
#edStatus{position:fixed;left:0;right:0;bottom:0;height:28px;line-height:28px;padding:0 10px;font-size:11px;color:var(--muted);
  background:var(--bg2);border-top:3px solid var(--bg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}
#edProps{position:fixed;top:66px;right:16px;width:260px;z-index:3;padding:12px 14px;max-height:calc(100vh - 120px);overflow:auto}
#edProps h4{margin:0 0 8px;color:var(--pink);font-weight:400}
#edProps label,.dlg label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0;font-size:12px}
#edProps input[type=number],#edProps select,.dlg input[type=number],.dlg select{width:80px}
#edProps input[type=text]{width:120px}
#edProps .danger{margin-top:10px}
#edFileMenu{position:fixed;top:60px;right:70px;z-index:6;display:flex;flex-direction:column;padding:12px}
#edLevelDlg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;width:min(340px,90vw);max-height:85vh;overflow:auto;box-sizing:border-box}
#edLevelDlg h3{margin-top:14px}
#edKeys{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;width:min(440px,92vw);max-height:85vh;overflow:auto;box-sizing:border-box;font-size:12px;text-align:left}
#edKeys .keys{margin-bottom:10px}
#toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);z-index:9;background:var(--bg);color:var(--ink);padding:8px 14px;font-size:12px;
  box-shadow:0 -2px 0 0 var(--pink),0 2px 0 0 var(--pink),-2px 0 0 0 var(--pink),2px 0 0 0 var(--pink);max-width:90vw}
@media (max-width:700px){
  body[data-mode=edit] #stage{left:0;bottom:124px}
  #edTools{top:auto;bottom:28px;right:0;width:auto;height:96px;border-right:0;border-top:3px solid var(--bg3)}
  #edSide{flex-direction:row;overflow-x:auto;overflow-y:hidden;align-items:center}
  #edSide button.tl{flex:none;flex-direction:column;gap:2px;font-size:9px;padding:3px 5px}
  #edSide h5,#edMini,#edSide label.tg{display:none}
  #edProps{top:auto;bottom:100px;right:8px;max-height:45vh}
}

/* debug panel */
#menu{position:fixed;top:0;right:0;bottom:0;width:300px;overflow:auto;background:var(--bg);border-left:4px solid var(--pink);padding:14px;box-sizing:border-box;z-index:5;font-size:12px}
#menu h2{display:flex;justify-content:space-between;align-items:center}
#menu label{display:block;padding:3px 0}
#menu label:hover{color:var(--blue)}
#menu button{padding:3px 8px;font-size:11px}
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.rooms button{text-align:left}
.keys{display:grid;grid-template-columns:auto 1fr;gap:4px 10px}

/* settings, fullscreen */
#settings{position:fixed;inset:0;background:#000;overflow:auto;padding:30px 12px;text-align:center;z-index:7;font-size:15px;box-sizing:border-box}
#settings h2{font-size:30px;margin:10px 0 14px;text-shadow:3px 3px 0 var(--pink)}
#settings h3{font-size:13px;margin:26px 0 8px}
#settings label,.brow,.opts label{display:block;padding:5px}
#settings label:hover,.brow:hover,.opts label:hover{color:var(--blue)}
.opts .box{text-align:center}
.opts h3{font-size:13px;margin:18px 0 6px}
.brow>span:first-child{display:inline-block;width:150px;text-align:right;margin-right:10px}
.bkeys{display:inline}
#settings button.chip{padding:1px 6px;font-size:12px}
#settings button.chip.add{color:var(--muted);background:var(--bg)}
#settings button.chip.multi{color:var(--pink)}
#padInfo{white-space:pre-wrap;font:11px "JetBrains Mono",ui-monospace,monospace;margin:0 auto 6px;max-width:440px;color:var(--muted)}
.look #lookPrev{width:210px;height:66px;image-rendering:pixelated;display:block;margin:4px auto 6px;background:var(--bg2)}
.look input[type=color]{width:34px;height:20px;padding:0;border:2px solid var(--ink);background:none;vertical-align:middle;cursor:pointer;margin-left:6px}
#binds h4{margin:14px 0 4px;font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.08em}
#sClose{position:absolute;top:16px;right:20px}

body:not([data-mode=play]) #bDebug{display:none}

/* phones. both menus go fullscreen, header with close sticks to the top */
@media (max-width:700px),(max-height:500px){
  #settings,#menu{inset:0;width:auto;max-width:none;border:0;padding:0 12px 24px;overflow-x:hidden}
  #settings{font-size:13px}
  #menu{font-size:13px;z-index:7}
  #menu>*{max-width:560px;margin-left:auto;margin-right:auto}
  #settings h2,#menu h2{font-size:20px;margin:0 -12px 6px;max-width:none;padding:10px 12px 8px;display:flex;justify-content:space-between;align-items:center;
    position:sticky;top:0;z-index:1;border-bottom:3px solid var(--pink)}
  #settings h2{background:#000}
  #menu h2{background:var(--bg)}
  #settings h3{margin:16px 0 6px}
  #sClose{position:static}
  .brow>span:first-child{width:110px}
  #menu label,#settings label{overflow-wrap:anywhere}
  #hud{font-size:9px;padding:4px 6px}
  #title .logo{font-size:clamp(40px,min(16vw,15vh),140px)}
  #title .flag{margin-top:14px}
  #title .sub{margin:8px 0 12px}
  #title .col{gap:6px}
  #title .col button{font-size:14px;padding:6px}
}
/* nine buttons dont fit under the big logo on short screens */
@media (max-height:860px){
  #title .logo{font-size:clamp(40px,min(16vw,14vh),140px)}
  #title .flag{margin-top:12px}
  #title .sub{margin:8px 0 12px}
  #title .col{gap:6px}
  #title .col button{padding:6px}
}

#hint{position:fixed;right:10px;top:10px;padding:4px 8px;background:rgba(13,11,24,.85);border:2px solid var(--bg3);color:var(--muted);font-size:11px}
:is(#menu,#settings):not([hidden]) ~ #hint{display:none}

/* touch */
#touch{position:fixed;inset:0;pointer-events:none;--ts:1;user-select:none;-webkit-user-select:none}
#touch *{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
#stick{position:absolute;left:24px;bottom:24px;width:calc(140px*var(--ts));height:calc(140px*var(--ts));border-radius:50%;
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);box-sizing:border-box}
#knob{position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none}
#stick i{display:none;pointer-events:none}
#stick.dpad{border-radius:12px;background:none;border:0}
#stick.dpad #knob{display:none}
#stick.dpad i{display:block;position:absolute;width:33.4%;height:33.4%;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.4);box-sizing:border-box}
#stick.dpad i.u{left:33.3%;top:0}#stick.dpad i.d{left:33.3%;bottom:0}#stick.dpad i.l{left:0;top:33.3%}#stick.dpad i.r{right:0;top:33.3%}
#stick.dpad[data-dir*=u] i.u,#stick.dpad[data-dir*=d] i.d,#stick.dpad[data-dir*=l] i.l,#stick.dpad[data-dir*=r] i.r{background:rgba(255,255,255,.7)}
#tbtns{position:absolute;right:24px;bottom:24px;width:calc(170px*var(--ts));height:calc(150px*var(--ts))}
.tb{position:absolute;width:calc(64px*var(--ts));height:calc(64px*var(--ts));border-radius:50%;border:2px solid rgba(255,255,255,.45);margin:0;
  background:rgba(255,255,255,.15);color:#fff;font:calc(11px*var(--ts)) var(--px);padding:0;box-shadow:none}
.tb:hover{background:rgba(255,255,255,.15);color:#fff}
.tb.on{background:rgba(255,255,255,.55);color:#000}
.tb.j{right:0;bottom:0}.tb.d{right:calc(70px*var(--ts));bottom:calc(30px*var(--ts))}
.tb.g{right:calc(14px*var(--ts));top:0}.tb.c{right:calc(100px*var(--ts));top:0;width:calc(48px*var(--ts));height:calc(48px*var(--ts));font-size:calc(9px*var(--ts))}
#tmenu,#tdebug{position:fixed;z-index:6;touch-action:none;left:50%;top:8px;transform:translateX(-50%);width:42px;height:34px;padding:0;font-size:18px;background:rgba(13,11,24,.6)}
/* sit side by side when both are there */
#tdebug{font-size:10px;transform:translateX(4px)}
#tmenu:has(~ #tdebug:not([hidden])){transform:translateX(calc(-100% - 4px))}
#touch.swap #stick{left:auto;right:24px}
#touch.swap #tbtns{right:auto;left:24px;transform:scaleX(-1)}
#touch.swap .tb{transform:scaleX(-1)}