/* Made by tools/build-scenes-css.mjs from the game's stylesheets. Don't edit by hand: overrides live in landing.css. */
.md-game .portrait { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; font-family: var(--serif); font-weight: 750; font-size: 19px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); box-shadow: 0 0 0 2px #14161b, 0 0 0 4px rgba(226, 178, 60, .55), 0 8px 20px rgba(0, 0, 0, .45); }
.md-game .portrait::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .35), transparent 50%); }
.md-game .p-0 { background: linear-gradient(140deg, #63c189, #2b5f40); }
.md-game .p-1 { background: linear-gradient(140deg, #4f97e6, #213f66); }
.md-game .p-2 { background: linear-gradient(140deg, #f06a48, #6f2214); }
.md-game .p-me { background: linear-gradient(140deg, #f3cf6a, #8a5f14); color: #2a1c04; text-shadow: none; }
.md-game .kb { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 560px; height: calc(100dvh - var(--top-h) - var(--tab-h) - 72px); padding: 14px clamp(12px, 2vw, 22px); border-radius: 28px; overflow: hidden; border: 1px solid #3d3122; background: radial-gradient(70% 55% at 50% 48%, rgba(226, 178, 60, .12), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 9px), linear-gradient(180deg, #211b14, #15110d 60%, #100d0a); box-shadow: inset 0 0 140px rgba(0, 0, 0, .65), 0 24px 60px rgba(0, 0, 0, .45); }
.md-game .kb-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }
.md-game .kb-bar { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr minmax(200px, 320px) auto; align-items: center; gap: 14px; }
.md-game .kb-plate { display: grid; gap: 5px; padding: 8px 14px 7px; color: #2a2418; border-radius: 6px 18px 6px 18px; background: linear-gradient(180deg, #fbf4de, #e6d7ae); box-shadow: 0 0 0 2px #3b3124, 0 0 0 4px rgba(226, 178, 60, .55), 0 12px 26px rgba(0, 0, 0, .5); }
.md-game .kb-plate.me { border-radius: 18px 6px 18px 6px; }
.md-game .kb-plate-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.md-game .kb-plate-top > b { font-family: var(--serif); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-game .kb-hp { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 7px; border-radius: 99px; background: #3b3124; }
.md-game .kb-hp em { font: 800 11px var(--sans); letter-spacing: .05em; color: #f3cf6a; }
.md-game .kb-status { font-size: 12px; white-space: nowrap; }
.md-game .kb-status i { font-style: normal; color: #7a6c52; }
.md-game .kb-status i.ok { color: #2f8a55; }
.md-game .kb-status i.bad { color: #b8452c; }
.md-game .kb-backs { display: flex; padding-left: 14px; }
.md-game .mini { position: relative; width: 42px; aspect-ratio: 63 / 88; margin-left: -14px; display: block; transition: transform .4s, opacity .4s; }
.md-game .mini .card-back { box-shadow: 0 0 0 1px #9c7a2c inset, 0 6px 12px rgba(0, 0, 0, .5); }
.md-game .mini .card-back-name { display: none; }
.md-game .mini .card-back-inner .icon { min-width: 14px; }
.md-game .mini.used { opacity: .15; transform: translateY(10px) scale(.85); }
.md-game .hpbar { position: relative; flex: 1; height: 10px; border-radius: 99px; overflow: hidden; background: #15120d; }
.md-game .hpbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.md-game .hp-lag { background: #f5e3bd; transition: width .7s .05s ease-out; }
.md-game .hp-fill { --hc: #3ec46f; background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 55%, #fff), var(--hc) 55%); transition: width .25s ease-out; }
.md-game .hpbar.mid .hp-fill { --hc: #e8b923; }
.md-game .hpbar.low .hp-fill { --hc: #e5482e; animation: lowHp .8s ease-in-out infinite alternate; }
@keyframes lowHp { to { filter: brightness(1.4); } }
.md-game .hp-num { justify-self: end; font: 700 12px var(--sans); color: #6b5d43; font-variant-numeric: tabular-nums; }
.md-game .hp-num b { font-size: 16px; color: #2a2418; }
.md-game .kb-mid { position: relative; z-index: 2; display: grid; gap: 8px; align-content: center; }
.md-game .kb-meta { display: flex; justify-content: center; align-items: center; gap: 10px; }
.md-game .kb-roundno { font-size: 13px; color: var(--muted); font-weight: 650; }
.md-game .kb-quit { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .3); color: var(--faint); font-size: 12px; }
.md-game .kb-quit .icon { width: 13px; height: 13px; }
.md-game .kb-quit:hover { color: var(--bad); }
.md-game [data-phase="done"] .kb-quit { visibility: hidden; }
.md-game .kb-arena { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) minmax(120px, 200px); align-items: center; gap: clamp(12px, 2.4vw, 32px); }
.md-game .kb-arena::before { content: ''; position: absolute; left: 50%; top: 55%; width: min(560px, 74%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(226, 178, 60, .16); box-shadow: inset 0 0 90px rgba(226, 178, 60, .05); pointer-events: none; z-index: -1; }
.md-game .kb-slot { position: relative; width: 100%; aspect-ratio: 63 / 88; display: grid; place-items: center; }
.md-game .kb-slot > * { position: absolute; inset: 0; }
.md-game .kb-slot .card { max-width: none; width: 100%; }
.md-game .kb-empty-slot { display: grid; place-items: center; border-radius: 6%/4.3%; border: 2px dashed rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .2); color: var(--faint); font-size: 13px; }
.md-game .kb-back-slot { display: block; }
.md-game .kb-in { animation: kbIn .45s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes kbIn { from { transform: translateY(30px) scale(.85) rotateY(70deg); opacity: 0; } }
.md-game .kb-slot.hurt::after { content: ''; position: absolute; inset: 0; border-radius: 6%/4.3%; background: radial-gradient(circle, rgba(255, 70, 40, .55), rgba(255, 70, 40, .15)); animation: hurt .55s ease-out forwards; z-index: 4; pointer-events: none; }
@keyframes hurt { to { opacity: 0; } }
.md-game .kb-slot .float { z-index: 6; }
.md-game .kb-slot.mine { --side: #5fd39a; --dir: 1; translate: 0 22px; }
.md-game .kb-slot.theirs { --side: #f2765c; --dir: -1; translate: 0 -22px; }
.md-game .kb-slot.clash { z-index: 5; animation: kbClash 1.25s cubic-bezier(.3, .7, .3, 1) both; }
.md-game .kb-slot.clash.hit { animation-name: kbClashHit; }
.md-game .kb-slot.knocked { animation: kbKnock 1.25s ease-out both; }
@keyframes kbClash { 30% { transform: translate(calc(var(--fx) * -.12), calc(var(--fy) * -.12 - 16px)) scale(1.06) rotate(calc(var(--dir) * -5deg)); } 57% { transform: translate(var(--fx), var(--fy)) scale(1.12) rotate(calc(var(--dir) * 6deg)); } 72% { transform: translate(calc(var(--fx) * .7), calc(var(--fy) * .7)) scale(1.04); } }
@keyframes kbClashHit { 30% { transform: translate(calc(var(--fx) * -.12), calc(var(--fy) * -.12 - 16px)) scale(1.06) rotate(calc(var(--dir) * -5deg)); } 57% { transform: translate(var(--fx), var(--fy)) scale(1.1); } 68% { transform: translate(calc(var(--fx) * .2 - var(--dir) * 40px), calc(var(--fy) * .2)) rotate(calc(var(--dir) * -12deg)) scale(.94); filter: brightness(1.7); } }
@keyframes kbKnock { 0%, 56% { transform: none; } 64% { transform: translateX(calc(var(--dir) * -50px)) rotate(calc(var(--dir) * -13deg)) scale(.92); filter: brightness(1.9); } 80% { transform: translateX(calc(var(--dir) * -28px)) rotate(calc(var(--dir) * -6deg)); } }
.md-game .kb-slot.ko .card { animation: kbKo .7s ease-in forwards; }
@keyframes kbKo { to { transform: translateY(26px) rotate(calc(var(--dir) * -14deg)) scale(.9); filter: grayscale(1) brightness(.5); opacity: .6; } }
.md-game .kb-slot .float { animation-name: kbPop; animation-timing-function: cubic-bezier(.2, 1.5, .4, 1); }
.md-game .float.crit { color: #ffd36b; font-size: 58px; text-shadow: 0 0 24px rgba(255, 190, 60, .8), 0 3px 12px #000; }
.md-game .float small { display: block; font: 800 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff3c9; text-align: center; }
@keyframes kbPop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.3); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.35); } 28% { transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50px); } }
.md-game .kb.shake { animation: kbShake .45s; }
@keyframes kbShake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(2px, -1px); } }
.md-game .kb.crit { animation: kbZoom .6s cubic-bezier(.2, 1.4, .4, 1); }
.md-game .kb.crit::after { content: ''; position: absolute; inset: 0; z-index: 24; pointer-events: none; animation: kbFlash .6s ease-out forwards; background: radial-gradient(circle, rgba(255, 244, 200, .9), rgba(255, 200, 90, .3) 45%, transparent 75%); }
@keyframes kbZoom { 18% { transform: scale(1.05) rotate(-.5deg); } }
@keyframes kbFlash { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.md-game .kb-slot .float { animation: none !important; }
.md-game .kb.crit::after { display: none; }
}
.md-game .kb-slot::before { content: attr(data-tag); position: absolute; left: 50%; top: 0; z-index: 7; transform: translate(-50%, -60%); max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 11px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; color: #0d0c0a; background: var(--side); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.md-game .kb-slot .card-frame { box-shadow: 0 0 0 2px color-mix(in srgb, var(--side) 75%, transparent), 0 0 26px -6px var(--side), 0 14px 30px rgba(0, 0, 0, .5); }
.md-game .kb-slot .kb-empty-slot { border-color: color-mix(in srgb, var(--side) 35%, transparent); }
.md-game .kb-center { display: grid; justify-items: center; align-content: center; min-height: 260px; }
.md-game .kb-prompt { display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 360px; }
.md-game .kb-prompt h3 { font-family: var(--serif); font-size: 26px; }
.md-game .kb-prompt p { color: var(--muted); }
.md-game .ring { position: relative; width: 52px; height: 52px; display: inline-block; flex: none; }
.md-game .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.md-game .ring-bg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 4; }
.md-game .ring-fg { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; transition: stroke .3s; }
.md-game .ring.hurry .ring-fg { stroke: var(--bad); }
.md-game .ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 18px; font-variant-numeric: tabular-nums; }
.md-game .ring.hurry b { color: #ff8f78; animation: pulse .5s ease-in-out infinite; }
.md-game .kb-q { width: 100%; max-width: 600px; padding: 16px 18px 12px; border-radius: 6px 18px 6px 18px; background: linear-gradient(180deg, #fbf4de, #e6d7ae); color: #2a2418; border: 0; box-shadow: 0 0 0 2px #3b3124, 0 0 0 4px rgba(226, 178, 60, .55), 0 20px 40px rgba(0, 0, 0, .55); animation: qIn .35s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes qIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.md-game .kb-q-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.md-game .kb-q-head .ring { width: 44px; height: 44px; }
.md-game .kb-q-head .ring b { font-size: 16px; }
.md-game .kb-q-about { font-size: 13px; color: #6b5d43; font-weight: 650; }
.md-game .kb-q-about b { color: #8a5d12; }
.md-game .kb-q .ring-bg { stroke: rgba(59, 49, 36, .16); }
.md-game .kb-q .ring.hurry b { color: #b2412a; }
.md-game .kb-q-text { font-family: var(--serif); font-size: clamp(18px, 2.1vw, 23px); line-height: 1.3; margin: 10px 2px 14px; }
.md-game .kb-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.md-game .kb-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 13px; text-align: left; font-size: 15px; line-height: 1.25; background: #fffaf0; border: 2px solid #3b3124; box-shadow: 0 3px 0 #3b3124; color: #2a2418; font-weight: 600; transition: border-color .15s, background .15s, transform .12s, box-shadow .12s, opacity .3s; }
.md-game .kb-opt:hover:not(:disabled) { background: #fff1cf; transform: translateY(-1px); }
.md-game .kb-opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #3b3124; }
.md-game .kb-opt:disabled { cursor: default; }
.md-game .kb-opt kbd { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #3b3124; font: 700 12px var(--sans); color: #fbf4de; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45); }
.md-game .kb-opt.chosen { border-color: #8a5d12; background: #f7dd94; }
.md-game .kb-opt.right { border-color: #1f6e3f; background: #bfe6c9; box-shadow: 0 3px 0 #1f6e3f; animation: rightPop .4s cubic-bezier(.2, 1.6, .4, 1); }
.md-game .kb-opt.right kbd { background: #1f6e3f; color: #fff; }
.md-game .kb-opt.wrong { border-color: #8f2f1f; background: #f4c3b8; box-shadow: 0 3px 0 #8f2f1f; animation: wrongShake .4s; }
.md-game .kb-opt.wrong kbd { background: #8f2f1f; color: #fff; }
.md-game .kb-opt.dim { opacity: .38; }
@keyframes rightPop { 50% { transform: scale(1.04); } }
@keyframes wrongShake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.md-game .kb-q-foot { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.md-game .kb-q-foot .good { color: #8ad7a8; }
.md-game .kb-q-foot .bad { color: #f59a84; }
.md-game .kb-q .kb-q-foot { color: #6b5d43; }
.md-game .kb-q .kb-q-foot .good { color: #1f6e3f; }
.md-game .kb-q .kb-q-foot .bad { color: #a8392a; }
.md-game .kb-next { display: flex; margin: 10px auto 0; }
.md-game .kb-bar.me { grid-template-columns: auto minmax(200px, 300px) 1fr; }
.md-game .kb-hand { grid-area: hand; display: flex; justify-content: center; align-items: flex-end; padding: 18px 9% 0 0; margin-bottom: 8px; }
.md-game [data-phase="answer"] .kb-hand, .md-game [data-phase="reveal"] .kb-hand { opacity: .45; }
.md-game .kb-hand-card { position: relative; width: min(10.5vw, 17vh, 150px); margin: 0 -6px; padding: 0; border: 0; background: none; transform-origin: 50% 130%; transition: transform .25s cubic-bezier(.2, 1.2, .4, 1), opacity .3s, filter .3s; }
.md-game .kb-hand-card:nth-child(1) { transform: rotate(-10deg) translateY(10px); }
.md-game .kb-hand-card:nth-child(2) { transform: rotate(-5deg) translateY(3px); }
.md-game .kb-hand-card:nth-child(4) { transform: rotate(5deg) translateY(3px); }
.md-game .kb-hand-card:nth-child(5) { transform: rotate(10deg) translateY(10px); }
.md-game .kb-hand-card .card { max-width: none; pointer-events: none; }
.md-game .kb-hand-card.live { cursor: pointer; }
.md-game .kb-hand-card.live .card-frame { box-shadow: 0 0 0 2px var(--gold-2), 0 0 24px rgba(243, 207, 106, .3), 0 10px 20px rgba(0, 0, 0, .5); }
@media (hover: hover) {
.md-game .kb-hand-card.live:hover { transform: translateY(-26px) rotate(0) scale(1.08); z-index: 3; }
}
.md-game .kb-hand-card.live.lift { transform: translateY(-22px) rotate(0) scale(1.14); z-index: 3; }
.md-game .kb-hand-card.lift .card-frame { box-shadow: 0 0 0 3px #fff3c9, 0 0 30px rgba(243, 207, 106, .7), 0 14px 26px rgba(0, 0, 0, .6); }
.md-game .kb-slot.previewing .card { opacity: .8; filter: saturate(.85); }
.md-game .kb-play { margin: 4px 0 2px; max-width: 100%; }
.md-game .kb-hand-card:not(.live) { filter: brightness(.7) saturate(.8); }
.md-game .kb-hand-card.used { opacity: .18; filter: grayscale(1); }
.md-game .kb-hand-card.chosen { opacity: .25; }
.md-game .kb-hand-card:disabled { cursor: default; }
.md-game .kb-result { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 45%, rgba(20, 22, 30, .6), rgba(5, 6, 9, .86)); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s; }
.md-game .kb-result.in { opacity: 1; }
.md-game .kb-result-card { width: min(520px, 100%); padding: 30px 26px; display: grid; gap: 14px; justify-items: center; text-align: center; border-radius: 24px; background: linear-gradient(180deg, #252a37, #171a22); border: 1px solid var(--line-2); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); transform: scale(.9) translateY(14px); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.md-game .kb-result.in .kb-result-card { transform: none; }
.md-game .kb-result.win .kb-result-card { border-color: rgba(226, 178, 60, .6); box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 90px -16px rgba(226, 178, 60, .55); }
.md-game .kb-result-icon .icon { width: 64px; height: 64px; stroke-width: 1.3; }
.md-game .kb-result.win .kb-result-icon { color: var(--gold-2); filter: drop-shadow(0 0 20px rgba(226, 178, 60, .6)); animation: float 3s ease-in-out infinite; }
.md-game .kb-result.loss .kb-result-icon, .md-game .kb-result.draw .kb-result-icon { color: var(--muted); }
.md-game .kb-result-card h1 { font-size: clamp(42px, 6vw, 58px); }
.md-game .kb-result.win h1 { color: var(--gold-2); text-shadow: 0 4px 30px rgba(226, 178, 60, .4); }
.md-game .kb-result-card > p { color: var(--muted); }
.md-game .kb-result-stats { display: flex; gap: 10px; }
.md-game .kb-result-stats span { display: grid; padding: 10px 16px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); min-width: 96px; }
.md-game .kb-result-stats b { font-family: var(--serif); font-size: 24px; }
.md-game .kb-result-stats small { color: var(--muted); }
.md-game .kb-rewards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.md-game .kb-rewards span:not(.muted) { padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); font-weight: 650; font-size: 14px; }
@media (max-height: 760px) {
.md-game .kb-slot.mine, .md-game .kb-slot.theirs { translate: none; }
}
@media (max-width: 760px) {
.md-game .kb { position: fixed; inset: 0; z-index: 50; height: 100dvh; min-height: 0; border: 0; border-radius: 0; overscroll-behavior: contain; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom)); }
.md-game .kb-bar, .md-game .kb-bar.me { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
.md-game .kb-plate { padding: 6px 10px 5px; gap: 3px; }
.md-game .kb-plate-top > b { font-size: 15px; }
.md-game .kb-slot.mine, .md-game .kb-slot.theirs { translate: none; }
.md-game .portrait { width: 46px; height: 46px; font-size: 16px; }
.md-game .kb-status { font-size: 11px; }
.md-game .hp-num b { font-size: 14px; }
.md-game .kb-backs { padding: 0; }
.md-game .mini { width: 22px; margin-left: -9px; }
.md-game .kb-mid { overflow-y: auto; scrollbar-width: none; gap: 10px; }
.md-game .kb-meta { justify-content: space-between; }
.md-game .kb-meta .mode { display: none; }
.md-game .kb-roundno { font-size: 13px; color: var(--gold-2); }
.md-game .kb-quit { padding: 7px; }
.md-game .kb-quit span { display: none; }
.md-game .kb-quit .icon { width: 16px; height: 16px; }
.md-game .kb-arena { grid-template-columns: 1fr 1fr; grid-template-areas: "mine theirs" "center center"; gap: 12px 14px; }
.md-game .kb-arena::before { display: none; }
.md-game .kb-slot.mine { grid-area: mine; justify-self: end; }
.md-game .kb-slot.theirs { grid-area: theirs; justify-self: start; }
.md-game .kb-center { grid-area: center; min-height: 0; }
.md-game .kb-slot { width: min(41vw, 19dvh, 180px); }
.md-game [data-phase="answer"] .kb-slot, .md-game [data-phase="reveal"] .kb-slot { width: min(30vw, 14dvh); }
.md-game .kb-prompt { gap: 6px; }
.md-game .kb-prompt h3 { font-size: 22px; }
.md-game .kb-prompt p { font-size: 14px; }
.md-game .kb-prompt .ring { width: 44px; height: 44px; }
.md-game .kb-q { padding: 12px 12px 10px; border-radius: 6px 16px 6px 16px; }
.md-game .kb-q-text { font-size: 19px; margin: 8px 2px 12px; }
.md-game .kb-opts { grid-template-columns: 1fr; }
.md-game .kb-opt { min-height: 54px; padding: 10px 12px; font-size: 16px; border-radius: 14px; }
.md-game .kb-q-foot { font-size: 15px; }
.md-game .kb-bar.me { grid-template-areas: "p who" "hand hand"; grid-template-columns: auto minmax(0, 1fr); row-gap: 0; }
.md-game .kb-bar.me .portrait { grid-area: p; }
.md-game .kb-bar.me .kb-plate { grid-area: who; }
.md-game .kb-hand { grid-area: hand; min-height: 0; margin: 0; padding: 18px 0 14px; }
.md-game .kb-slot::before { font-size: 11px; padding: 2px 9px; }
.md-game .kb-hand-card { width: min(21vw, 92px, 15dvh); margin: 0 -10px; }
.md-game [data-phase="answer"] .kb-hand, .md-game [data-phase="reveal"] .kb-hand { display: none; }
.md-game .kb-slot .float { font-size: 34px; }
}
.md-game .rk-bronze { --rk: #c9824b; }
.md-game .rk-silver { --rk: #b9c3cf; }
.md-game .rk-gold { --rk: #e9bd45; }
.md-game .rk-platinum { --rk: #7fd6cf; }
.md-game .rk-diamond { --rk: #8fb4ff; }
.md-game .rk-legend { --rk: #f0709e; }
.md-game .cl-rank { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--rk); background: color-mix(in srgb, var(--rk) 13%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rk) 40%, transparent) inset; }
.md-game .cl-hud > .cl-rank { justify-self: center; }
.md-game .cl-rank .icon { width: 16px; height: 16px; }
.md-game .cl .card-stats { display: none; }
.md-game .cl .card-battle .card-art { flex: 1; aspect-ratio: auto; }
.md-game .cl .card-kind { padding-bottom: 4cqw; }
.md-game .cl-wait { display: grid; justify-items: center; gap: 14px; padding: 90px 0; color: var(--muted); }
.md-game .cl-warn { max-width: 42ch; color: #f59a84; font-size: 14px; }
.md-game .cl-note { max-width: 42ch; color: var(--muted); font-size: 13px; }
.md-game .cl-bar { display: block; width: 100%; max-width: 360px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.md-game .cl-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: left; animation: clDrain linear forwards; animation-duration: var(--ms) !important; }
.md-game .cl.paused .cl-bar i { animation-play-state: paused; }
@keyframes clDrain { 0%, 55% { background-color: var(--gold-2); } to { transform: scaleX(0); background-color: var(--bad); } }
.md-game .cl-home { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; max-width: 1100px; margin: 0 auto; }
.md-game .cl-hero { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 14px; padding: 40px 32px 30px; border-radius: 18px; text-align: center; background: radial-gradient(70% 55% at 50% 0%, rgba(226, 178, 60, .2), transparent 70%), linear-gradient(180deg, #1c1b1c, #131419); border: 1px solid #3a2f20; box-shadow: 0 30px 80px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .05); }
.md-game .cl-hero h1 { font-size: clamp(38px, 5vw, 58px); letter-spacing: -.02em; }
.md-game .cl-sub { max-width: 40ch; color: var(--muted); font-size: 16px; }
.md-game .cl-me { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; font-size: 16px; }
.md-game .cl-me b { font-family: var(--serif); color: var(--gold-2); }
.md-game .cl-go { min-width: 240px; min-height: 58px; border-radius: 16px; font-size: 18px; animation: clGlow 2.4s ease-in-out infinite; }
.md-game .cl-go:disabled { animation: none; }
.md-game .cl-go .icon { width: 20px; height: 20px; }
@keyframes clGlow { 50% { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 0 36px -4px rgba(226, 178, 60, .8); } }
.md-game .cl-tower { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.md-game .cl-tower i { width: calc(110px - var(--i) * 15px); height: 12px; border-radius: 4px; background: #4a3c24; animation: clLit 2.6s calc(var(--i) * .22s) ease-in-out infinite; }
.md-game .cl-tower i:last-child { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 26px var(--gold); animation-name: pulse; }
@keyframes clLit { 15% { background: var(--gold); box-shadow: 0 0 16px -2px var(--gold); } 40% { background: #4a3c24; box-shadow: none; } }
.md-game .cl-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; width: 100%; max-width: 580px; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
.md-game .cl-rules li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; line-height: 1.3; color: var(--muted); }
.md-game .cl-rules b { color: var(--text); }
.md-game .cl-rules .icon, .md-game .cl-rules .wikey { flex: none; width: 18px; height: 18px; color: var(--gold); }
.md-game .cl-powers { width: 100%; max-width: 580px; font-size: 13px; color: var(--muted); }
.md-game .cl-powers summary { width: fit-content; margin: 0 auto; cursor: pointer; color: var(--gold-2); font-weight: 650; }
.md-game .cl-powers ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 12px 14px; list-style: none; border-radius: 12px; background: rgba(255, 255, 255, .035); text-align: left; }
.md-game .cl-powers li b { color: var(--tier); }
.md-game .cl-prog { display: grid; gap: 6px; width: 100%; max-width: 420px; font-size: 14px; color: var(--muted); }
.md-game .cl-prog-ends { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.md-game .cl-prog-ends span { color: var(--rk); }
.md-game .cl-prog-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.md-game .cl-prog-bar i { display: block; width: calc(var(--p) * 100%); min-width: 8px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-2)); animation: clFill 1s .2s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes clFill { from { width: 0; } }
.md-game .cl-prog b { color: var(--text); }
.md-game .cl-kick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 99px; background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 700; color: var(--muted); }
.md-game .cl-kick .icon { width: 15px; height: 15px; }
.md-game .cl-end.is-best .cl-kick { background: rgba(226, 178, 60, .18); color: var(--gold-2); }
.md-game .cl-big { display: grid; justify-items: center; line-height: 1; }
.md-game .cl-big b { font-family: var(--serif); font-size: clamp(76px, 10vw, 116px); color: var(--gold-2); text-shadow: 0 0 50px rgba(226, 178, 60, .35); font-variant-numeric: tabular-nums; }
.md-game .cl-big span { margin-top: 6px; font-size: 18px; color: var(--muted); }
.md-game .cl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 520px; }
.md-game .cl-tiles p { display: grid; gap: 4px; padding: 12px 8px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.md-game .cl-tiles small { font-size: 12px; color: var(--muted); }
.md-game .cl-tiles b { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--serif); font-size: 20px; color: var(--rk, var(--text)); }
.md-game .cl-tiles .icon, .md-game .cl-tiles .wikey { width: 18px; height: 18px; color: var(--rk, var(--gold)); }
.md-game .cl-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.md-game .cl-acts .cl-go { min-width: 0; }
.md-game .cl-end > .cl-burst { top: 150px; }
.md-game .cl-board { display: grid; gap: 6px; padding: 20px 16px 14px; border-radius: 22px; background: var(--ink-2); border: 1px solid var(--line); }
.md-game .cl-board > .spinner { justify-self: center; margin: 40px 0; }
.md-game .cl-board h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.md-game .cl-board h2 .icon { width: 18px; height: 18px; color: var(--gold); }
.md-game .cl-board-sub { margin-bottom: 6px; font-size: 13px; color: var(--faint); }
.md-game .cl-board-empty { padding: 16px 0; color: var(--muted); font-size: 14px; }
.md-game .cl-board-cols { display: flex; justify-content: space-between; padding: 0 8px; font-size: 12px; font-weight: 650; color: var(--faint); }
.md-game .cl-board ol { display: grid; margin: 0; padding: 0; list-style: none; }
.md-game .cl-board li { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; font-size: 14px; }
.md-game .cl-board li + li { box-shadow: 0 -1px 0 rgba(255, 255, 255, .05); }
.md-game .cl-board li.me { background: rgba(226, 178, 60, .1); }
.md-game .cl-board .cl-gap { display: block; padding: 0; text-align: center; color: var(--faint); }
.md-game .cl-who { display: grid; min-width: 0; line-height: 1.2; }
.md-game .cl-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-game .cl-who small { font-size: 12px; color: var(--rk); }
.md-game .cl-place { color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.md-game .cl-board li:nth-child(-n+3) .cl-place { color: var(--gold-2); font-weight: 700; }
.md-game .cl-floors { font-family: var(--serif); font-size: 18px; color: var(--gold-2); }
.md-game .cl { overflow-x: clip; }
.md-game .cl-run { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; gap: 18px; max-width: 1020px; min-height: min(720px, calc(100dvh - 140px)); margin: 0 auto; padding: 18px 26px 26px; border-radius: 28px; border: 1px solid #3a2f20; background: radial-gradient(60% 50% at 50% 50%, rgba(226, 178, 60, .09), transparent 70%), linear-gradient(180deg, #1b1a1c, #111216); box-shadow: 0 40px 90px -50px #000, inset 0 0 90px rgba(0, 0, 0, .45); }
.md-game .cl-run.is-boss { border-color: rgba(236, 79, 138, .45); background: radial-gradient(60% 50% at 50% 45%, rgba(236, 79, 138, .16), transparent 70%), linear-gradient(180deg, #1e161c, #121115); }
.md-game .cl-stage { flex: 1; display: grid; align-content: center; justify-items: center; gap: 20px; }
.md-game .cl-hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.md-game .cl-hud-end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.md-game .cl-streak { display: inline-flex; align-items: center; gap: 3px; font: 400 22px var(--serif); color: #ff9d47; animation: clPop .4s cubic-bezier(.2, 1.6, .4, 1); }
.md-game .cl-streak .icon { width: 20px; height: 20px; fill: currentColor; }
.md-game .cl-streak.hot { color: #ff6a3d; filter: drop-shadow(0 0 8px rgba(255, 106, 61, .8)); }
.md-game .cl-floor { display: flex; align-items: center; gap: 12px; }
.md-game .cl-floor span { display: grid; line-height: 1; }
.md-game .cl-floor small { font-size: 12px; color: var(--muted); }
.md-game .cl-floor b { display: inline-grid; overflow: hidden; font-family: var(--serif); font-size: 40px; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.md-game .cl-floor b i { grid-area: 1 / 1; font-style: normal; }
.md-game .cl-floor .out { animation: clOut .45s .2s forwards; }
.md-game .cl-floor .in { animation: clIn .45s .2s backwards; }
@keyframes clOut { to { transform: translateY(-100%); opacity: 0; } }
@keyframes clIn { from { transform: translateY(100%); opacity: 0; } }
.md-game .cl-hearts { display: flex; gap: 6px; }
.md-game .cl-hearts i { display: grid; color: var(--ink-4); }
.md-game .cl-hearts .icon { width: 28px; height: 28px; fill: currentColor; }
.md-game .cl-hearts .on { color: #ef5f6f; filter: drop-shadow(0 0 8px rgba(239, 95, 111, .5)); }
.md-game .cl-hearts .break { animation: clBreak .7s forwards; }
.md-game .cl-hearts .gain { animation: clPop .6s .2s cubic-bezier(.2, 1.6, .4, 1) backwards; }
@keyframes clBreak { 0% { color: #ef5f6f; } 25% { color: #ff9aa4; transform: scale(1.5) rotate(-14deg); } 45% { transform: scale(1.2) rotate(12deg); } 65% { transform: scale(1.1) rotate(-6deg); } to { color: var(--ink-4); transform: scale(.85); } }
@keyframes clPop { from { transform: scale(0); } }
.md-game .cl-path { display: flex; align-items: center; justify-content: center; gap: 6px; }
.md-game .cl-path i { flex: 0 1 64px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); transition: background .3s; }
.md-game .cl-path .done { background: var(--gold); box-shadow: 0 0 10px -2px var(--gold); }
.md-game .cl-path .now { background: var(--gold-2); animation: pulse 1s ease-in-out infinite; }
.md-game .cl-path .crown { flex: none; display: grid; place-items: center; width: 26px; height: 26px; background: rgba(236, 79, 138, .14); color: #f0709e; }
.md-game .cl-path .crown .icon { width: 15px; height: 15px; }
.md-game .cl-run.hit .cl-path .done:has(+ .now), .md-game .cl-run.hit .cl-path .done:has(+ .crown.now) { animation: clPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.md-game .cl-bg { position: absolute; z-index: -1; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.md-game .cl-bg::before { content: ''; position: absolute; inset: -80px 0 0; animation: clRise var(--rise) linear var(--rise-d) infinite; background: linear-gradient(90deg, rgba(226, 178, 60, .05), transparent 12% 88%, rgba(226, 178, 60, .05)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 80px); }
@keyframes clRise { to { transform: translateY(80px); } }
.md-game .lifting .cl-bg { animation: clLiftBg .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes clLiftBg { from { translate: 0 -260px; } }
.md-game .cl-fuse { position: absolute; z-index: 3; top: 0; left: 26px; right: 26px; height: 4px; pointer-events: none; }
.md-game .cl-fuse i { position: relative; display: block; width: calc(var(--t, 0) * 100%); height: 100%; border-radius: 99px; background: var(--gold-2); box-shadow: 0 0 12px var(--gold); transition: width .1s linear, background .3s; }
.md-game .cl-fuse i::after { content: ''; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #fff3c9; box-shadow: 0 0 16px 4px #ffb347; opacity: min(1, calc(var(--t, 0) * 50)); animation: pulse .3s ease-in-out infinite; }
.md-game .cl-run.warn .cl-fuse i { background: #ff9d47; box-shadow: 0 0 14px #ff9d47; }
.md-game .cl-run.danger .cl-fuse i { height: 7px; background: var(--bad); box-shadow: 0 0 20px var(--bad); }
.md-game .cl-run::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 110px 16px rgba(232, 52, 42, .8); }
.md-game .cl-run.last-heart::after { --al: .35; animation: clAlarm 1.5s ease-in-out infinite; }
.md-game .cl-run.warn::after { --al: .5; animation: clAlarm 1s ease-in-out infinite; }
.md-game .cl-run.danger::after { --al: 1; animation: clAlarm .5s ease-in-out infinite; }
@keyframes clAlarm { 50% { opacity: var(--al); } }
.md-game .cl-countdown { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; pointer-events: none; font: 400 clamp(180px, 42vmin, 400px) / 1 var(--serif); color: rgba(255, 90, 70, .24); }
.md-game .cl-countdown:not(:empty) { animation: clCountIn .9s ease-out both; }
@keyframes clCountIn { from { transform: scale(1.7); color: rgba(255, 90, 70, .5); } }
.md-game .cl-run.danger .cl-pick-card, .md-game .cl-run.danger .cl-qcard { animation: clTremble .16s linear infinite; }
.md-game .cl-run.warn .cl-pick-card { animation-duration: 1s; }
@keyframes clTremble { 25% { transform: translate(-1.5px, 1px) rotate(-.5deg); } 75% { transform: translate(1.5px, -1px) rotate(.5deg); } }
.md-game .cl-run.danger .cl-qtext { color: #ffd2c8; }
.md-game .lifting .cl-stage { animation: clDropIn .45s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes clDropIn { from { transform: translateY(-46px); opacity: 0; } }
.md-game .cl-lift { position: absolute; z-index: 5; inset: 0; display: grid; place-content: center; justify-items: center; pointer-events: none; border-radius: inherit; background: radial-gradient(closest-side, rgba(10, 8, 6, .75), transparent); animation: clLiftOut .8s ease-in forwards; }
.md-game .cl-lift small { font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.md-game .cl-lift b { font: 400 clamp(90px, 18vmin, 160px) / 1 var(--serif); color: #fff3c9; text-shadow: 0 0 44px var(--gold); animation: clSlam .35s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.md-game .cl-lift em { font-style: normal; font-weight: 700; color: #f0709e; }
@keyframes clLiftOut { 65% { opacity: 1; } to { opacity: 0; } }
.md-game .cl-praise { position: absolute; z-index: 5; top: 16%; left: 0; right: 0; text-align: center; pointer-events: none; font: 400 clamp(36px, 7vw, 68px) / 1 var(--serif); animation: clPraise 1.15s cubic-bezier(.2, .9, .3, 1) forwards; }
.md-game .cl-praise.good { color: var(--gold-2); text-shadow: 0 0 34px var(--gold), 0 3px 0 rgba(0, 0, 0, .5); }
.md-game .cl-praise.bad { color: #ff8f78; text-shadow: 0 0 34px var(--bad), 0 3px 0 rgba(0, 0, 0, .5); }
@keyframes clPraise { from { opacity: 0; transform: scale(2.2) rotate(-5deg); } 16% { opacity: 1; transform: rotate(-2deg); } 70% { opacity: 1; transform: rotate(-2deg); } to { opacity: 0; transform: translateY(-26px) rotate(-2deg); } }
.md-game .cl-ask { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.md-game .cl-ask-t { display: grid; gap: 2px; }
.md-game .cl-ask-t b { font-family: var(--serif); font-size: 28px; }
.md-game .cl-ask-t span { color: var(--muted); font-size: 14px; }
.md-game .cl-ask .ring { width: 56px; height: 56px; }
.md-game .cl-hand { display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); justify-content: center; gap: 24px; width: 100%; perspective: 1200px; }
.md-game .cl-pick { position: relative; display: grid; gap: 10px; padding: 0; border: 0; background: none; color: inherit; text-align: center; transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s; animation: clDeal .5s calc(var(--i) * 80ms + .12s) cubic-bezier(.2, .9, .3, 1.15) backwards; }
.md-game .cl-pick:nth-child(1) { rotate: -3deg; }
.md-game .cl-pick:nth-child(3), .md-game :where(.cl-pick:nth-child(2):last-child) { rotate: 3deg; }
.md-game .cl-pick-card { display: block; animation: clFloat 2.4s calc(var(--i) * -.7s) ease-in-out infinite; }
@keyframes clFloat { 50% { transform: translateY(-7px); } }
.md-game .cl-pick .card { max-width: none; }
.md-game .cl-pick:hover:not(:disabled) { transform: translateY(-12px) scale(1.04); rotate: 0deg; }
.md-game .cl-pick:hover:not(:disabled) .card-frame { box-shadow: 0 22px 40px rgba(0, 0, 0, .55), 0 0 30px -4px var(--tier); }
.md-game .cl-pick:disabled { cursor: default; }
.md-game .cl-pick, .md-game .cl-run { -webkit-tap-highlight-color: transparent; }
.md-game .cl-pick kbd { position: absolute; z-index: 2; top: -13px; left: calc(50% - 13px); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink-3); border: 1px solid var(--line-2); font: 700 12px var(--sans); color: var(--muted); }
.md-game .cl-hand.picked .cl-pick:not(.chosen) { opacity: 0; transform: translateY(120px) rotate(-14deg) scale(.85); }
.md-game .cl-hand.picked .cl-pick:nth-child(3):not(.chosen) { transform: translateY(120px) rotate(14deg) scale(.85); }
.md-game .cl-pick.chosen { transform: translateY(-16px) scale(1.1); rotate: 0deg; }
.md-game .cl-pick.chosen .card-frame { box-shadow: 0 0 44px 2px var(--tier); }
@keyframes clDeal { from { opacity: 0; transform: translateY(70px) rotateY(100deg) scale(.8); } }
.md-game .cl-pw-line { display: grid; gap: 2px; }
.md-game .cl-pw-line small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.md-game .cl-pw { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--gold-2); }
.md-game .cl-pw .icon { width: 14px; height: 14px; }
.md-game .cl-pw.none { color: var(--faint); font-weight: 500; }
.md-game .cl-kb { font: 400 26px var(--serif); color: var(--faint); font-variant-numeric: tabular-nums; }
.md-game .won .cl-kb { color: var(--gold-2); }
.md-game .cl-pick.lost { opacity: .5; }
.md-game .cl-q { display: grid; grid-template-columns: minmax(170px, 260px) minmax(0, 1fr); gap: 14px 40px; align-items: center; width: 100%; max-width: 920px; }
.md-game .cl-qcard { position: relative; }
.md-game .cl-qcard .card { max-width: none; }
.md-game .cl-qside { display: grid; gap: 14px; }
.md-game .cl-qtop { display: flex; align-items: center; gap: 12px; }
.md-game .cl-qlabel { display: grid; justify-items: start; gap: 3px; min-width: 0; margin-right: auto; }
.md-game .cl-qlabel small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.md-game .cl-qlabel small .icon { width: 16px; height: 16px; color: #f0709e; }
.md-game .cl-qlabel b { font-family: var(--serif); font-size: 18px; }
.md-game .cl-qtop .ring, .md-game .cl-verdict { width: 56px; height: 56px; }
.md-game .cl .ring-fg { transition: stroke-dashoffset .1s linear, stroke .3s; }
.md-game .cl-verdict { display: grid; place-items: center; flex: none; border-radius: 50%; animation: clPop .4s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.md-game .cl-verdict.good { background: var(--good); color: #0c2416; }
.md-game .cl-verdict.bad { background: var(--bad); color: #2d0d07; }
.md-game .cl-verdict .icon { width: 28px; height: 28px; }
.md-game .cl-qtext { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; }
.md-game .cl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.md-game .cl-opts .kb-opt { min-height: 58px; }
.md-game .cl-opts .kb-opt.cut { opacity: .3; text-decoration: line-through; }
.md-game .on-question .cl-qtop, .md-game .on-question .cl-qtext, .md-game .on-question .kb-opt { animation: clUp .35s cubic-bezier(.2, .8, .2, 1) backwards; }
.md-game .on-question .cl-qtext { animation-delay: .06s; }
.md-game .on-question .kb-opt { animation: clOpt .32s calc(.1s + var(--i) * 40ms) cubic-bezier(.2, .9, .3, 1.1) backwards; }
.md-game .cl-opts .kb-opt:nth-child(odd) { --sx: -40px; }
.md-game .cl-opts .kb-opt:nth-child(even) { --sx: 40px; }
@keyframes clOpt { from { opacity: 0; transform: translateX(var(--sx)) scale(.94); } }
.md-game .cl-opts .right { animation: clRight .5s cubic-bezier(.2, 1.6, .4, 1); }
.md-game .cl-opts .wrong { animation: clShake .4s; }
@keyframes clRight { 40% { transform: scale(1.06); } }
.md-game .cl-run.hit .cl-qcard { animation: clCardWin .6s cubic-bezier(.2, 1.4, .4, 1); }
.md-game .cl-run.miss .cl-qcard { animation: clCardLose .7s forwards; }
@keyframes clCardWin { 40% { transform: translateY(-20px) rotate(-3deg) scale(1.07); } }
@keyframes clCardLose { 30% { transform: rotate(-6deg) translateX(-6px); } to { transform: rotate(3deg) translateY(10px) scale(.95); filter: saturate(.3) brightness(.75); } }
.md-game .on-question .boss .cl-qcard { animation: clDeal .6s cubic-bezier(.2, .9, .3, 1.15) backwards; }
@keyframes clUp { from { opacity: 0; transform: translateY(14px); } }
.md-game .cl-after { display: grid; justify-items: start; gap: 8px; animation: clUp .3s backwards; }
.md-game .cl-after p { font-size: 16px; }
.md-game .cl-after .good { color: var(--good); }
.md-game .cl-after .bad { color: #ff8f78; }
.md-game .cl-after small { font-size: 12px; color: var(--faint); }
.md-game .cl-flash { position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.md-game .cl-run.hit .cl-flash { background: radial-gradient(55% 60% at 30% 50%, rgba(243, 207, 106, .3), transparent 70%); animation: clFlash 1s ease-out; }
.md-game .cl-run.miss .cl-flash { background: radial-gradient(80% 80% at 50% 50%, transparent 35%, rgba(229, 101, 77, .4)); animation: clFlash .7s ease-out; }
.md-game .cl-run.miss { animation: clShake .45s; }
.md-game .cl-run.over { animation: clShake .45s, clOver 1.9s ease-in forwards; }
@keyframes clOver { to { filter: saturate(.15) brightness(.7); } }
@keyframes clFlash { 15% { opacity: 1; } }
@keyframes clShake { 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.md-game .cl-burst { position: absolute; z-index: 3; left: 50%; top: 50%; pointer-events: none; }
.md-game .cl-burst::before, .md-game .cl-burst i { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; opacity: 0; }
.md-game .cl-burst::before { border: 2px solid var(--gold-2); animation: clRing .7s ease-out; }
.md-game .cl-burst i { background: var(--gold-2); box-shadow: 0 0 10px var(--gold); animation: clBurst .85s cubic-bezier(.1, .7, .3, 1); }
@keyframes clRing { from { opacity: 1; } to { transform: scale(26); } }
@keyframes clBurst { from { opacity: 1; transform: rotate(var(--a)) scale(1.3); } to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.3); } }
.md-game .cl-bossin { display: grid; justify-items: center; gap: 10px; text-align: center; cursor: pointer; }
.md-game .cl-boss-crown { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(236, 79, 138, .35), transparent 70%); animation: clSlam .6s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.md-game .cl-boss-crown .icon { width: 66px; height: 66px; color: #f0709e; filter: drop-shadow(0 0 18px rgba(240, 112, 158, .8)); }
.md-game .cl-bossin small { font-size: 13px; font-weight: 650; color: var(--muted); }
.md-game .cl-bossin h2 { font-size: clamp(42px, 6vw, 66px); color: #ffd6e5; text-shadow: 0 0 40px rgba(236, 79, 138, .6); animation: clPop .5s .15s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.md-game .cl-bossin p { max-width: 36ch; color: var(--muted); }
@keyframes clSlam { from { opacity: 0; transform: scale(2.6) rotate(-20deg); } }
.md-game .on-boss .cl-run { animation: clShake .5s .12s; }
.md-game .is-boss .cl-fuse i { background: #f0709e; box-shadow: 0 0 14px #f0709e; }
@media (hover: none) {
.md-game .cl-pick kbd, .md-game .cl-opts kbd { display: none; }
}
@media (max-width: 1100px) {
.md-game .cl-home { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
}
@media (max-width: 760px) {
.md-game .tab-link-center { flex: 0 0 64px; margin-top: -24px; padding: 11px 0 2px; justify-content: space-between; gap: 0; color: var(--gold-ink); isolation: isolate; }
.md-game .tab-link-center .icon { width: 30px; height: 30px; }
.md-game .tab-link-center::before { content: ''; position: absolute; top: 0; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; z-index: -1; background: linear-gradient(180deg, #f7dc8a, #d9a43a); box-shadow: 0 0 0 5px #0e0f13, 0 8px 20px -6px rgba(226, 178, 60, .7); }
.md-game .tab-link-center span { color: var(--gold-2); }
.md-game .tab-link-center.on { color: var(--gold-ink); }
.md-game .tab-link-center.on .icon { filter: none; }
.md-game .tab-link-center.on::before { background: linear-gradient(180deg, #fff0bf, #e8b649); }
.md-game .cl-home { gap: 16px; }
.md-game .cl-hero { gap: 12px; padding: 26px 16px 20px; border-radius: 18px; }
.md-game .cl-big span { font-size: 16px; }
.md-game .cl-tiles { gap: 6px; }
.md-game .cl-tiles b { font-size: 16px; }
.md-game .cl-end > .cl-burst { top: 120px; }
.md-game .cl-run { gap: 12px; min-height: calc(100dvh - 180px); padding: 12px 12px 16px; border-radius: 20px; }
.md-game .cl-stage { gap: 14px; }
.md-game .cl-hud { grid-template-columns: auto 1fr auto; }
.md-game .cl-hearts { justify-self: center; gap: 4px; }
.md-game .cl-hearts .icon { width: 24px; height: 24px; }
.md-game .cl-floor { gap: 8px; }
.md-game .cl-floor b { font-size: 32px; }
.md-game .cl-ask-t b { font-size: 22px; }
.md-game .cl-ask .ring { width: 48px; height: 48px; }
.md-game .cl-praise { top: 10%; }
.md-game .cl-pick:nth-child(1) { rotate: -1.5deg; }
.md-game .cl-pick:nth-child(3) { rotate: 1.5deg; }
.md-game .cl-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.md-game .cl-pw-line small { display: none; }
.md-game .cl-pw { font-size: 12px; }
.md-game .cl-q { grid-template-columns: 104px minmax(0, 1fr); gap: 12px 14px; }
.md-game .cl-qside { display: contents; }
.md-game .cl-qtop { align-self: center; }
.md-game .cl-qtext, .md-game .cl-opts, .md-game .cl-after { grid-column: 1 / -1; }
.md-game .cl-qtop .ring, .md-game .cl-verdict { width: 48px; height: 48px; }
.md-game .cl-qlabel b { font-size: 16px; }
.md-game .cl-qtext { font-size: 19px; }
.md-game .cl-opts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.md-game .cl-opts .kb-opt { min-height: 52px; }
.md-game .cl-bossin h2 { font-size: 44px; }
}
.md-game .auc { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(91, 130, 214, .16), var(--ink-2) 55%); border: 1px solid rgba(127, 167, 240, .3); }
.md-game .auc.mine { border-color: rgba(226, 178, 60, .35); }
.md-game .auc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.md-game .auc-head > span { display: inline-flex; align-items: center; gap: 6px; }
.md-game .auc-head .icon { width: 15px; height: 15px; color: #9dbcff; }
.md-game .auc-time { font-variant-numeric: tabular-nums; color: var(--text); font-size: 14px; }
.md-game .auc-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.md-game .auc-now small { width: 100%; font-size: 13px; color: var(--muted); }
.md-game .auc-now b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--serif); font-size: 30px; color: var(--gold-2); }
.md-game .auc-now em { font-style: normal; font-size: 13px; color: var(--muted); }
.md-game .auc-form { display: flex; gap: 8px; }
.md-game .auc-form .sell-input { flex: 1; height: 46px; font-size: 18px; }
.md-game .auc-form .sell-input input { font-size: 20px; }
.md-game .auc-form .btn { height: 46px; }
.md-game .auc-lead { color: #8ad7a8; font-weight: 650; font-size: 14px; }
.md-game .auc-hist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.md-game .auc-hist li { display: grid; grid-template-columns: 1fr auto 72px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.md-game .auc-hist li:first-child span { font-weight: 700; }
.md-game .auc-hist b { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-2); }
.md-game .auc-hist b .wikey { width: 13px; height: 13px; }
.md-game .auc-hist small { text-align: right; color: var(--faint); font-size: 12px; }
.md-game .tr-list { display: grid; gap: 12px; }
.md-game .tr-item { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); }
.md-game .tr-item.your-turn { border-color: rgba(226, 178, 60, .45); background: linear-gradient(160deg, rgba(226, 178, 60, .08), var(--ink-2) 50%); }
.md-game .tr-item header { display: flex; align-items: center; gap: 10px; }
.md-game .tr-state { margin-left: auto; font-size: 13px; color: var(--muted); }
.md-game .tr-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.md-game .tr-sides h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-family: var(--sans); }
.md-game .tr-arrow { align-self: center; color: var(--faint); }
.md-game .tr-arrow .icon { width: 18px; height: 18px; }
.md-game .tr-cards { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.md-game .tr-card { width: 44px; }
.md-game .tr-card .card { pointer-events: none; }
.md-game .tr-keys { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 99px; background: rgba(226, 178, 60, .12); color: var(--gold-2); font-weight: 700; font-size: 13px; }
.md-game .tr-keys .wikey { width: 13px; height: 13px; }
.md-game .tr-nothing { color: var(--faint); font-size: 13px; }
.md-game .tr-item footer { display: flex; justify-content: flex-end; gap: 8px; }
.md-game .tr-empty { margin: 0 0 6px; }
.md-game .tr-hist { margin-top: 10px; font-size: 14px; }
.md-game .tr-hist summary { cursor: pointer; color: var(--muted); }
.md-game .tr-hist ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 1px; border-radius: 12px; overflow: hidden; background: var(--line); }
.md-game .tr-hist li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px 12px; background: var(--ink-2); }
.md-game .tr-hist li span { color: var(--muted); }
.md-game .tr-hist li small { color: var(--faint); }
.md-game .chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); color: var(--text); font-size: 14px; white-space: nowrap; }
.md-game .chip:hover { text-decoration: none; border-color: var(--line-2); }
.md-game .chip .icon { width: 17px; height: 17px; color: var(--gold); }
.md-game .chip b { font-variant-numeric: tabular-nums; }
.md-game .chip small { display: none; }
.md-game .chip .rune-coin { width: 22px; height: 22px; font-size: 12px; }
.md-game .chip.big { height: 44px; padding: 0 16px; font-size: 16px; }
.md-game .chip.big b { font-family: var(--serif); font-size: 20px; }
.md-game .chip.mode { height: 30px; font-size: 13px; font-weight: 700; }
.md-game .chip-packs.ready { border-color: rgba(226, 178, 60, .55); box-shadow: 0 0 16px -6px var(--gold); }