/* Watermelon — compact pixel arcade dashboard */
:root{
  color-scheme:dark;
  --bg:#0c0d0b;--panel:#131411;--panel-2:#191b16;--border:#33362d;--border-hi:#4a4e40;
  --ivory:#f3ecd2;--text:#cfcbb6;--muted:#8a8873;--dim:#5f6153;
  --coral:#ff6b3d;--coral-hi:#ff8559;--coral-lo:#b8401e;
  --green:#8fd45a;--green-lo:#2c3a20;--amber:#e3b95f;--pink:#ff8d94;
  --pixel:'Press Start 2P',monospace;--mono:'IBM Plex Mono',monospace;
  --inset:inset 0 0 0 1px #ffffff0a,inset 0 -3px 0 #00000066;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:12px/1.5 var(--mono);
  background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:16px 16px}
button,input{font:inherit}
button{cursor:pointer;color:inherit;background:transparent;border:1px solid var(--border);border-radius:0;transition:background .12s,border-color .12s,color .12s,transform .12s}
button:hover{background:var(--panel-2);border-color:var(--border-hi)}
button:active{transform:translateY(2px)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
a{color:inherit;text-decoration:none}
i{display:inline-block;width:6px;height:6px;background:var(--green);margin-right:7px}
.muted{color:var(--muted)}.green{color:var(--green)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
[hidden]{display:none!important}

/* shell + topbar */
.shell{width:calc(100% - 32px);max-width:1360px;margin:10px auto}
.topbar{display:flex;align-items:center;gap:20px;min-height:46px;padding:6px 14px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--inset)}
.brand{display:flex;align-items:center;gap:10px;font:12px var(--pixel);color:var(--ivory)}
.brand img{width:26px;height:26px;image-rendering:pixelated}
.brand-dot{color:var(--coral)}
.tagline{color:var(--muted);font-size:11px}
nav{display:flex;gap:6px;margin-left:auto}
nav button{padding:7px 11px;font-size:10px;white-space:nowrap}
nav .wallet{border-color:var(--coral);color:var(--coral)}
nav .wallet:hover{background:var(--coral);color:#1a0c06}
nav .wallet span{margin-left:8px}
.preview-strip{display:flex;justify-content:space-between;gap:12px;padding:6px 2px;color:var(--muted);font-size:9px;letter-spacing:.5px;text-transform:uppercase}
.preview-strip>span:first-child{color:var(--amber)}
.preview-strip i{background:var(--amber)}

/* prize banner (slim) */
.prize-banner{display:flex;align-items:center;gap:14px;padding:8px 14px;margin-bottom:8px;border:1px solid var(--border);border-left:3px solid var(--green);background:var(--panel);box-shadow:var(--inset)}
.banner-icon{font-size:22px;line-height:1;color:var(--green)}
.prize-banner h1{margin:0 0 3px;font:10px/1.5 var(--pixel);color:var(--ivory)}
.prize-banner p{margin:0;font-size:11px;color:var(--muted)}
.winner-cut{margin-left:auto;display:flex;align-items:center;gap:10px}
.winner-cut strong{font-size:26px;line-height:1;color:var(--green)}
.winner-cut strong span{font-size:15px}
.winner-cut>span{width:100px;font-size:8px;line-height:1.5;color:var(--muted)}

/* layout */
.game-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr) minmax(240px,.8fr);gap:8px;align-items:start}
.left-column,.right-column{display:grid;gap:8px;min-width:0}
.panel{min-width:0;border:1px solid var(--border);background:var(--panel);box-shadow:var(--inset)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 12px;border-bottom:1px solid var(--border);font-size:9px;letter-spacing:1px;background:var(--panel-2)}
.panel-heading h2{margin:0;font:600 9px var(--mono);letter-spacing:1.2px;color:var(--muted)}
.small-label{font-size:8px;color:var(--amber)}.small-label i{width:5px;height:5px;background:var(--amber)}
.tiny-square{width:6px;height:6px;border:1px solid var(--dim)}

/* left column */
.pot-value{display:flex;align-items:baseline;gap:8px;padding:16px 14px 2px;line-height:1;font-size:clamp(38px,4.6vw,62px);font-weight:700;letter-spacing:-3px;color:var(--ivory);text-shadow:3px 3px 0 #00000088}
.pot-value small{font-size:12px;letter-spacing:0;color:var(--green);text-shadow:none}
.pot-note{margin:8px 14px 10px;font-size:10px}
.stats{margin:0;padding:0 14px 6px}
.stats>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border)}
.stats>div:last-child{border:0}
.stats dt{font-size:10px;color:var(--muted)}
.stats dd{margin:0;font-size:10px;font-weight:600;text-align:right;color:var(--ivory)}
.stats dd.green{color:var(--green)}
.footnote{margin:0;padding:0 14px 10px;font-size:9px;line-height:1.6;color:var(--dim)}
.player{display:flex;align-items:center;gap:10px;padding:12px 14px}
.player-avatar{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border-hi);background:var(--green-lo);box-shadow:var(--inset);font:12px var(--pixel);color:var(--green)}
.player strong{display:block;font-size:13px;color:var(--ivory)}
.player div>span{display:block;margin-top:3px;font-size:9px;color:var(--muted)}
.position-line{display:flex;justify-content:space-between;gap:10px;padding:0 14px 10px;font-size:9px;color:var(--muted)}
.position-line strong{color:var(--green);white-space:nowrap}

