:root{--ink:#1a1020;--gold:#ffd84a;--cyan:#5ee6ff;--pink:#ff5ac8;--orange:#ffb43a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#2a1d4a;color:#fff;font-family:system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}
#c{position:fixed;inset:0;display:block}
.logo,b,button,#turn,#banner,kbd,.pc,#weps span{font-family:"Jersey 10",monospace;font-weight:normal}
#hud{position:fixed;inset:0;pointer-events:none}
.home{position:absolute;left:12px;top:10px;color:#fff;text-decoration:none;font:20px "Jersey 10",monospace;padding:5px 12px;background:#1a1020cc;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--orange);pointer-events:auto}
#turn{position:absolute;left:50%;top:10px;transform:translateX(-50%);font-size:32px;padding:4px 18px;background:#1a1020cc;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold);color:var(--gold);white-space:nowrap}
#turn:empty{display:none}
body.myturn #turn{animation:pulse .6s ease-in-out infinite alternate}@keyframes pulse{to{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold),0 0 24px var(--gold)}}
#cards{position:absolute;right:12px;top:10px;display:flex;flex-direction:column;gap:6px}
.pc{display:grid;grid-template-columns:1fr auto;gap:0 10px;min-width:170px;padding:4px 10px;background:#1a1020cc;box-shadow:0 0 0 2px var(--ink),0 0 0 3px #4a3a5a}
.pc b{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}.pc span{font-size:22px;color:var(--gold);grid-row:span 2;align-self:center}
.pc i{font-style:normal;font-size:11px;color:#ff4a6a;letter-spacing:2px}.pc u{text-decoration:none;color:#ffffff33}
.pc.on{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold)}.pc.me b{color:var(--cyan)}.pc.out{opacity:.4}
#banner{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.6);font-size:64px;text-shadow:4px 4px 0 var(--ink),0 0 20px #000;opacity:0;transition:all .25s}
#banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#meter{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);display:flex;gap:10px;visibility:hidden}
.bar{position:relative;width:200px;height:20px;background:#1a1020cc;box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--gold)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd84a,#ff9a3c 60%,#ff4a5e)}.bar.sta{width:120px;box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--cyan)}.bar.sta i{background:var(--cyan)}
.bar span{position:absolute;inset:0;text-align:center;font:14px/20px "Jersey 10",monospace;text-shadow:1px 1px 0 #000}
#weps{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto}
#weps button{position:relative;width:86px;height:64px;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#fff;background:#1a1020dd;box-shadow:0 0 0 2px var(--ink),0 0 0 3px #4a3a5a;padding:0}
#weps button.on{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold);background:#3a2a1add}#weps button.empty{opacity:.35}
#weps img{width:48px;height:24px;image-rendering:pixelated}#weps span{font-size:12px;line-height:1;white-space:nowrap}
#weps kbd{position:absolute;left:3px;top:2px;font-size:12px;color:var(--gold)}#weps em{position:absolute;right:4px;top:1px;font:normal 14px "Jersey 10",monospace;color:var(--cyan)}
#keys{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:12px;font:15px "Jersey 10",monospace;white-space:nowrap;opacity:.85}
kbd{display:inline-block;padding:0 5px;margin-right:4px;background:#e8e8f0;color:#1a1020;box-shadow:0 2px 0 #8a8aa0}
#banner,#turn{pointer-events:none}
#touchpad{display:none}
.panel{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:#1a1020a0;z-index:5}.panel[hidden]{display:none}
.card{width:min(460px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px;text-align:center;background:linear-gradient(180deg,#3a2a5a,#1f1533);box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--orange),8px 8px 0 6px var(--ink)}
.logo{font-size:60px;line-height:.85;color:var(--orange);text-shadow:4px 4px 0 var(--ink)}.logo small{display:block;font-size:34px;color:var(--cyan);letter-spacing:.2em}
.card p{margin:0;font-size:14px;line-height:1.4;opacity:.9}
.who{font-size:14px;opacity:.9}.who b{color:var(--cyan);font-size:20px}
#name{width:100%;font:26px "Jersey 10",monospace;text-align:center;padding:8px;border:0;background:#1a1020;color:var(--gold);box-shadow:0 0 0 2px var(--cyan);outline:none;text-transform:uppercase}
.big,.mid{display:block;width:100%;border:0;cursor:pointer;color:#1a1020;background:var(--orange);box-shadow:0 0 0 3px var(--ink),5px 5px 0 3px var(--ink);text-decoration:none;transition:translate .08s}
.big{font-size:38px;padding:8px}.mid{font-size:24px;padding:8px}.big small,.mid small{display:block;font:12px system-ui;opacity:.75}
.big:hover,.mid:hover{translate:-2px -2px}.big:active,.mid:active{translate:3px 3px}.alt{background:var(--cyan)}
.row{display:flex;gap:10px;width:100%}
#status{min-height:18px;font-size:14px;color:var(--gold);width:100%}
.lob{display:flex;flex-direction:column;gap:8px;align-items:center}.lob input{width:100%;font-size:12px;padding:6px;border:0;background:#1a1020;color:var(--gold);box-shadow:0 0 0 2px var(--cyan)}
.lob .lp{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.lob .lp span{padding:2px 8px;background:#1a1020;box-shadow:0 0 0 2px #4a3a5a}.lob .lp span.rd{box-shadow:0 0 0 2px #42b642}
.lob button{border:0;cursor:pointer;font-size:20px;padding:6px 14px;background:#4a3a5a;color:#fff;box-shadow:0 0 0 2px var(--ink)}.lob button.go{background:#42b642;color:#1a1020}
.how{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12px;opacity:.8;width:100%}.how b{font-size:15px;color:var(--gold)}
#orows{display:flex;flex-direction:column;gap:6px;width:100%}#orows div{display:grid;grid-template-columns:40px 1fr auto;align-items:center;padding:6px 10px;background:#1a1020aa;text-align:left}
#orows div.me{box-shadow:0 0 0 2px var(--cyan)}#orows b{font-size:24px;color:var(--gold)}#orows i{font-style:normal;font-size:12px;opacity:.75}
#ostars{font:28px "Jersey 10",monospace;color:var(--gold);min-height:28px}
/* friends sit under the HUB button */
body.islands #soc{top:56px;left:12px}
/* phones and tablets: big thumb buttons, smaller HUD */
body.touch #keys{display:none}
body.touch #touchpad{display:flex;position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);justify-content:space-between;padding:0 10px;pointer-events:none}
#touchpad .l,#touchpad .r{display:grid;grid-template-columns:repeat(3,64px);gap:8px;align-items:end}
#touchpad button{pointer-events:auto;height:64px;border:0;border-radius:12px;font-size:24px;color:#fff;background:#1a1020bb;box-shadow:0 0 0 2px #ffffff55}
#touchpad #tf{background:#ff4a5ecc;font-size:18px;line-height:1}#touchpad #tj{font-size:18px;background:#5ee6ff99}
body.touch #weps{bottom:84px;gap:4px}body.touch #weps button{width:58px;height:50px}body.touch #weps span{display:none}body.touch #weps img{width:40px;height:20px}
body.touch #meter{bottom:144px}body.touch .bar{width:130px}
body.touch #cards{top:52px;right:6px}body.touch .pc{min-width:120px;padding:2px 8px}body.touch .pc b{font-size:15px;max-width:80px}body.touch .pc span{font-size:18px}
body.touch #turn{font-size:22px;top:8px}
@media (max-width:700px){#weps button{width:62px}#weps span{display:none}.logo{font-size:46px}.big{font-size:30px}}
#weps kbd{background:none;box-shadow:none;padding:0;margin:0;color:var(--gold);font-size:14px}
body.touch #banner{font-size:34px;white-space:nowrap}
@media (max-width:440px){#touchpad .l,#touchpad .r{grid-template-columns:repeat(3,52px);gap:6px}#touchpad button{height:56px;font-size:20px}#touchpad #tf,#touchpad #tj{font-size:15px}body.touch #weps{bottom:76px}body.touch #weps button{width:52px;height:44px}}
.rotate{display:none}
@media (orientation:portrait) and (pointer:coarse){body.touch #hud:not([hidden]) ~ .rotate{display:block;position:fixed;left:50%;bottom:200px;transform:translateX(-50%);z-index:4;font:15px "Jersey 10",monospace;padding:3px 10px;background:#1a1020cc;box-shadow:0 0 0 2px #ffffff44;pointer-events:none;white-space:nowrap}}

/* the power bar: big, says what to do next, glows once the power is locked */
.bar.pw{width:min(420px,60vw);height:30px}.bar.pw span{font-size:17px;line-height:30px}
#meter.locked .bar.pw{animation:lockglow .5s ease-in-out infinite alternate}@keyframes lockglow{to{box-shadow:0 0 0 2px var(--ink),0 0 0 4px #fff,0 0 22px #ffd84a}}
#touchpad #tf.locked{background:#42b642;animation:lockglow .5s ease-in-out infinite alternate}
body.touch .bar.pw{width:min(260px,62vw)}body.touch .bar.pw span{font-size:13px}
/* behind the menu: a bots-only match, softly blurred */
#c.blur{filter:blur(4px) brightness(.75) saturate(1.1);transform:scale(1.03)}