:root{
  --eazo-safe-area-top: max(56px, env(safe-area-inset-top, 0px));
  --eazo-safe-area-bottom: max(34px, env(safe-area-inset-bottom, 0px));
  --ink:#27212b;
  --wall:#eadcff;
  --pink:#ff55b8;
  --blue:#62cef7;
  --cream:#fff8e7;
  --shadow:#7b5a96;
  --deep:#3f2d55;
  --lime:#b6e86b;
  --panel:#f8efff;
  --lav:#cdb7f6;
  --grid:rgba(39,33,43,.16);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden;background:#181818;color:var(--ink);
  font-family:Verdana,Geneva,Tahoma,Arial,sans-serif;-webkit-text-size-adjust:100%;}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
canvas{display:block}
[hidden]{display:none !important}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.app{
  min-height:100dvh;
  padding-top:var(--eazo-safe-area-top);
  padding-bottom:var(--eazo-safe-area-bottom);
  background:linear-gradient(180deg,#27212b 0,#30233b 6%,#d9c5ff 6%,#eadcff 100%);
  position:relative;isolation:isolate;
}
.app::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px);
  background-size:42px 42px;opacity:.4;z-index:-1;pointer-events:none}

.window{
  width:min(100%,520px);margin:0 auto;padding:0 10px 8px;
  display:flex;flex-direction:column;gap:8px;
  min-height:calc(100dvh - var(--eazo-safe-area-top) - var(--eazo-safe-area-bottom));
}

