@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap");

:root {
  --bg1: #2a1060; --bg2: #6a1b9a; --ink: #fff; --muted: #d9c8ff;
  --card: rgba(255, 255, 255, 0.12); --line: rgba(255, 255, 255, 0.22);
  --c0: #ff5d73; --c1: #3fa9f5; --c2: #f5b324; --c3: #22c493;
  --gold: #ffd54a;
  font-family: Fredoka, ui-rounded, "Segoe UI", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 20% 10%, #8e2bb8 0, transparent 45%), radial-gradient(circle at 85% 90%, #c2185b 0, transparent 40%), linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button:disabled { opacity: 0.45; cursor: default; }
.btn { white-space: nowrap; background: var(--gold); color: #3a1a00; font-weight: 700; border-radius: 999px; padding: 0.6em 1.6em; box-shadow: 0 0.25em 0 #b8860b; transition: transform 0.1s; }
.btn:active:not(:disabled) { transform: translateY(0.15em); box-shadow: 0 0.1em 0 #b8860b; }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: none; }
.muted { color: var(--muted); }
.c0 { --c: var(--c0); } .c1 { --c: var(--c1); } .c2 { --c: var(--c2); } .c3 { --c: var(--c3); }

.banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10; text-align: center; padding: 0.4em; background: #e53950; font-weight: 600; transform: translateY(-100%); transition: transform 0.3s; }
.banner.show { transform: none; }

.confetti { position: fixed; top: -2vh; width: 0.7rem; height: 1.1rem; border-radius: 2px; z-index: 20; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes bob { 50% { transform: translateY(-0.15em) rotate(-4deg); } }
.pop { animation: pop 0.4s ease-out both; }

/* ---------- phone ---------- */
.phone { height: 100dvh; display: flex; flex-direction: column; padding: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); gap: 0.8rem; }
.phone .top { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; }
.phone .top button { background: var(--card); border-radius: 999px; padding: 0.3em 0.8em; }
.phone .center { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1rem; }
.phone h1 { font-size: 2rem; margin: 0; line-height: 1.1; }
.phone h2 { font-size: 1.35rem; margin: 0; line-height: 1.2; text-align: center; }
.phone .big { font-size: 5rem; line-height: 1; }
.phone .big.bob { animation: bob 1.6s ease-in-out infinite; }
.phone form { display: flex; flex-direction: column; gap: 0.8rem; width: 100%; max-width: 22rem; }
.phone input { font: inherit; font-size: 1.4rem; padding: 0.6em 0.8em; border-radius: 1rem; border: 3px solid transparent; text-align: center; outline: none; }
.phone input:focus { border-color: var(--gold); }
.phone form .btn { font-size: 1.4rem; }
.answers { flex: 1; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 0.7rem; min-height: 0; }
.answer { background: var(--c); border-radius: 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; padding: 0.5em; font-size: 1.15rem; font-weight: 600; line-height: 1.1; box-shadow: 0 0.3rem 0 rgba(0, 0, 0, 0.25); transition: transform 0.15s, opacity 0.2s, filter 0.2s; position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.answer .emoji { font-size: 2.8rem; text-shadow: none; }
.answer .shape { position: absolute; top: 0.4rem; left: 0.6rem; font-size: 0.9rem; opacity: 0.8; }
.answer:active { transform: scale(0.96); }
.answers.chosen .answer:not(.mine) { opacity: 0.35; filter: saturate(0.4); }
.answer.mine { outline: 5px solid #fff; transform: scale(1.02); }
.answer.mine::after { content: "✓"; position: absolute; top: 0.3rem; right: 0.6rem; font-size: 1.4rem; }
.hint { text-align: center; min-height: 1.4em; }
.result { border-radius: 1.5rem; padding: 1.5rem; background: var(--card); width: 100%; }
.result.good { background: linear-gradient(160deg, #22c493, #12895f); }
.result.bad { background: linear-gradient(160deg, #6c4fa8, #4a2f80); }
.pill { display: inline-flex; gap: 0.4em; align-items: center; background: var(--card); padding: 0.3em 0.9em; border-radius: 999px; }

/* ---------- tv ---------- */
.tv { height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; padding: 2.5vh 3vw; gap: 2vh; font-size: 1.6vh; }
.tv header { display: flex; align-items: center; gap: 1.5vw; }
.tv header h1 { margin: 0; font-size: 4.2vh; flex: 1; }
.tv header .tools button { background: var(--card); border-radius: 999px; font-size: 2.4vh; width: 5.5vh; height: 5.5vh; margin-left: 0.6vw; }
.progress { height: 1.2vh; background: var(--card); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--gold); border-radius: 999px; transform-origin: left; transition: transform 0.5s; }
.tv main { min-height: 0; display: flex; flex-direction: column; gap: 2.5vh; }
.tv footer { display: flex; align-items: center; gap: 2vw; font-size: 2.4vh; min-height: 8vh; }
.tv footer .btn { font-size: 3vh; margin-left: auto; }
.tv footer .chips { flex: 1; min-width: 0; max-height: 9vh; overflow: hidden; }
.tv footer kbd { font: inherit; font-size: 0.7em; opacity: 0.7; margin-left: 0.4em; }

.lobby { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 4vw; align-items: center; min-height: 0; }
.qr { background: #fff; border-radius: 2.5vh; padding: 2vh; text-align: center; color: #2a1060; box-shadow: 0 2vh 6vh rgba(0, 0, 0, 0.35); }
.qr img, .qr svg { width: 44vh; height: 44vh; display: block; }
.qr b { display: block; font-size: 3.2vh; margin-top: 1vh; }
.qr small { font-size: 2.1vh; }
.lobby h2 { font-size: 4vh; margin: 0 0 2vh; }
.chips { display: flex; flex-wrap: wrap; gap: 1vh; align-content: flex-start; }
.chip { background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 0.6vh 1.4vh; font-size: 2.6vh; display: inline-flex; align-items: center; gap: 0.6vh; }
.chip.off { opacity: 0.4; }
.chip.star { background: linear-gradient(135deg, #ffd54a, #ff9f43); color: #3a1a00; border-color: #fff; font-weight: 700; }
.chip .x { background: none; padding: 0 0.3vh; opacity: 0.55; font-size: 2.2vh; }
.chip .x:hover { opacity: 1; }
.chip button.name { background: none; padding: 0; }
.chip.done { border-color: var(--c3); }
.chip small { opacity: 0.8; }
.chips.small .chip { font-size: 2vh; padding: 0.4vh 1.1vh; }

.subtitle { text-align: center; font-size: 3.4vh; margin: -1vh 0 0; }
.question { font-size: 5.5vh; text-align: center; margin: 0; line-height: 1.15; text-wrap: balance; }
.tiles { flex: 1; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 2vh; min-height: 0; }
.tile { background: var(--c); border-radius: 2.5vh; display: flex; align-items: center; gap: 2vw; padding: 2vh 2.5vw; position: relative; box-shadow: 0 0.8vh 0 rgba(0, 0, 0, 0.25); transition: opacity 0.4s, transform 0.4s, filter 0.4s; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); min-height: 0; overflow: hidden; }
.tile .emoji { font-size: 10vh; text-shadow: none; }
.tile .label { font-size: 4.6vh; font-weight: 700; line-height: 1.05; }
.tile .shape { position: absolute; top: 1.2vh; right: 1.6vh; font-size: 2.6vh; opacity: 0.7; }
.tile .who { margin-top: 1vh; }
.tile .who .chip { background: rgba(0, 0, 0, 0.2); border-color: transparent; font-size: 2vh; padding: 0.3vh 1vh; }
.tiles.open .tile:not(.right) { opacity: 0.4; filter: saturate(0.3); transform: scale(0.97); }
.tile.right { outline: 0.8vh solid #fff; animation: pop 0.6s ease-out both; }
.tile.right::before { content: "👑 Hira koos dit!"; position: absolute; bottom: 1.5vh; right: 2vh; background: #fff; color: #3a1a00; font-weight: 700; padding: 0.5vh 1.5vh; border-radius: 999px; font-size: 2.4vh; text-shadow: none; }

.reveal-wrap { flex: 1; display: grid; grid-template-columns: 1fr 34vh; gap: 2vw; min-height: 0; }
.board { background: var(--card); border-radius: 2.5vh; padding: 2vh; overflow: hidden; display: flex; flex-direction: column; gap: 0.8vh; }
.board h3 { margin: 0 0 0.5vh; font-size: 2.8vh; }
.row { display: grid; grid-template-columns: 3.5vh 1fr auto auto; gap: 1vh; align-items: center; font-size: 2.3vh; padding: 0.4vh 0.8vh; border-radius: 1vh; }
.row.me { background: rgba(255, 213, 74, 0.25); }
.row .plus { color: var(--gold); font-weight: 700; animation: pop 0.5s 0.3s both; }

.podium { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2vw; min-height: 0; }
.step { width: 30%; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; animation: pop 0.7s both; }
.step .who { font-size: 4.5vh; font-weight: 700; margin-bottom: 1vh; }
.step .block { border-radius: 2vh 2vh 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 2vh; font-size: 7vh; font-weight: 700; }
.step.r1 .block { height: 30vh; background: linear-gradient(#ffd54a, #f5a623); color: #3a1a00; }
.step.r2 .block { height: 21vh; background: linear-gradient(#e0e6ef, #a9b4c4); color: #2a2f3a; }
.step.r3 .block { height: 15vh; background: linear-gradient(#f0a868, #c87533); color: #3a1a00; }
.step .block small { font-size: 2.6vh; }
.p1 { animation-delay: 1.2s !important; } .p2 { animation-delay: 0.6s !important; } .p3 { animation-delay: 0s !important; }

.start { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; background: rgba(20, 5, 50, 0.85); font-size: 3vh; }
.start .btn { font-size: 4vh; }
.emoji, .big { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } /* a text font with its own outline glyph (🐱) must not win */


/* a phone on its side: the four answers in one row, everything else smaller */
@media (orientation: landscape) and (max-height: 520px) {
  .phone { padding: 0.5rem 1rem; gap: 0.4rem; }
  .phone h1 { font-size: 1.5rem; }
  .phone h2 { font-size: 1.05rem; }
  .phone .big { font-size: 3rem; }
  .phone .center { gap: 0.5rem; }
  .phone form { flex-direction: row; max-width: 32rem; }
  .phone form input { flex: 1; }
  .answers { grid-template: 1fr / repeat(4, 1fr); gap: 0.5rem; }
  .answer { font-size: 1rem; }
  .answer .emoji { font-size: 2.2rem; }
  .result { padding: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
}

/* reactions */
.float { position: fixed; bottom: -12vh; z-index: 25; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 0.2em; animation: rise 3.6s ease-out forwards; }
.float .emoji { font-size: 3rem; line-height: 1; }
.float small { background: rgba(20, 5, 50, 0.6); padding: 0.1em 0.6em; border-radius: 999px; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.on-tv .float .emoji { font-size: 10vh; }
.on-tv .float small { font-size: 2.4vh; }
@keyframes rise {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  12% { transform: translateY(-14vh) scale(1.1); opacity: 1; }
  100% { transform: translate(var(--sway), -85vh) scale(1); opacity: 0; }
}
.reactions { display: flex; justify-content: space-between; gap: 0.4rem; transition: opacity 0.2s; }
.reactions button { flex: 1; background: var(--card); border-radius: 0.9rem; font-size: 1.6rem; padding: 0.25rem 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.reactions button:active { transform: scale(0.9); }
.reactions.cool { opacity: 0.4; }
.phone .center { min-height: 0; overflow-y: auto; }

/* certificate */
.cert { background: #fff8e7; color: #3a2a10; border: 6px double #c9a227; border-radius: 1rem; padding: 1.2rem 1rem; width: 100%; max-width: 24rem; text-align: center; box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 0.35rem; animation: pop 0.6s ease-out both; }
.cert .seal { font-size: 3rem; line-height: 1; }
.cert .kicker { letter-spacing: 0.3em; font-size: 0.8rem; font-weight: 700; color: #a07d12; }
.cert .title { font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.cert .to { font-size: 0.85rem; color: #7a6540; }
.cert .who { font-size: 2.1rem; font-weight: 700; color: #6a1b9a; line-height: 1.1; }
.cert .line { font-size: 1rem; }
.cert .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin-top: 0.2rem; }
.cert .badges span { background: #f3e2b3; border-radius: 999px; padding: 0.15em 0.7em; font-size: 0.85rem; font-weight: 600; }
.cert .date { font-size: 0.75rem; color: #7a6540; margin-top: 0.3rem; }

/* tv: standings and awards */
.standings { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, min-content); grid-auto-flow: column; gap: 1.2vh 3vw; align-content: center; }
.standings .row { font-size: 3.4vh; padding: 1vh 2vh; background: var(--card); border-radius: 1.5vh; grid-template-columns: 6vh 1fr auto; animation: pop 0.5s both; }
.standings-star .row { font-size: 3.4vh; width: 40vw; margin: 0 auto; padding: 1vh 2vh; grid-template-columns: 6vh 1fr auto auto; }
.end-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: 2vw; align-items: end; }
.end-wrap .podium { height: 100%; }
.awards { display: flex; flex-direction: column; justify-content: flex-end; gap: 1vh; min-height: 0; }
.award { background: var(--card); border: 2px solid var(--line); border-radius: 2vh; padding: 0.8vh 1.2vw; display: grid; grid-template-columns: 6vh 1fr; column-gap: 1vw; align-items: center; animation: pop 0.6s both; }
.award .emoji { font-size: 4.5vh; grid-row: span 3; text-align: center; }
.award b { font-size: 2.4vh; }
.award span { font-size: 2.1vh; }
.award small { font-size: 1.6vh; opacity: 0.75; }

/* tv run from a phone that is cast */
.timer { height: 0.8vh; border-radius: 999px; overflow: hidden; background: transparent; opacity: 0; transition: opacity 0.3s; margin-top: -1vh; }
.timer.show { opacity: 1; background: var(--card); }
.timer i { display: block; height: 100%; width: 100%; background: var(--c3); border-radius: 999px; transform-origin: left; }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tv footer .btn { min-height: 40px; }
.tv footer .btn + .btn { margin-left: 1vw; }
.rotate { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  .rotate { display: flex; position: fixed; inset: 0; z-index: 40; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; font-size: 1.4rem; background: var(--bg1); }
}

/* host controls on the first phone */
#host:empty { display: none; }
#host { background: rgba(0, 0, 0, 0.22); border-radius: 1rem; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.host-row { display: flex; align-items: center; gap: 0.5rem; }
.host-row span { flex: 1; font-size: 0.9rem; color: var(--muted); }
.host-row .btn { padding: 0.45em 1em; }
.host-crown { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 6.5rem; overflow-y: auto; }
.host-crown button { background: var(--card); border-radius: 999px; padding: 0.25em 0.8em; font-size: 0.9rem; }
.host-crown button.on { background: var(--gold); color: #3a1a00; font-weight: 700; }

/* ---------- Hira and Paşa ---------- */
.hira, .pasa { display: block; overflow: visible; }
.hira.head-only { overflow: hidden; }
.hira * , .pasa * { transform-box: view-box; }
.hira .m, .hira .eyes-happy, .hira .arm { display: none; }
.hira.mood-idle .m-smile, .hira.mood-wave .m-smile, .hira.mood-think .m-think, .hira.mood-wow .m-wow,
.hira.mood-happy .m-happy, .hira.mood-party .m-happy, .hira.mood-oops .m-oops { display: inline; }
.hira.mood-happy .eyes, .hira.mood-party .eyes { display: none; }
.hira.mood-happy .eyes-happy, .hira.mood-party .eyes-happy, .hira.mood-wave .arm, .hira.mood-party .arm { display: inline; }
.hira.mood-think .iris { transform: translate(-2.5px, -3px); }
.hira.mood-wow .brows { transform: translateY(-5px); }
.hira.mood-oops .brow-l { transform: rotate(-8deg); transform-origin: 80px 94px; }
.hira.mood-oops .brow-r { transform: rotate(8deg); transform-origin: 120px 94px; }

.hira .head { transform-origin: 100px 190px; animation: hira-bob 3.2s ease-in-out infinite; }
.hira .hair-back { transform-origin: 100px 80px; animation: hira-sway 4.4s ease-in-out infinite; }
.hira .eyes { transform-origin: 100px 113px; animation: hira-blink 4.8s infinite; }
.hira .arm { transform-origin: 142px 201px; animation: hira-wave 1.1s ease-in-out infinite; }
.hira.mood-happy .head, .hira.mood-party .head { animation: hira-hop 0.7s ease-in-out infinite; }
.hira.mood-wow .head { animation: hira-gasp 0.5s ease-out both; }
.hira.mood-think .head { animation: hira-tilt 2.4s ease-in-out infinite; }
.hira .hat { transform-origin: 136px 50px; animation: hira-sway 1.4s ease-in-out infinite; }
@keyframes hira-bob { 50% { transform: translateY(-2.5px) rotate(-1.5deg); } }
@keyframes hira-sway { 50% { transform: rotate(2.2deg); } }
@keyframes hira-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
@keyframes hira-wave { 50% { transform: rotate(-16deg); } }
@keyframes hira-hop { 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes hira-gasp { 0% { transform: scale(1); } 40% { transform: scale(1.06) translateY(-4px); } 100% { transform: scale(1.03); } }
@keyframes hira-tilt { 50% { transform: rotate(-5deg); } }
.pasa .pasa-body { transform-origin: 60px 105px; animation: pasa-hop 0.9s cubic-bezier(.3, 0, .4, 1) infinite; }
.pasa .pasa-head { transform-origin: 32px 50px; animation: hira-sway 1.8s ease-in-out infinite; }
@keyframes pasa-hop { 0%, 100% { transform: translateY(0) scale(1.04, 0.96); } 45% { transform: translateY(-16px) scale(0.97, 1.03); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- the poppenkast: valance, curtains, Hira in front ---------- */
:root { --velvet: #a3133a; --velvet-dark: #5e0620; --gold-trim: #e8b931; }
.on-tv .tv { padding-top: calc(2.5vh + 4.5vh); }
.stage { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.valance { position: absolute; top: 0; left: 0; right: 0; height: 4.5vh; z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 45%), var(--velvet); border-bottom: 0.5vh solid var(--gold-trim); box-shadow: 0 0.8vh 1.6vh rgba(0, 0, 0, 0.35); }
.valance::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2.6vh;
  background: radial-gradient(circle at 50% 0, var(--velvet) 62%, var(--gold-trim) 63% 70%, transparent 71%) 0 0 / 5.2vh 2.6vh repeat-x; }
.curtain { position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 22%, rgba(255, 255, 255, 0.10) 48%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, 0.45)) 0 0 / 6.5vw 100% repeat-x, linear-gradient(180deg, var(--velvet), var(--velvet-dark));
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1); }
.curtain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4vh; background: repeating-linear-gradient(90deg, var(--gold-trim) 0 0.45vw, #b8860b 0.45vw 0.9vw); }
.curtain.left { left: 0; transform-origin: left; transform: scaleX(0.05); }
.curtain.right { right: 0; transform-origin: right; transform: scaleX(0.05); }
.stage.closed .curtain { transform: scaleX(1); }
.curtain-card { background: radial-gradient(ellipse 34% 46% at 50% 52%, rgba(255, 226, 150, 0.28), transparent 70%); position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(4vh); transition: opacity 0.35s, transform 0.5s; }
.stage.closed .curtain-card { opacity: 1; transform: none; transition-delay: 0.45s; }
.curtain-card:empty { display: none; }
.curtain-card .hira { height: 52vh; width: auto; filter: drop-shadow(0 2vh 3vh rgba(0, 0, 0, 0.45)); }
.curtain-card p { margin: 1vh 0 0; font-size: 7vh; font-weight: 700; text-shadow: 0 0.5vh 1.5vh rgba(0, 0, 0, 0.5); }
.start { background: none; z-index: 30; }
.start .start-hira .hira { height: 46vh; width: auto; filter: drop-shadow(0 2vh 3vh rgba(0, 0, 0, 0.45)); }
.start h2 { margin: 0; font-size: 7vh; text-shadow: 0 0.5vh 1.5vh rgba(0, 0, 0, 0.5); }

.mini { display: inline-block; width: 6vh; height: 7.2vh; vertical-align: middle; margin-right: 1vw; background: rgba(255, 255, 255, 0.14); border-radius: 50%; overflow: hidden; }
.mini .hira { width: 100%; height: 100%; }

.lobby { grid-template-columns: auto 1fr auto; }
.lobby-hira { position: relative; align-self: end; width: 30vh; }
.lobby-hira .hira { width: 100%; height: auto; }
.lobby-pasa { position: absolute; left: -10vh; bottom: 0; width: 13vh; }
.bubble { position: relative; background: #fff; color: #3a1a6a; font-weight: 600; font-size: 2.3vh; line-height: 1.25; padding: 1.2vh 1.6vh; border-radius: 2vh; margin-bottom: 1.5vh; box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.25); animation: pop 0.6s 0.4s both; }
.bubble::after { content: ""; position: absolute; left: 40%; bottom: -1.4vh; border: 0.8vh solid transparent; border-top: 0.8vh solid #fff; border-left-width: 1.2vh; }

.end-head { display: flex; align-items: center; justify-content: center; gap: 2vw; }
.end-head .question { margin: 0; }
.end-head .subtitle { margin: 0.5vh 0 0; }
.end-hira { width: 15vh; height: 16vh; }
.end-hira .hira, .end-pasa .pasa { width: 100%; height: 100%; }
.end-pasa { width: 13vh; height: 12vh; align-self: flex-end; }
.start-hint { color: #ffe3ec; text-shadow: 0 0.3vh 1vh rgba(0, 0, 0, 0.6); }
.tiles .tile { animation: tile-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.tiles .tile:nth-child(2) { animation-delay: 0.08s; } .tiles .tile:nth-child(3) { animation-delay: 0.16s; } .tiles .tile:nth-child(4) { animation-delay: 0.24s; }
@keyframes tile-in { from { transform: scale(0.85) translateY(3vh); opacity: 0; } }

/* Hira on the phones */
.phone .portrait { position: relative; width: min(44vw, 24vh); flex-shrink: 0; }
.phone .portrait .hira { width: 100%; height: auto; filter: drop-shadow(0 0.6rem 1rem rgba(0, 0, 0, 0.3)); }
.result .portrait { width: min(30vw, 15vh); margin: -0.4rem auto 0.4rem; }
.portrait-pasa { position: absolute; right: -38%; bottom: 0; width: 48%; }
.cert .seal { position: relative; width: 5.5rem; height: 5.5rem; margin: 0 auto; border-radius: 50%; background: #f3e2b3; border: 4px solid #c9a227; overflow: hidden; }
.cert .seal .hira { width: 100%; height: 100%; }
.cert .seal span { position: absolute; right: -0.1rem; bottom: -0.1rem; font-size: 1.6rem; }
.cert .seal { overflow: visible; }
.cert .seal .hira { border-radius: 50%; }
.cert .kicker { letter-spacing: 0.12em; font-variant: small-caps; text-transform: lowercase; font-size: 1rem; }
@media (orientation: landscape) and (max-height: 520px) {
  .phone .portrait { width: 20vh; }
  .result .portrait { width: 14vh; margin: 0; }
}