/* Stack Attack — TV + phone. Builds on /tiles/tiles.css (same show look); Kita's art is in /art/stack/. */

/* ============================== TV ============================== */
.stv .tstage { background-image: url(/art/stack/stage.jpg); }
.stv .thead .ttitle img { height: 16vh; }

/* a tower of blocks, bottom to top (the art blocks have a lit top face, so each one tucks under the next) */
.stower { --bw: 8vh; display: flex; flex-direction: column-reverse; align-items: center; }
.stower img, .stower .ghost { width: var(--bw); height: calc(var(--bw) * .56); display: block; object-fit: contain; margin-top: calc(var(--bw) * -.1); filter: drop-shadow(0 .3vh .4vh rgba(0,0,0,.45)); }
.stower .ghost { border-radius: .8vh; background: linear-gradient(#6c7bb8, #3b4884); border: .3vh solid rgba(255,255,255,.35); box-sizing: border-box; height: calc(var(--bw) * .46); margin-top: calc(var(--bw) * .02); }
.stower img.drop { animation: sdrop .35s ease-out; }
@keyframes sdrop { from { transform: translateY(-4vh); opacity: 0; } }
.stower.big { --bw: 11vh; }

.starget { position: absolute; left: 1.6vw; top: 44vh; bottom: 3vh; width: 19vw; display: grid; grid-template-rows: auto 1fr; justify-items: center; padding: 1.2vh .8vw;
  border-radius: 1.6vh; background: rgba(6,12,52,.86); border: .3vh solid var(--neon); box-shadow: 0 0 2vh rgba(58,160,255,.45); }
.starget h3 { margin: 0; font: 800 2.4vh Nunito, sans-serif; letter-spacing: .04em; }
.starget .stower { align-self: end; }
.starget.flash { animation: sflash 1s ease-in-out infinite alternate; }
@keyframes sflash { to { box-shadow: 0 0 4.5vh rgba(255,207,58,.9); border-color: var(--gold); } }
.shidden { align-self: center; display: grid; justify-items: center; gap: 1vh; }
.shidden b { font: 700 16vh/1 Fredoka, sans-serif; color: var(--gold); text-shadow: 0 0 3vh rgba(255,207,58,.6); }
.shidden span { font: 900 2.4vh Nunito, sans-serif; letter-spacing: .06em; }
.stv .thow { top: 15vh; }
.stv .thow li { font-size: 1.9vh; }

/* everyone's podium: tower on top, face + name + hearts underneath */
.sstage { position: absolute; left: 22vw; right: 22vw; top: 27vh; bottom: 2vh; display: flex; align-items: flex-end; justify-content: center; gap: 1vw; flex-wrap: wrap; align-content: flex-end; }
.spod { --bw: 7vh; position: relative; display: grid; justify-items: center; align-content: end; min-width: calc(var(--bw) * 1.5); }
.spod .stower { min-height: 2vh; }
.spod .base { width: calc(var(--bw) * 1.6); margin-top: calc(var(--bw) * -.18); display: block; }
.spod .who { display: flex; align-items: center; gap: .4vw; margin-top: .3vh; padding: .2vh .7vw; border-radius: 99px; background: rgba(6,10,44,.88); font: 900 1.8vh Nunito, sans-serif; white-space: nowrap; max-width: 15vw; }
.spod .who .f { font-size: 2.4vh; }
.spod .who img.cam { width: 3.6vh; height: 3.6vh; border-radius: 50%; object-fit: cover; border: .25vh solid #fff; }
.spod .who .n { overflow: hidden; text-overflow: ellipsis; }
.spod .hearts { font-size: 1.7vh; letter-spacing: .1em; min-height: 2vh; }
.spod .lock { position: absolute; top: -3.4vh; font: 900 1.7vh Nunito, sans-serif; padding: .2vh .6vw; border-radius: 99px; background: var(--green); color: #032a10; white-space: nowrap; }
.spod .mark { position: absolute; top: 30%; font: 900 9vh/1 Nunito, sans-serif; text-shadow: 0 0 2vh #000; animation: tpopin .5s; }
.spod.right .mark { color: var(--green); }
.spod.wrong .mark { color: var(--red); }
.spod.wrong .stower { filter: saturate(.6); transform: rotate(-8deg); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.5,0,.9,.4); }
.spod.out { filter: grayscale(1) brightness(.6); }

.slist { top: 19vh; bottom: 30vh; }
.stv .thost { left: auto; right: 1.6vw; bottom: 5.4vh; width: 15vh; height: 15vh; }
.stv .thostname { left: auto; right: 1.6vw; bottom: 2.4vh; width: 16vh; }
.stv .codechip { left: auto; right: calc(1.6vw + 17vh); top: auto; bottom: 3vh; }
.sskip { position: absolute; right: 1.6vw; top: 1.4vh; z-index: 5; padding: .6vh 1.2vw; font-size: 1.8vh; }
.prow .h { margin-left: auto; font-size: 1.5vh; letter-spacing: .05em; flex: none; }
.strophy { height: 16vh; filter: drop-shadow(0 0 3vh rgba(255,207,58,.7)); animation: hop .9s ease-in-out infinite; }

/* ============================== PHONE ============================== */
body.sphone { background: #061040 url(/art/stack/stage.jpg) center top / cover no-repeat fixed; }
.sphone .plogo { width: min(200px, 56vw); }
.sphone .pclock { width: 84px; height: 84px; }
.sphone .pclock b { font-size: 28px; }
.sboard { width: 100%; max-width: 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sboard.solo { grid-template-columns: 1fr; }
.scol { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 16px; background: rgba(6,12,52,.82); border: 2px solid rgba(58,160,255,.7); min-height: 240px; }
.scol h4 { margin: 0; font: 900 13px Nunito, sans-serif; letter-spacing: .06em; }
.scol .stower { --bw: 64px; align-self: end; }
.scol.mine { border-color: var(--gold); box-shadow: 0 0 14px rgba(255,207,58,.45); }
.scol.mine .stower img { cursor: pointer; }
.scol .stand { width: 92px; height: 10px; border-radius: 6px; background: linear-gradient(#7fd0ff, #2a6fd8); box-shadow: 0 0 10px #3aa0ff; margin-top: 2px; }
.scol .hint { font-size: 11px; font-weight: 800; color: #cfe0ff; }
.scol.wob .stower { transition: transform .12s linear; transform-origin: 50% 100%; }
.scol .q { align-self: center; font: 700 64px/1 Fredoka, sans-serif; color: var(--gold); }
.stray { width: 100%; max-width: 440px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; border-radius: 16px; background: rgba(6,10,44,.85); border: 2px solid rgba(255,255,255,.25); }
.stray button { border: 0; background: rgba(255,255,255,.06); border-radius: 12px; padding: 6px 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .1s, opacity .2s; }
.stray button img { width: 100%; display: block; pointer-events: none; }
.stray button:active { transform: scale(.9); }
.stray button.used { opacity: .15; pointer-events: none; }
.slockbtn { width: 100%; max-width: 440px; padding: 14px; border: 0; border-radius: 99px; font: 700 24px Fredoka, sans-serif; letter-spacing: .04em; color: #fff; cursor: pointer;
  background: linear-gradient(#3dff7a, #0f9c3c); box-shadow: 0 6px 0 #075a22, 0 0 18px rgba(44,255,106,.6); }
.slockbtn:disabled { background: linear-gradient(#56608c, #2c3460); box-shadow: 0 6px 0 #1a1f40; color: #b8c2e6; cursor: default; }
.sphone .phearts { font-size: 16px; letter-spacing: .08em; }
.stoppled { font: 700 22px Fredoka, sans-serif; color: #fff; padding: 8px 14px; border-radius: 12px; background: var(--red); box-shadow: 0 0 16px var(--red); animation: tpop .4s; }
.smotion { padding: 10px 14px; border-radius: 99px; border: 2px solid var(--gold); background: rgba(6,10,44,.9); color: #fff; font: 800 15px Nunito, sans-serif; cursor: pointer; }
.sresult { width: 100%; max-width: 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* layout fixes after the first test (2026-10-05) */
.stv .thow .key { display: none; }
.stv .thow { padding-bottom: 1.2vh; }
.starget { top: 40vh; }
.sstage { bottom: 10vh; }
.slist { bottom: 46vh; }
.stv .codechip { left: auto; right: 1.6vw; top: 57vh; bottom: auto; width: auto; }
/* phone: while you're building, the logo steps aside so the tray and LOCK IN fit on the screen */
.sphone.busy .plogo { display: none; }
.sphone.busy .pclock { width: 64px; height: 64px; }
.sphone.busy .pclock b { font-size: 22px; }
.sphone.busy .pclock small { font-size: 7px; }
.sphone.busy .pmain { gap: 6px; }
.sphone.busy .pbanner { font-size: 20px; padding: 7px 10px; }
.scol { min-height: 150px; }
.stray { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; }
.stray button { padding: 3px 2px; }
.stv .codechip { top: 57vh; right: 1.6vw; }
.sphone.busy .preact { display: none; }
.sphone.busy .pmain { padding-bottom: 16px; }
.stv .codechip > span:nth-child(2) { display: none; }
.stv .thost { bottom: 10vh; }
.stv .thostname { bottom: 7vh; }

/* the TV's Restart + Skip buttons, top right */
.sctl { position: absolute; right: 1.6vw; top: 1.4vh; z-index: 7; display: flex; gap: .6vw; }
.sctl .btn { padding: .6vh 1.2vw; font-size: 1.8vh; }

/* where to look right now: the TV, your phone, or memorize (Kita 2026-10-05) */
.scue { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 440px; padding: 10px 12px; border-radius: 14px;
  font: 700 19px/1.15 Fredoka, sans-serif; letter-spacing: .02em; text-align: center; animation: tpop .35s; }
.scue.tv { background: #2a3a8c; border: 3px solid #9fc4ff; box-shadow: 0 0 16px rgba(120,170,255,.7); }
.scue.phone { background: linear-gradient(#17c04f, #0b7a30); border: 3px solid #b6ffcb; box-shadow: 0 0 20px rgba(44,255,106,.8); animation: tpop .35s, spulse 1s ease-in-out infinite alternate; }
.scue.mem { background: linear-gradient(#ffb21a, #e06a00); border: 3px solid #ffe8a8; color: #fff; box-shadow: 0 0 20px rgba(255,190,40,.8); }
.scue.over { background: linear-gradient(#b31a2c, #6d0b17); border: 3px solid #ffb3bb; }
.scue b { font: 700 44px/1 Fredoka, sans-serif; }
@keyframes spulse { to { transform: scale(1.04); box-shadow: 0 0 30px rgba(44,255,106,1); } }
.tvcue { max-width: none; width: auto; padding: .9vh 2vw; border-radius: 1.4vh; font-size: 2.8vh; white-space: nowrap; }
.tvcue b { font-size: 4vh; }
.sbig { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 6; font: 700 34vh/1 Fredoka, sans-serif; color: var(--gold);
  text-shadow: 0 0 6vh rgba(255,190,40,.9), 0 1vh 0 #6a3a00; pointer-events: none; }
.sbig.pop { animation: sbigpop .6s ease-out; }
@keyframes sbigpop { from { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
.sboard.solo .scol { min-height: 280px; }
.sbig.gone { top: 56%; font-size: 13vh; white-space: nowrap; padding: 1vh 3vw; border-radius: 3vh; background: rgba(6,10,44,.85); border: .5vh solid var(--gold); box-shadow: 0 0 4vh rgba(255,190,40,.6); }

/* towers on the pillars in the background picture (Kita 2026-10-05) */
.sstage { left: 0; right: 0; top: 0; bottom: 0; display: block; pointer-events: none; }
.sstage .spod { position: absolute; transform: translateX(-50%); display: block; min-width: 0; }
.sstage .spod .lock { top: auto; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: .6vh; }
.sstage .spod .mark { top: auto; bottom: 20%; left: 50%; transform: translateX(-50%); }
.plabel { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .3vh; text-align: center; z-index: 2; }
.plabel .who { display: flex; align-items: center; justify-content: center; gap: .4vw; max-width: 100%; padding: .3vh .5vw; border-radius: 99px; background: rgba(6,10,44,.9);
  font: 900 1.9vh Nunito, sans-serif; white-space: nowrap; box-shadow: 0 0 1vh rgba(58,160,255,.6); }
.plabel .f { font-size: 2.6vh; } .plabel img.cam { width: 3.6vh; height: 3.6vh; border-radius: 50%; object-fit: cover; border: .25vh solid #fff; }
.plabel .n { overflow: hidden; text-overflow: ellipsis; }
.plabel .hearts { font-size: 1.8vh; letter-spacing: .08em; font-weight: 900; color: #ffb3bb; }
.plabel.small .who { font-size: 1.4vh; padding: .2vh .4vw; } .plabel.small .f { font-size: 1.8vh; } .plabel.small .hearts { font-size: 1.2vh; }
.plabel.out, .sstage .spod.out { filter: grayscale(1) brightness(.6); }
.stbig { position: absolute; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 0 3vh rgba(255,207,58,.55)); animation: tpopin .5s; }
.sstrip { display: flex; align-items: center; gap: .5vw; padding: .6vh 1.2vw; border-radius: 1.2vh; background: rgba(6,10,44,.9); border: .3vh solid var(--gold); font: 900 2vh Nunito, sans-serif; white-space: nowrap; }
.sstrip img { height: 4.4vh; }
.sstrip b { display: grid; place-items: center; width: 4.4vh; height: 3.6vh; border-radius: .7vh; background: #3b4884; color: var(--gold); font: 700 2.6vh Fredoka, sans-serif; }
/* during the game the side panels step aside so all six pillars show */
.stv .starget { display: none; }
.stv.playing .thow, .stv.playing .slist { display: none; }
.stv.playing .codechip { left: 1.6vw; right: auto; top: 15vh; }
.stv .thost { right: 1.6vw; bottom: 8vh; width: 12vh; height: 12vh; }
.stv .thostname { right: 1.6vw; bottom: 6vh; width: 13vh; font-size: 1.3vh; }
.sbig.gone { left: 16vw; top: 46vh; font-size: 9vh; }

/* the crowd wall for big groups (13-50 players) */
.scrowd { position: absolute; left: 1.6vw; right: 16vh; bottom: 1.5vh; z-index: 3; display: flex; flex-wrap: wrap-reverse; gap: .5vh .4vw; justify-content: center; max-height: 22vh; overflow: hidden; }
.cchip { display: flex; align-items: center; gap: .3vw; padding: .3vh .5vw; border-radius: 99px; background: rgba(6,10,44,.92); border: .2vh solid rgba(120,170,255,.6);
  font: 900 1.5vh Nunito, sans-serif; white-space: nowrap; max-width: 11vw; }
.cchip .f { font-size: 1.9vh; } .cchip .n { overflow: hidden; text-overflow: ellipsis; } .cchip .st { margin-left: .2vw; font-size: 1.3vh; }
.cchip.locked { border-color: var(--green); } .cchip.right { border-color: var(--green); background: rgba(10,120,50,.9); }
.cchip.wrong { border-color: var(--red); background: rgba(150,10,30,.9); } .cchip.out { opacity: .45; filter: grayscale(1); }
.sbig.gone { left: 19vw; font-size: 7.5vh; padding: .8vh 2vw; }
.scrowd { left: 10vw; right: 15vh; gap: .4vh .3vw; }
.cchip { font-size: 1.3vh; max-width: 9vw; padding: .25vh .4vw; } .cchip .f { font-size: 1.6vh; }
.stv .thead { z-index: 4; }
.plabel.small .who { flex-direction: column; gap: 0; border-radius: 1vh; padding: .3vh .2vw; width: 100%; box-sizing: border-box; }
.plabel.small .n { max-width: 100%; font-size: 1.2vh; }