:root{--bg:#2b1d2e;--panel:#3d2a40;--panel2:#4e3652;--ink:#fbeed6;--dim:#c4a98f;--acc:#ffb347;--acc2:#ff6b6b;--ok:#7bd88f;--line:#1a1020}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:14px/1.35 ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace}
.hidden{display:none!important}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
button{font:inherit;color:var(--ink);background:var(--panel2);border:2px solid var(--line);
  box-shadow:0 3px 0 var(--line);padding:5px 10px;cursor:pointer;border-radius:3px}
button:hover{background:#63466a}button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
button.big{background:var(--acc);color:#2b1d2e;font-weight:bold;padding:9px 16px;font-size:16px}
button.big:hover{background:#ffc470}
button.on{background:var(--ok);color:#1a1020}
button:disabled{opacity:.5;cursor:default}
input,textarea,select{font:inherit;color:var(--ink);background:#22152a;border:2px solid var(--line);padding:6px 8px;border-radius:3px;width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acc)}
.screen{min-height:100%}
#screen-landing,#screen-join{display:flex;align-items:center;justify-content:center;padding:16px}
.card{background:var(--panel);border:3px solid var(--line);box-shadow:0 6px 0 var(--line);padding:22px;width:min(420px,94vw);border-radius:4px}
.card.wide{width:min(720px,94vw)}
h1{margin:0 0 4px;font-size:30px;color:var(--acc);letter-spacing:1px;text-shadow:3px 3px 0 var(--line)}
h2{margin:0 0 10px}h3{margin:14px 0 6px;color:var(--acc);font-size:13px;text-transform:uppercase;letter-spacing:1px}
.sub{color:var(--dim);margin:0 0 18px}.or{text-align:center;color:var(--dim);margin:14px 0 8px}
#form-code{display:flex;gap:8px}#in-code{text-transform:uppercase;letter-spacing:6px;text-align:center;font-size:18px}
label,.label{display:block;margin:10px 0 6px;color:var(--dim)}
.err{color:var(--acc2);min-height:1.2em}
#sprite-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
#sprite-pick button{padding:6px;display:flex;justify-content:center}
#sprite-pick button.sel{background:var(--acc);}
#sprite-pick canvas{width:56px;height:56px}
/* game layout */
#screen-game{display:grid;grid-template-columns:auto minmax(0,1fr) 320px;grid-template-rows:auto 1fr;height:100vh}
#banner{grid-column:1/4;background:var(--panel);border-bottom:3px solid var(--line);padding:8px 14px;display:flex;gap:14px;align-items:baseline}
#banner{min-height:40px}#room-title{font-size:20px;color:#ffd23f;font-weight:bold;text-shadow:2px 2px 0 var(--line)}#room-prompt{color:var(--ink)}
#stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#150c1a}
#game{width:100%;flex:1;min-height:0}
#chatbar{padding:6px 10px;background:var(--panel);border-top:3px solid var(--line)}
#chat-in{background:#fff;color:#1a1020;border-color:var(--acc)}
#tip{position:fixed;z-index:25;max-width:320px;background:#fff6dc;color:#2b1d2e;border:2px solid #1a1020;box-shadow:3px 3px 0 #1a1020;padding:6px 9px;pointer-events:none;white-space:pre-wrap;word-wrap:break-word}
#hint{position:absolute;bottom:18px;z-index:3;left:50%;transform:translateX(-50%);background:var(--acc);color:#2b1d2e;
  padding:7px 14px;font-weight:bold;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);border-radius:3px;pointer-events:none}
#timer{position:fixed;top:44px;left:50%;transform:translateX(-50%);z-index:5;background:var(--line);color:var(--ink);
  font-size:34px;font-weight:bold;padding:2px 16px;border:3px solid var(--acc);border-top:0;border-radius:0 0 6px 6px}
#timer.flash{animation:fl .5s steps(2) infinite;border-color:var(--acc2)}
@keyframes fl{50%{background:var(--acc2);color:#fff}}
#conn{position:fixed;top:44px;right:340px;z-index:6;background:var(--acc2);color:#fff;padding:3px 10px;border-radius:3px}
#side{background:var(--panel);border-left:3px solid var(--line);padding:10px 12px;overflow-y:auto;min-height:0}
#invite{background:var(--panel2);padding:8px;border-radius:3px;margin-bottom:8px;font-size:12px}
#invite .url{word-break:break-all;color:var(--acc);margin:4px 0}
#fac{background:var(--panel2);padding:8px;border-radius:3px;margin-bottom:8px}
#fac h4{margin:8px 0 4px;color:var(--acc);font-size:12px;text-transform:uppercase}
#fac .row,.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.grow{flex:1}
#fac select{width:auto;flex:1}
.note{background:#ffe08a;color:#2b1d2e;padding:8px 10px;margin:6px 0;border-radius:2px;box-shadow:3px 3px 0 var(--line);word-wrap:break-word;position:relative}
.note.mine{background:#ffc9a8}
.note .meta{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.note button{padding:1px 8px;font-size:12px;background:#fff7dc;color:#2b1d2e;border-color:#2b1d2e;box-shadow:0 2px 0 #2b1d2e}
.note button.on{background:var(--ok)}
.note input{background:#fff7dc;color:#2b1d2e;border-color:#2b1d2e;padding:2px 6px;width:120px}
.note .owner{font-weight:bold}
.dim{color:var(--dim)}
#players{list-style:none;margin:0;padding:0}
#players li{display:flex;gap:7px;align-items:center;padding:2px 0}
.dot{width:9px;height:9px;border-radius:50%;background:#777;display:inline-block}.dot.on{background:var(--ok)}
.modal{position:fixed;inset:0;background:rgba(10,5,15,.7);display:flex;align-items:center;justify-content:center;z-index:20}
#toast-box{position:fixed;top:50px;left:50%;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;gap:6px;align-items:center}
.toast{background:var(--acc2);color:#fff;padding:7px 14px;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);border-radius:3px}
@media (max-width:800px){#screen-game{grid-template-columns:1fr;grid-template-rows:auto 50vh auto;height:auto}#banner{grid-column:1}#chatlog{display:none}#conn{right:10px}}

#create-row{margin-top:0}#create-row select{width:auto;flex:1}
#fac .frow{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:5px 0;border-top:1px solid var(--line)}
#fac .frow b{flex:1 0 100%}
#fac .frow button{padding:2px 7px;font-size:12px}
.st{font-size:11px;padding:0 6px;border-radius:2px;background:#555;color:#fff;text-transform:uppercase}
.st.open{background:#2f8f4a}.st.revealed{background:#c8801a}
.bt{margin:10px 0 2px;color:var(--ink);font-weight:bold}
#modal-note select{width:100%}

#game{position:relative}
#hintbar{padding:3px 10px;background:var(--panel);border-top:2px solid var(--line);color:var(--dim);font-size:12px}
#arrows{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.arrow{position:absolute;display:flex;align-items:center;gap:4px;color:#fff;font-weight:bold;font-size:12px;text-shadow:0 0 3px #150c1a,1px 1px 0 #150c1a,-1px -1px 0 #150c1a;white-space:nowrap}
.arrow i{font-style:normal;display:inline-block;color:var(--acc)}
#chatlog{width:240px;background:var(--panel);border-right:3px solid var(--line);display:flex;flex-direction:column;min-height:0}
#chatlog .chead{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;color:var(--acc);font-size:12px;text-transform:uppercase;letter-spacing:1px}
#chatlog .chead button{padding:0 8px}
#chatlines{flex:1;overflow-y:auto;padding:0 8px 8px;font-size:12px;min-height:0}
#chatlines div{margin:2px 0;word-wrap:break-word}#chatlines .t{color:var(--dim)}#chatlines .me{color:#ffe45c}
#chatlog.collapsed{width:34px}#chatlog.collapsed #chatlines,#chatlog.collapsed .chead span{display:none}
#players li.click{cursor:pointer}#players li.click:hover{color:var(--acc)}
.bars{margin:6px 0}.bar{display:flex;align-items:center;gap:6px;margin:3px 0;font-size:12px}
.bar .l{flex:0 0 90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .f{height:14px;background:var(--acc);border:1px solid var(--line);min-width:2px}
.flows{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;text-align:left}