/* arena */
.arena{overflow:hidden}
.arena-heading>span:first-child{display:flex;align-items:center}
.arena-heading h2{display:inline;color:var(--ivory)}
.arena-heading>span:last-child{color:var(--muted)}
.arena-heading b{color:var(--ivory)}
.status-dot{width:6px;height:6px;margin-right:8px;animation:blink 2s infinite}
.scene-wrap{position:relative;height:clamp(210px,40vh,360px);overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#26331b 0,transparent 68%),#0f100d;border-bottom:1px solid var(--border)}
canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.scene-caption{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:var(--green)}
.coordinate{color:var(--dim)}
.scene-bottom{position:absolute;bottom:8px;width:100%;text-align:center;font-size:10px;color:var(--muted)}
.live-dot{display:inline-block;width:5px;height:5px;margin-right:7px;background:var(--green)}
.floating-label{position:absolute;top:26%;left:50%;transform:translateX(-50%);font:10px var(--pixel);color:var(--coral);opacity:0;pointer-events:none;white-space:nowrap}
.floating-label.animate{animation:float .8s ease-out}
.tension{padding:8px 14px 6px}
.tension-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.8px;color:var(--muted)}
.tension-label span:last-child{color:var(--green)}
.tension-track{display:flex;gap:3px;margin:6px 0 4px}
.tension-track span{flex:1;height:8px;background:#23251e}
.tension-track span.active{background:var(--green)}
.tension-track.warm span.active{background:var(--amber)}
.tension-track.hot span.active{background:var(--coral)}
.tension p{margin:0;font-size:8px;color:var(--dim)}
.play-controls{padding:8px 14px 12px;border-top:1px solid var(--border)}
.quantity-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.quantity-row>span{font-size:8px;letter-spacing:.6px;color:var(--muted)}
.quantity{display:flex;gap:4px}
.quantity>button{min-width:34px;height:30px;padding:0 8px;font-size:10px}
.quantity>button.selected{border-color:var(--green);color:var(--green);background:var(--green-lo);box-shadow:var(--inset)}
.custom-quantity input{width:70px;height:30px;border:1px solid var(--border);border-radius:0;background:transparent;color:var(--ivory);text-align:center;font-size:10px;appearance:textfield}
.custom-quantity input::-webkit-inner-spin-button{appearance:none}
.custom-quantity input:focus{border-color:var(--green)}
.add-band{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;padding:12px 16px;border:0;background:var(--coral);color:#1a0c06;font:11px var(--pixel);box-shadow:inset 0 -4px 0 var(--coral-lo),inset 0 2px 0 #ffffff33,4px 4px 0 #000}
.add-band:hover{background:var(--coral-hi);transform:translate(-1px,-1px);box-shadow:inset 0 -4px 0 var(--coral-lo),inset 0 2px 0 #ffffff33,5px 5px 0 #000}
.add-band:active{transform:translate(3px,3px);box-shadow:inset 0 -2px 0 var(--coral-lo),1px 1px 0 #000}
.add-band:disabled{cursor:wait;opacity:.6}
.button-band{font:22px var(--mono);line-height:1}
.add-band #cost{font:700 10px var(--mono);white-space:nowrap}
.add-band #cost b{margin-left:8px;font-size:15px}
.under-button{display:flex;justify-content:space-between;gap:6px;padding-top:9px;font-size:8px;color:var(--muted)}
.under-button span:last-child{color:var(--dim)}

/* right column */
.tabs{display:flex;gap:14px;align-items:center;height:100%}
.tabs button{position:relative;height:100%;padding:0;border:0;font-size:9px;letter-spacing:.6px;color:var(--dim)}
.tabs button:hover{background:transparent;color:var(--ivory)}
.tabs button[aria-selected=true]{color:var(--ivory)}
.tabs button[aria-selected=true]:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--coral)}
.log-header{display:flex;justify-content:space-between;padding:7px 12px;border-bottom:1px dashed var(--border);font-size:8px;letter-spacing:.5px;color:var(--dim)}
#activity-log,#winners-log{max-height:260px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-hi) transparent}
.empty-log{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:190px;padding:10px;text-align:center}
.empty-art{margin-bottom:10px;font:13px/1.3 var(--mono);color:var(--dim)}
.empty-log strong{font:8px/1.9 var(--pixel);color:var(--text)}
.empty-log p{margin:8px 0;font-size:10px;color:var(--muted)}
.down-arrow{font-size:16px;color:var(--coral)}
.log-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px dashed var(--border);animation:appear .25s ease-out}
.log-row:hover{background:var(--panel-2)}
.log-row strong{display:block;font-size:10px;font-weight:500;color:var(--ivory)}
.log-row small{display:block;margin-top:2px;font-size:8px;color:var(--muted)}
.log-row time{font-size:8px;color:var(--dim)}
.log-row .log-dot{margin-right:6px;color:var(--green)}
.log-row.pop strong{color:var(--coral)}
.instructions ol{display:grid;gap:10px;margin:0;padding:12px 14px 4px;list-style:none}
.instructions li{display:flex;gap:10px;align-items:flex-start}
.instructions li>span{margin-top:3px;font:8px var(--pixel);color:var(--green)}
.instructions p{margin:0;font-size:10px;line-height:1.6;color:var(--muted)}
.instructions b{font-weight:600;color:var(--ivory)}
.mini-melon-row{display:flex;align-items:center;gap:10px;margin:8px 14px 0;padding:8px 0 10px;border-top:1px dashed var(--border);font-size:7px;letter-spacing:.5px;color:var(--dim)}
.mini-melon-row img{width:22px;height:22px;image-rendering:pixelated}
footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 12px;font-size:9px;color:var(--dim)}
footer i{width:4px;height:4px}
footer button{padding:4px 8px;border:0;font-size:9px;color:var(--muted)}
footer button:hover{color:var(--coral);background:transparent}
footer>span:nth-child(2){font-size:8px;letter-spacing:1px}