/* ---- Title bar / window chrome ---- */
.titlebar{
  flex:0 0 auto;min-height:38px;display:flex;align-items:center;gap:6px;padding:0 8px;
  background:linear-gradient(#7bd8ff,#38aee5);
  border:3px solid var(--ink);
  box-shadow:inset 3px 3px #c5f2ff,inset -3px -3px #237197,4px 4px 0 rgba(39,33,43,.35);
  color:#0c3a52;font-weight:bold;letter-spacing:.3px;
}
.titletext{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cursor{display:inline-block;width:8px;height:15px;background:#0c3a52;margin-left:2px;animation:blink 1s steps(1) infinite;flex:0 0 auto}
@keyframes blink{50%{opacity:0}}
.lang{margin-left:auto;display:flex;gap:4px;flex:0 0 auto}
.langBtn{min-width:44px;min-height:30px;padding:2px 8px;font-size:12px;font-weight:bold;
  background:var(--cream);border:2px solid var(--ink);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #b79ad0;color:var(--deep)}
.langBtn.active{background:var(--pink);color:#fff;box-shadow:inset 2px 2px #ffa9dc,inset -2px -2px #b02b76}

/* ---- Room layout ---- */
.room{flex:1 1 auto;min-height:0;display:flex;gap:8px;align-items:stretch}
.rail{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;justify-content:space-between;
  padding:6px;background:var(--panel);border:3px solid var(--ink);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #cdb7f6,4px 4px 0 rgba(39,33,43,.28)}
.cat{min-width:44px;min-height:44px;flex:1 1 0;display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;background:var(--cream);border:2px solid var(--ink);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #cdb7f6;color:var(--deep)}
.cat.active{background:var(--blue);box-shadow:inset 2px 2px #d3f4ff,inset -2px -2px #2b8fbd;color:#0c3a52}

.main{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px}

.stageWrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:3px solid var(--ink);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #cdb7f6,4px 4px 0 rgba(39,33,43,.28);
  overflow:hidden}
#stage{height:100%;width:auto;max-width:100%;image-rendering:pixelated}
#stage.popping{animation:pop .16s steps(2)}
@keyframes pop{50%{transform:translateY(-6px) scale(1.02)}}

/* ---- Vibe meter ---- */
.meter{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.meterLabel{font-size:15px;min-width:42px}
.meterTrack{flex:1 1 auto;height:16px;background:var(--cream);border:2px solid var(--ink);
  box-shadow:inset 2px 2px #d9c8f0;overflow:hidden}
.meterFill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--pink) 0 8px,#ff8ed1 8px 10px);
  transition:width .18s steps(5)}

.instruction{flex:0 0 auto;margin:0;font-size:12px;line-height:1.35;color:var(--deep);text-align:center}

/* ---- Item strip ---- */
.stripBar{flex:0 0 auto;display:flex;gap:6px;align-items:stretch}
.undo{min-width:44px;min-height:44px;font-size:20px;background:var(--cream);border:2px solid var(--ink);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #cdb7f6;color:var(--deep)}
.undo:disabled{opacity:.4}
.stripBox{flex:1 1 auto;min-width:0;background:var(--panel);border:2px solid var(--ink);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #cdb7f6;padding:4px;display:flex;flex-direction:column;gap:2px}
.items{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px}
.item{flex:0 0 auto;min-width:56px;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:3px;background:var(--cream);border:2px solid var(--ink);box-shadow:inset 1px 1px #fff}
.item.selected{background:#ffe0f2;border-color:var(--pink);box-shadow:inset 1px 1px #fff,0 0 0 2px var(--pink)}
.item .mini{width:44px;height:36px;image-rendering:pixelated}
.item span{font-size:9px;line-height:1;max-width:56px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-size:11px;font-weight:bold;color:var(--pink);text-align:center;padding-top:1px}

/* ---- Big buttons ---- */
.actions{flex:0 0 auto;display:flex;gap:8px}
.bigBtn{flex:1 1 0;min-height:48px;font-size:16px;font-weight:bold;letter-spacing:1px;
  background:var(--cream);border:3px solid var(--ink);
  box-shadow:inset 3px 3px #fff,inset -3px -3px #cdb7f6,4px 4px 0 rgba(39,33,43,.3);color:var(--deep)}
.bigBtn:active{box-shadow:inset -3px -3px #fff,inset 3px 3px #cdb7f6,2px 2px 0 rgba(39,33,43,.3);transform:translate(2px,2px)}
#random{background:var(--blue);color:#0c3a52;box-shadow:inset 3px 3px #d3f4ff,inset -3px -3px #2b8fbd,4px 4px 0 rgba(39,33,43,.3)}
.bigBtn.done{background:#e7ddf5;color:#9d8bb5}
.bigBtn.done.ready{background:var(--pink);color:#fff;box-shadow:inset 3px 3px #ffa9dc,inset -3px -3px #b02b76,4px 4px 0 rgba(39,33,43,.3);
  animation:glow 1.1s ease-in-out infinite}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25) drop-shadow(0 0 6px var(--pink))}}

/* ---- Result card ---- */
.result .window{justify-content:flex-start}
.card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;
  padding:12px;background:var(--panel);border:3px solid var(--ink);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #cdb7f6,4px 4px 0 rgba(39,33,43,.28)}
.cardHeading{margin:0;font-size:14px;text-align:center;color:var(--deep);letter-spacing:2px;text-transform:uppercase}
.resultTop{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.podium{flex:1 1 140px;min-width:130px;display:flex;justify-content:center;
  background:linear-gradient(180deg,#eadcff,#d3b8f6);border:3px solid var(--ink);
  box-shadow:inset 2px 2px #fff}
.podium canvas{height:auto;width:100%;max-width:190px;image-rendering:pixelated}
.resultInfo{flex:1 1 160px;min-width:150px;display:flex;flex-direction:column;gap:10px}
.lookTitle{font-size:24px;line-height:1.15;color:var(--pink);text-shadow:2px 2px 0 var(--deep)}
.bars{display:flex;flex-direction:column;gap:6px}
.barRow{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:bold;color:var(--deep)}
.barRow>span{flex:0 0 52px}
.barRow>b{flex:0 0 20px;text-align:right}
.barShell{flex:1 1 auto;height:14px;background:var(--cream);border:2px solid var(--ink);overflow:hidden}
.bar{height:100%;transition:width .3s steps(6)}

.resultActions{display:flex;gap:8px;flex-wrap:wrap}
.resultActions button{flex:1 1 0;min-width:88px;min-height:46px;font-size:14px;font-weight:bold;
  background:var(--cream);border:3px solid var(--ink);
  box-shadow:inset 3px 3px #fff,inset -3px -3px #cdb7f6,3px 3px 0 rgba(39,33,43,.3);color:var(--deep)}
.resultActions button:active{transform:translate(2px,2px);box-shadow:inset -3px -3px #fff,inset 3px 3px #cdb7f6}
#replay{background:var(--blue);color:#0c3a52;box-shadow:inset 3px 3px #d3f4ff,inset -3px -3px #2b8fbd,3px 3px 0 rgba(39,33,43,.3)}
#save{background:var(--pink);color:#fff;box-shadow:inset 3px 3px #ffa9dc,inset -3px -3px #b02b76,3px 3px 0 rgba(39,33,43,.3)}
.notice{min-height:16px;font-size:11px;text-align:center;color:var(--deep);font-weight:bold}

.wornWrap{border:2px solid var(--ink);background:var(--cream);box-shadow:inset 2px 2px #fff}
.wornWrap summary{cursor:pointer;padding:6px 8px;font-size:12px;font-weight:bold;color:var(--deep);min-height:44px;display:flex;align-items:center}
.pieces{margin:0;padding:2px 8px 8px 24px;font-size:12px;line-height:1.6;color:var(--deep)}

/* bitmap-style glyphs for numbers/titles */
.bitmap{font-family:"Courier New",monospace;font-weight:bold;letter-spacing:1px;
  -webkit-font-smoothing:none;font-smooth:never}

/* Roomy desktop: keep it centered, don't distort */
@media (min-width:560px){
  .window{padding-left:14px;padding-right:14px}
}