/* 🎨 Activity – Handy & TV */
.center { text-align: center; } .small { font-size: 13px; }
.boot { min-height: 70vh; display: grid; place-items: center; font-size: 60px; animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-6deg); } }

/* ================= HANDY ================= */
body.phone { min-height: 100dvh; overscroll-behavior: none; }
.ph-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); background: color-mix(in srgb, var(--bg) 80%, transparent); }
.ph-back { color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 15px; width: 80px; } .ph-title { font-weight: 800; font-size: 17px; }
#meBtn { width: 80px; display: flex; justify-content: flex-end; } .me-chip { border: 0; background: none; padding: 0; cursor: pointer; }
body.phone main { max-width: 560px; margin: 0 auto; padding: 6px 16px calc(30px + env(safe-area-inset-bottom)); }
.view { animation: up .45s var(--ease) both; }
.lb-hero { text-align: center; padding: 10px 0 6px; } .lb-emoji { font-size: 64px; animation: bob 3s ease-in-out infinite; } .lb-hero h1 { margin: 4px 0; font-size: 40px; font-weight: 900; font-style: italic; letter-spacing: -.04em; } .lb-hero p { margin: 0; font-size: 15px; }
.teams { display: grid; gap: 12px; margin: 18px 0 12px; }
.team-card { position: relative; background: var(--card); border-radius: 24px; padding: 16px; box-shadow: var(--shadow); border: 2px solid transparent; transition: border-color .3s, transform .3s var(--ease); animation: up .5s var(--d) var(--ease) both; overflow: hidden; }
.team-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.team-card.mine { border-color: var(--c); box-shadow: 0 10px 30px color-mix(in srgb, var(--c) 30%, transparent); }
.tc-head { display: flex; align-items: baseline; justify-content: space-between; padding-left: 6px; } .tc-head b { font-size: 19px; color: var(--c); } .tc-head small { color: var(--text-2); }
.tc-players { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; padding-left: 6px; min-height: 64px; }
.tc-p { display: grid; justify-items: center; gap: 4px; animation: pop .45s var(--spring) both; } .tc-p small { font-size: 12px; font-weight: 600; } .tc-empty { color: var(--text-3); font-size: 14px; align-self: center; }
.tc-btn { width: 100%; background: color-mix(in srgb, var(--c) 14%, var(--card)); color: var(--c); } .tc-btn.on { background: var(--fill); color: var(--text-2); }
.lb-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; } .lb-row .btn { padding: 10px 16px; font-size: 14px; }
.big-btn { font-size: 19px; padding: 18px; border-radius: 20px; }
.turn-head { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow); border-left: 5px solid var(--c); margin: 8px 0 14px; }
.turn-head div { flex: 1; display: grid; } .turn-head small { color: var(--text-2); font-size: 12px; } .cat-chip { font-size: 13px; font-weight: 700; background: var(--fill); padding: 6px 10px; border-radius: 99px; white-space: nowrap; }
.wait-big { text-align: center; padding: 30px 10px; } .wait-big h2 { margin: 10px 0 6px; font-size: 28px; letter-spacing: -.02em; } .wait-big p { font-size: 16px; line-height: 1.4; }
.wb-emoji { font-size: 84px; } .wb-emoji.spin { animation: wobble 1.4s ease-in-out infinite; } .wb-emoji.bounce { animation: bob 1s ease-in-out infinite; }
@keyframes wobble { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.your-turn { text-align: center; padding: 10px 0; }
.yt-k { font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: -.03em; background: linear-gradient(90deg, var(--orange), var(--pink), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: pop .6s var(--spring) both; }
.yt-cat { display: grid; justify-items: center; margin: 14px 0 6px; animation: pop .6s .1s var(--spring) both; } .yt-cat span { font-size: 70px; } .yt-cat b { font-size: 22px; } .yt-cat small { color: var(--orange); font-weight: 700; margin-top: 4px; }
.pts { display: grid; gap: 10px; margin-top: 14px; }
.pt { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; text-align: left; align-items: center; column-gap: 12px; border: 0; border-radius: 20px; padding: 14px 16px; background: var(--card); box-shadow: var(--shadow); cursor: pointer; animation: up .45s var(--d) var(--ease) both; transition: transform .2s var(--ease); }
.pt:active { transform: scale(.96); } .pt b { grid-row: 1 / 3; font-size: 40px; font-weight: 900; text-align: center; } .pt span { font-weight: 700; font-size: 17px; } .pt small { color: var(--text-2); }
.word-wrap { perspective: 1000px; margin: 20px 0; }
.word-card { border-radius: 28px; background: linear-gradient(135deg, #1c1c1e, #3a3a3c); color: #fff; padding: 34px 22px; text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,.25); animation: flipIn .8s var(--spring) both; }
@keyframes flipIn { from { transform: rotateY(90deg) scale(.8); opacity: 0; } }
.wc-front small { opacity: .7; font-weight: 600; } .wc-word { font-size: clamp(34px, 10vw, 52px); font-weight: 900; letter-spacing: -.03em; margin: 14px 0; line-height: 1.05; } .wc-hint { display: block; font-size: 13px; }
.ready-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; } .go-btn { font-size: 20px; }
.timer { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; } .tm-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.tm-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), var(--yellow)); border-radius: 5px; transition: width .2s linear; }
.timer b { font-size: 22px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; } .timer.hot b { color: var(--red); animation: pulse .5s ease-in-out infinite alternate; } .timer.hot .tm-bar span { background: var(--red); }
@keyframes pulse { to { transform: scale(1.15); } }
.act-card { text-align: center; background: var(--card); border-radius: 28px; padding: 30px 20px; box-shadow: var(--shadow); margin-bottom: 14px; } .ac-word { font-size: clamp(34px, 10vw, 50px); font-weight: 900; letter-spacing: -.03em; margin: 10px 0; }
.play-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 12px; }
.btn.ok { background: var(--green); color: #fff; font-size: 19px; padding: 18px; } .btn.fail { background: var(--fill); color: var(--red); }
.draw-word { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .draw-word small { color: var(--text-2); } .draw-word b { font-size: 20px; }
.pad-wrap { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px var(--sep); aspect-ratio: 3 / 4; max-height: 56dvh; margin: 0 auto; touch-action: none; }
#pad { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.tools { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--card); background: var(--c); box-shadow: 0 0 0 1px var(--sep); cursor: pointer; transition: transform .2s var(--spring); }
.sw.on { transform: scale(1.2); box-shadow: 0 0 0 2px var(--ink); } .sw.eraser { background: var(--fill); font-size: 14px; }
.sz, .tool { width: 42px; height: 38px; border-radius: 12px; border: 0; background: var(--fill); cursor: pointer; display: grid; place-items: center; font-size: 17px; }
.sz i { width: var(--s); height: var(--s); border-radius: 50%; background: var(--text); } .sz.on { background: var(--ink); } .sz.on i { background: var(--paper); }
.result { text-align: center; padding: 26px 0 10px; } .rs-icon { font-size: 90px; animation: pop .7s var(--spring) both; } .result h1 { margin: 6px 0; font-size: 36px; letter-spacing: -.03em; }
.result.ok h1 { color: var(--green); } .result.bad h1 { color: var(--text-2); }
.rs-word { font-size: 26px; font-weight: 800; animation: up .6s .2s var(--ease) both; } .rs-pts { display: inline-block; margin-top: 10px; background: var(--green); color: #fff; font-weight: 800; padding: 8px 16px; border-radius: 99px; animation: pop .6s .35s var(--spring) both; }
.result.fin h1 { color: var(--c); } .fin-avs { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.scores { display: grid; gap: 8px; margin: 18px 0; } .sc-row { display: grid; grid-template-columns: 14px 110px 1fr 46px; align-items: center; gap: 8px; background: var(--card); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); }
.sc-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); } .sc-row b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-row small { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sc-bar { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; } .sc-bar span { display: block; height: 100%; background: var(--c); border-radius: 4px; transition: width 1s var(--ease); }
.host-bar { text-align: center; } .team-btn { background: var(--c); color: #fff; }
.t-pill { background: var(--c); color: #fff; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; }

/* ================= TV ================= */
html.tv, body.tvb { background: #050507; color: #fff; overflow: hidden; height: 100%; }
body.tvb { --text: #f5f5f7; --text-2: #a1a1a6; --card: #1c1c1e; cursor: none; }
.tv-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; } .tv-bg i { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(120px); opacity: .28; animation: drift 18s ease-in-out infinite alternate; }
.tv-bg i:nth-child(1) { background: #ff9f0a; left: -20vw; top: -25vw; } .tv-bg i:nth-child(2) { background: #5e5ce6; right: -20vw; top: 10vh; animation-delay: -6s; } .tv-bg i:nth-child(3) { background: #ff375f; left: 20vw; bottom: -35vw; animation-delay: -12s; }
@keyframes drift { to { transform: translate(8vw, 6vh) scale(1.15); } }
.tv-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 2.2vh 3vw 0; height: 9vh; }
.tv-logo { height: 5.2vh; } .tv-title { font-size: 3.4vh; font-weight: 900; font-style: italic; letter-spacing: -.03em; }
.tv-chips { margin-left: auto; display: flex; gap: 12px; }
.chip-team { display: flex; align-items: center; gap: 10px; padding: 1vh 1.6vh; border-radius: 99px; background: rgba(255,255,255,.08); backdrop-filter: blur(20px); font-size: 2vh; transition: all .4s var(--ease); border: 2px solid transparent; }
.chip-team.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 25%, transparent); transform: scale(1.06); }
.ct-dot { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: var(--c); } .chip-team small { font-weight: 800; font-size: 2.2vh; font-variant-numeric: tabular-nums; }
.tv-main { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3vw; padding: 2vh 3vw 4vh; height: 91vh; }
.board { display: grid; align-content: center; gap: 2vh; min-height: 0; }
.grid { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 1vh; aspect-ratio: 8 / 4.4; transition: opacity .5s, filter .5s; }
.grid.dim { opacity: .55; filter: saturate(.7); }
.field { position: relative; display: grid; place-items: center; border-radius: 1.6vh; background: color-mix(in srgb, var(--c) 22%, #111); border: 2px solid color-mix(in srgb, var(--c) 55%, transparent); font-size: 3.2vh; animation: pop .5s var(--d) var(--spring) both; }
.field small { position: absolute; left: .8vh; top: .5vh; font-size: 1.3vh; opacity: .5; font-weight: 700; }
.field .all { position: absolute; right: .5vh; top: .3vh; font-style: normal; font-size: 1.8vh; }
.f-start span { font-size: 1.8vh; font-weight: 800; text-transform: uppercase; } .f-goal { background: linear-gradient(135deg, #ffd60a, #ff9f0a); border-color: #ffd60a; box-shadow: 0 0 30px rgba(255,214,10,.4); }
.pawns { position: absolute; inset: 0; pointer-events: none; }
.pawn { position: absolute; width: 4.4vh; height: 4.4vh; margin: -2.2vh 0 0 -2.2vh; border-radius: 50%; background: var(--c); border: .4vh solid #fff; display: grid; place-items: center; font-weight: 900; font-size: 2vh; box-shadow: 0 1vh 2vh rgba(0,0,0,.5); transition: left 1.2s var(--spring), top 1.2s var(--spring); z-index: 2; }
.pawn.active { animation: hop 1s ease-in-out infinite; z-index: 3; box-shadow: 0 0 0 .6vh color-mix(in srgb, var(--c) 40%, transparent), 0 1vh 2vh rgba(0,0,0,.5); }
@keyframes hop { 50% { transform: translateY(-1.2vh); } }
.legend { display: flex; gap: 2vw; justify-content: center; font-size: 1.8vh; color: #a1a1a6; } .legend span { display: flex; align-items: center; gap: 8px; } .legend i { width: 1.4vh; height: 1.4vh; border-radius: .4vh; background: var(--c); }
.stage { display: grid; align-content: center; gap: 2.4vh; min-height: 0; position: relative; }
.st-head { display: flex; align-items: center; gap: 1.6vh; padding: 1.4vh 2vh; border-radius: 2.4vh; background: rgba(255,255,255,.07); border-left: .7vh solid var(--c); animation: up .5s var(--ease) both; }
.st-head .av { width: 6vh; height: 6vh; } .st-head div { flex: 1; display: grid; } .st-head small { color: var(--c); font-weight: 700; font-size: 1.7vh; } .st-head b { font-size: 3vh; }
.st-cat { font-size: 2vh; font-weight: 700; background: rgba(255,255,255,.1); padding: 1vh 1.6vh; border-radius: 99px; }
.turn-card { text-align: center; display: grid; justify-items: center; gap: 1.4vh; padding: 4vh; border-radius: 4vh; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--c) 45%, transparent), rgba(255,255,255,.04) 70%); border: 2px solid color-mix(in srgb, var(--c) 50%, transparent); animation: cardIn .8s var(--spring) both; }
@keyframes cardIn { from { opacity: 0; transform: scale(.85) translateY(4vh); } }
.turn-card .av-xxl { width: 20vh; height: 20vh; font-size: 8vh; box-shadow: 0 0 0 .8vh var(--c), 0 3vh 6vh rgba(0,0,0,.5); animation: pop .7s .1s var(--spring) both; }
.turn-card h2 { margin: 0; font-size: 6vh; letter-spacing: -.03em; } .turn-card p { margin: 0; font-size: 2.4vh; color: #d1d1d6; } .tc-k { font-size: 1.8vh; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--c); }
.tc-cat { display: flex; align-items: center; gap: 1vh; font-size: 3vh; font-weight: 800; background: rgba(255,255,255,.1); padding: 1.2vh 2.4vh; border-radius: 99px; } .tc-cat span { font-size: 4vh; }
.pulse-txt { font-size: 2vh; color: #a1a1a6; animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 50% { opacity: .35; } }
.shh { font-size: 8vh; animation: wobble 1.4s ease-in-out infinite; }
.canvas-wrap { justify-self: center; height: 58vh; aspect-ratio: 3 / 4; background: #fff; border-radius: 2.6vh; overflow: hidden; box-shadow: 0 3vh 8vh rgba(0,0,0,.5); animation: cardIn .6s var(--spring) both; }
#cv { width: 100%; height: 100%; display: block; }
.big-cat { text-align: center; display: grid; justify-items: center; gap: 1vh; } .big-cat span { font-size: 22vh; animation: bob 2s ease-in-out infinite; } .big-cat b { font-size: 4.4vh; } .big-cat small { font-size: 2.4vh; color: #a1a1a6; }
.ring-wrap { position: absolute; right: 0; bottom: 0; width: 13vh; height: 13vh; display: grid; place-items: center; } .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.r-bg { fill: rgba(0,0,0,.4); stroke: rgba(255,255,255,.12); stroke-width: 8; } .r-fg { fill: none; stroke: #30d158; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .2s linear, stroke .3s; }
.ring-wrap b { position: relative; font-size: 4.6vh; font-variant-numeric: tabular-nums; } .ring-wrap.hot .r-fg { stroke: #ff453a; } .ring-wrap.hot b { color: #ff453a; animation: pulse .5s ease-in-out infinite alternate; }
/* Lobby */
.lobby-hero { text-align: center; display: grid; justify-items: center; gap: 1.4vh; }
.lh-emojis { display: flex; gap: 3vh; font-size: 9vh; } .lh-emojis span { animation: bob 2.4s ease-in-out infinite; } .lh-emojis span:nth-child(2) { animation-delay: -.8s; } .lh-emojis span:nth-child(3) { animation-delay: -1.6s; }
.lobby-hero h1 { margin: 0; font-size: 13vh; font-weight: 900; font-style: italic; letter-spacing: -.05em; line-height: 1; background: linear-gradient(90deg, #ff9f0a, #ff375f, #bf5af2, #0a84ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite; }
@keyframes shimmer { to { background-position: -300% 0; } }
.lobby-hero > p { margin: 0; font-size: 2.6vh; color: #a1a1a6; letter-spacing: .1em; }
.join { display: flex; align-items: center; gap: 2.4vh; margin-top: 3vh; padding: 2vh; border-radius: 3vh; background: rgba(255,255,255,.07); text-align: left; }
.qr { width: 18vh; height: 18vh; padding: 1.2vh; background: #fff; border-radius: 2vh; } .qr svg { width: 100%; height: 100%; display: block; }
.join div { display: grid; gap: .6vh; } .join small { color: #a1a1a6; font-size: 1.8vh; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; } .join b { font-size: 3.4vh; } .join span { color: #a1a1a6; font-size: 1.9vh; }
.lobby-teams { display: grid; gap: 2vh; } .lt { padding: 2vh 2.4vh; border-radius: 3vh; background: rgba(255,255,255,.06); border-left: .8vh solid var(--c); animation: up .6s var(--d) var(--ease) both; }
.lt-h { font-size: 3.2vh; font-weight: 800; color: var(--c); margin-bottom: 1.4vh; } .lt-ps { display: flex; flex-wrap: wrap; gap: 2vh; min-height: 9vh; align-items: center; }
.lt-p { display: grid; justify-items: center; gap: .6vh; animation: pop .6s var(--d) var(--spring) both; } .lt-p .av { width: 8vh; height: 8vh; font-size: 3.4vh; } .lt-p span { font-size: 1.8vh; font-weight: 600; } .lt-empty { color: #6e6e73; font-size: 2vh; }
.lobby-hint { text-align: center; color: #a1a1a6; font-size: 2.2vh; margin: 0; animation: blink 2s ease-in-out infinite; }
/* Overlays */
#overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.ov { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); backdrop-filter: blur(14px); animation: fade .4s both; }
.ov-card { text-align: center; display: grid; justify-items: center; gap: 1.4vh; animation: cardIn .8s var(--spring) both; }
.ov-icon { font-size: 16vh; animation: pop .8s .1s var(--spring) both; } .ov-k { font-size: 3vh; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a1a1a6; }
.ov.ok .ov-k { color: #30d158; } .ov-word { font-size: 10vh; font-weight: 900; letter-spacing: -.04em; line-height: 1; max-width: 90vw; }
.ov-pts { font-size: 4vh; font-weight: 900; background: #30d158; padding: 1vh 3vh; border-radius: 99px; animation: pop .7s .4s var(--spring) both; }
.ov.win .ov-word { color: var(--c); } .ov-avs { display: flex; gap: 2vh; margin-top: 2vh; } .ov-avs span { animation: pop .7s var(--d) var(--spring) both; } .ov-avs .av { width: 14vh; height: 14vh; font-size: 6vh; box-shadow: 0 0 0 .6vh var(--c); }
.confetti { position: absolute; inset: 0; overflow: hidden; } .confetti i { position: absolute; top: -4vh; width: 1.2vh; height: 2.4vh; border-radius: .3vh; background: var(--c); animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.tv-fs { position: fixed; right: 2vh; bottom: 2vh; z-index: 60; border: 0; background: rgba(255,255,255,.1); color: #fff; width: 5vh; height: 5vh; border-radius: 1.4vh; font-size: 2.4vh; cursor: pointer; opacity: .3; }
.tv-fs:hover { opacity: 1; } body.tvb:hover { cursor: default; }
body.tvb[data-phase="lobby"] .tv-main { grid-template-columns: 1fr 1fr; }

/* ---------- Galerie ---------- */
.gal-btn { background: linear-gradient(135deg, #ff9f0a, #ff375f); color: #fff; margin-bottom: 10px; }
.gal-head { text-align: center; padding: 6px 0 4px; } .gal-head h1 { margin: 4px 0; font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: -.03em; } .gal-head p { margin: 0; }
.gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; }
@media (min-width: 700px) { .galpage main { max-width: 1100px; } .galpage .gal-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.gal-item { position: relative; display: grid; gap: 4px; padding: 8px 8px 10px; border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); text-align: left; cursor: pointer; animation: up .5s var(--d) var(--ease) both; transition: transform .25s var(--spring), box-shadow .25s; }
.gal-item canvas { width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--sep); display: block; }
.gal-item.on { box-shadow: 0 0 0 3px var(--pink), 0 12px 30px rgba(255,55,95,.3); transform: scale(1.02); } .gal-item:disabled { opacity: .55; }
.gal-item.award { box-shadow: 0 0 0 3px var(--yellow), var(--shadow); }
.gi-word { font-weight: 800; font-size: 15px; } .gi-by { color: var(--text-2); font-size: 12px; }
.gi-heart { position: absolute; top: 14px; right: 14px; font-size: 22px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); transition: transform .3s var(--spring); } .gal-item.on .gi-heart { transform: scale(1.25); }
.gal-win { width: min(320px, 80vw); margin: 10px auto; } .gal-win canvas { width: 100%; aspect-ratio: 3 / 4; border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); display: block; }
.gp-day { margin: 26px 0 0; font-size: 18px; }
/* TV */
.ov.gal { background: rgba(5,5,7,.92); }
.gal-tv { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5vw; align-items: center; width: 92vw; height: 86vh; }
.gs { display: grid; justify-items: center; gap: 1.6vh; } .gs-k { font-size: 2vh; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: #a1a1a6; }
.gs-frame { height: 62vh; aspect-ratio: 3 / 4; padding: 1.4vh; background: #fff; border-radius: 1vh; box-shadow: 0 0 0 1.4vh #2c2c2e, 0 4vh 10vh rgba(0,0,0,.7); animation: frameIn .9s var(--spring) both; }
@keyframes frameIn { from { opacity: 0; transform: rotate(-4deg) scale(.85); } }
.gs-frame canvas, .gw-frame canvas, .gt-i canvas { width: 100%; height: 100%; display: block; }
.gs-word { font-size: 5vh; font-weight: 900; letter-spacing: -.02em; } .gs-by { display: flex; align-items: center; gap: 1.2vh; font-size: 2.6vh; color: #d1d1d6; }
.gt h2 { margin: 0; font-size: 4.4vh; } .gt p { margin: .6vh 0 2vh; color: #a1a1a6; font-size: 2.2vh; }
.gt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4vh; }
.gt-i { position: relative; aspect-ratio: 3 / 4; background: #fff; border-radius: 1vh; overflow: hidden; opacity: .55; transition: all .4s var(--ease); } .gt-i.on { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 .5vh #ff9f0a; }
.gt-i span { position: absolute; right: .6vh; bottom: .6vh; background: rgba(0,0,0,.7); color: #fff; border-radius: 99px; padding: .3vh .9vh; font-size: 1.6vh; font-weight: 800; animation: pop .5s var(--spring); }
.gw { display: grid; justify-items: center; gap: 2vh; animation: cardIn .9s var(--spring) both; } .gw-k { font-size: 3vh; font-weight: 800; color: #ffd60a; letter-spacing: .1em; text-transform: uppercase; }
.gw-frame { height: 58vh; aspect-ratio: 3 / 4; padding: 1.6vh; background: #fff; border-radius: 1vh; box-shadow: 0 0 0 1.6vh #ffd60a, 0 0 12vh rgba(255,214,10,.5); }
.gw-word { font-size: 6vh; font-weight: 900; } .gw-by { display: flex; align-items: center; gap: 1.4vh; font-size: 3vh; } .gw-by span { color: #a1a1a6; font-size: 2.2vh; }
.tv-home { position: fixed; left: 2vh; bottom: 2vh; z-index: 60; padding: 1vh 1.8vh; border-radius: 99px; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; font-size: 1.8vh; font-weight: 700; opacity: .25; transition: opacity .3s; } .tv-home:hover { opacity: 1; }