/* dialogs + toast */
dialog{width:calc(100% - 32px);max-width:480px;padding:30px;border:1px solid var(--border-hi);border-radius:0;background:var(--panel);color:var(--text);box-shadow:var(--inset),8px 8px 0 #000}
dialog::backdrop{background:#050604e6}
dialog h2{margin:14px 0 18px;font:14px/1.7 var(--pixel);color:var(--ivory)}
dialog p{font-size:12px;line-height:1.8;color:var(--text)}
dialog strong{color:var(--green)}
.dialog-eyebrow{font-size:9px;letter-spacing:1px;color:var(--coral)}
.close-dialog{position:absolute;top:10px;right:12px;padding:0 6px;border:0;font-size:22px}
.dialog-note{margin:18px 0;padding:12px;border:1px dashed var(--border-hi);font-size:10px;line-height:1.7;color:var(--amber)}
.dialog-action{width:100%;padding:16px 12px;border:0;background:var(--coral);color:#1a0c06;font:8px/1.8 var(--pixel);box-shadow:inset 0 -4px 0 var(--coral-lo),4px 4px 0 #000}
.dialog-action:hover{background:var(--coral-hi)}
#win-dialog{text-align:center}
#win-dialog img{image-rendering:pixelated}
.win-amount{margin:14px 0;font-size:46px;font-weight:700;letter-spacing:-2px;color:var(--ivory)}
.win-amount small{font-size:14px;letter-spacing:0;color:var(--green)}
.win-note{margin-bottom:22px;font-size:10px!important;color:var(--muted)!important}
.toast{position:fixed;bottom:20px;left:50%;z-index:10;max-width:calc(100% - 30px);padding:12px 18px;border:1px solid var(--green);background:var(--green-lo);color:var(--ivory);font-size:11px;box-shadow:4px 4px 0 #000;opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes blink{50%{opacity:.3}}
@keyframes float{0%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-30px)}}
@keyframes appear{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media(max-width:1150px){
  .tagline{display:none}
  .game-layout{grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr)}
  .right-column{grid-column:1/-1;grid-template-columns:1.2fr 1fr}
}
@media(max-width:680px){
  .shell{width:calc(100% - 20px);margin:8px auto}
  .topbar{flex-wrap:wrap;gap:10px;padding:10px}
  nav{width:100%;margin:0}
  nav button{flex:1;padding:9px 6px}
  nav .wallet span{margin-left:4px}
  .preview-strip{flex-direction:column;gap:2px;font-size:8px}
  .winner-cut{display:none}
  .prize-banner h1{font-size:8px}
  .prize-banner p{font-size:10px}
  .game-layout{display:flex;flex-direction:column}
  .left-column,.right-column{display:contents}
  .panel{width:100%}
  .pot-panel{order:1;position:relative}
  .arena{order:2}
  .last-panel{order:3}.activity-panel{order:4}.your-panel{order:5}.instructions{order:6}
  .pot-panel .stats,.pot-note{display:none}
  .pot-value{padding:12px 14px;font-size:44px}
  .pot-panel .footnote{position:absolute;right:12px;top:44px;width:120px;padding:0;text-align:right;font-size:8px}
  .scene-wrap{height:auto;aspect-ratio:1.3}
  .quantity-row{flex-direction:column;align-items:stretch}
  .quantity{width:100%}
  .quantity>button{flex:1;height:40px}
  .custom-quantity{flex:1.4}.custom-quantity input{width:100%;height:40px}
  .add-band{min-height:60px;font-size:10px}
  .under-button{font-size:7px}
  .tension p{display:none}
  footer>span:nth-child(2){display:none}
  dialog{padding:24px 18px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}