* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #160f2e; touch-action: none; overscroll-behavior: none; position: fixed; inset: 0; }
#app { position: fixed; inset: 0; font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Trebuchet MS", system-ui, sans-serif; color: #fff8e8; overflow: hidden; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
img { image-rendering: pixelated; -webkit-user-drag: none; }
#bg { position: absolute; inset: 0; --bgc: #2b6fb3; background: radial-gradient(120% 70% at 50% 30%, color-mix(in srgb, var(--bgc) 75%, #fff 8%), #160f2e 78%); transition: background 1s; }
#bg::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(255,255,255,.035) 0 10deg, transparent 10deg 20deg); animation: spin 90s linear infinite; }
#bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(10,6,24,.7)); }
@keyframes spin { to { transform: rotate(360deg); } }
#motes, #fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fx { z-index: 50; }
.screen { position: absolute; inset: 0; padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 10px); display: flex; flex-direction: column; z-index: 2; }

/* buttons */
.btn { font-weight: 900; font-size: 17px; padding: 12px 16px; border-radius: 14px; border: 3px solid #1b1230; background: linear-gradient(#ffffff, #ddd4f7); color: #2b1d2e; box-shadow: 0 4px 0 #1b1230, 0 6px 14px rgba(0,0,0,.35); transition: transform .08s, box-shadow .08s, opacity .2s; line-height: 1.05; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1b1230; }
.btn.go { background: linear-gradient(#fff3a0, #ffc04d 55%, #ff9a3d); }
.btn:disabled { opacity: .45; filter: grayscale(.6); }
.btn small { display: block; font-size: 11px; opacity: .7; }
.btn.big { font-size: 22px; padding: 16px 20px; }
.btn.sm { font-size: 14px; padding: 9px 14px; }

/* title */
.t-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: relative; }
.t-fan { display: flex; justify-content: center; height: 150px; margin-bottom: 6px; }
.t-fan .card { font-size: 10.5px; margin: 0 -16px; transform: rotate(var(--r)); animation: bob 3s ease-in-out infinite; }
.t-fan .card:nth-child(2) { margin-top: -18px; z-index: 2; animation-delay: -1s; }
.t-fan .card:nth-child(3) { animation-delay: -2s; }
@keyframes bob { 50% { translate: 0 -8px; } }
.logo { margin: 0; text-align: center; line-height: .86; font-weight: 1000; letter-spacing: .02em; }
.logo span { display: block; font-size: 54px; color: #fff3b0; -webkit-text-stroke: 3px #1b1230; paint-order: stroke fill; text-shadow: 0 5px 0 #1b1230, 0 0 30px rgba(255,190,80,.6); }
.logo .l2 { font-size: 76px; background: linear-gradient(#fff6c0, #ffc04d 50%, #ff6b3d); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(0 4px 0 #1b1230) drop-shadow(0 0 2px #1b1230); animation: glow 2.4s ease-in-out infinite alternate; }
@keyframes glow { to { filter: drop-shadow(0 4px 0 #1b1230) drop-shadow(0 0 18px rgba(255,140,60,.8)); } }
.tag { margin: 0; text-align: center; font-weight: 800; opacity: .9; font-size: 15px; max-width: 300px; }
.t-btns { display: flex; flex-direction: column; gap: 10px; width: 240px; margin-top: 10px; }
.t-meta { display: flex; gap: 14px; font-size: 12px; opacity: .85; margin-top: 8px; }
.t-meta b { color: #ffd23f; }
.mute { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25); font-size: 20px; }
.ver { position: absolute; bottom: 0; font-size: 10px; opacity: .4; }

/* hud */
#game { gap: 6px; }
.hud { display: flex; flex-direction: column; gap: 6px; }
.h-row { display: flex; gap: 6px; align-items: stretch; }
.h-round, .h-target, .pill, .h-score { background: linear-gradient(rgba(30,20,60,.85), rgba(20,12,40,.9)); border: 2px solid rgba(255,255,255,.18); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 8px rgba(0,0,0,.3); }
.h-round { flex: 1; padding: 5px 10px; display: flex; flex-direction: column; min-width: 0; }
.h-round.boss { border-color: #ff5a6a; background: linear-gradient(#5a1430, #2a0a1a); }
.h-round b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; font-weight: 800; }
.h-target { padding: 5px 12px; text-align: right; display: flex; flex-direction: column; }
.h-target b { font-size: 19px; color: #ff9a7a; }
.h-menu { width: 46px; border-radius: 12px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 20px; }
.h-score { position: relative; height: 38px; overflow: hidden; }
.h-score .bar { position: absolute; inset: 0; }
.h-score .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3a8dff, #7fe3ff); transition: width .7s cubic-bezier(.2,.9,.3,1); box-shadow: 0 0 18px rgba(127,227,255,.6); opacity: .55; }
.h-score .bar.full i { background: linear-gradient(90deg, #ffb02e, #ffe14d); opacity: .75; }
.h-score span { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 12px; }
.h-score b { font-size: 24px; text-shadow: 0 2px 0 #0008; }
.h-pills { display: flex; gap: 6px; }
.pill { flex: 1; padding: 3px 6px; text-align: center; display: flex; flex-direction: column; }
.pill b { font-size: 18px; }
.pill.hands b { color: #7fc8ff; } .pill.disc b { color: #ff8a8a; } .pill.gold b { color: #ffd23f; } .pill.deck b { color: #c5b8ff; }
.pill.big { flex: none; padding: 4px 14px; } .pill.big b { font-size: 24px; }
.bossrule { font-size: 12px; font-weight: 900; text-align: center; color: #ffd0d6; background: rgba(140,20,50,.55); border: 1px solid #ff5a6a; border-radius: 10px; padding: 4px 8px; animation: bpulse 1.6s ease-in-out infinite alternate; }
@keyframes bpulse { to { box-shadow: 0 0 14px rgba(255,90,106,.6); } }

.relics { display: flex; gap: 6px; justify-content: center; }
.relic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 35% 30%, #5a4aa0, #241a4a); border: 2px solid #b8a8ff; box-shadow: 0 3px 0 #120a28, inset 0 1px 0 rgba(255,255,255,.3); }
.relic.empty { background: rgba(255,255,255,.05); border: 2px dashed rgba(255,255,255,.2); box-shadow: none; }
.relic.trig { animation: trig .4s ease; }
@keyframes trig { 40% { transform: scale(1.35) rotate(-8deg); box-shadow: 0 0 20px #ffd23f; border-color: #ffd23f; } }

/* stage */
.stage { position: relative; flex: 1; min-height: 170px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 18px; background: radial-gradient(100% 90% at 50% 40%, rgba(255,255,255,.08), rgba(0,0,0,.25)); border: 2px solid rgba(255,255,255,.1); }
.hand-name { text-align: center; font-weight: 1000; font-size: 22px; text-shadow: 0 2px 0 #0008; display: flex; align-items: baseline; gap: 8px; }
.hand-name small { font-size: 12px; color: #ffd23f; opacity: 1; }
.cm { display: flex; align-items: center; gap: 8px; }
.chips, .mult { min-width: 110px; text-align: center; font-size: 30px; font-weight: 1000; padding: 4px 12px; border-radius: 14px; border: 3px solid #1b1230; box-shadow: 0 4px 0 #1b1230; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.chips { background: linear-gradient(#7fd0ff, #2a7de0); }
.mult { background: linear-gradient(#ff9a8a, #e0303a); }
.mult.hot { animation: hot .5s ease-in-out infinite alternate; }
@keyframes hot { to { box-shadow: 0 4px 0 #1b1230, 0 0 22px #ff6b3d; } }
.x { font-size: 28px; font-weight: 1000; color: #ffe9a8; }
.played { flex: 1; display: flex; justify-content: center; align-items: center; gap: 4px; width: 100%; }
.card.mini { font-size: 6.6px; height: 12.6em; }
.card.mini .c-abl { font-size: 1em; }
.played .card.fly { animation: fly .45s cubic-bezier(.2,1.3,.4,1) backwards; }
@keyframes fly { from { transform: translateY(240px) scale(1.3) rotate(10deg); opacity: 0; } }
.played .card.scoring { transform: translateY(-6px); box-shadow: 0 0 0 2px #fff, 0 0 18px 4px rgba(255,220,120,.7); }
.played .card.dim { filter: brightness(.5) grayscale(.5); transform: translateY(6px) scale(.92); }
.played .card.silenced { filter: grayscale(1) brightness(.6); }
.card.hit { animation: hitp .3s ease; }
@keyframes hitp { 40% { transform: translateY(-16px) scale(1.15) rotate(-4deg); } }
.total { position: absolute; left: 50%; top: 52%; translate: -50% -50%; font-size: 56px; font-weight: 1000; color: #fff; -webkit-text-stroke: 3px #1b1230; paint-order: stroke fill; text-shadow: 0 5px 0 #1b1230; opacity: 0; pointer-events: none; }
.total.show { animation: totin .35s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes totin { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.total.fire { color: #ffe14d; animation: totin .35s forwards, fire .25s ease-in-out infinite alternate; }
@keyframes fire { to { text-shadow: 0 5px 0 #1b1230, 0 0 30px #ff6b3d, 0 0 60px #ffb02e; transform: scale(1.08) rotate(-2deg); } }
.total.suck { transition: transform .6s cubic-bezier(.6,0,.8,.4), opacity .6s; transform: translateY(-260px) scale(.3) !important; opacity: 0 !important; animation: none; }
.info { min-height: 40px; font-size: 12.5px; line-height: 1.3; text-align: center; padding: 5px 10px; border-radius: 12px; background: rgba(10,6,24,.55); border: 1px solid rgba(255,255,255,.12); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.info i { color: #ffd23f; font-style: normal; font-weight: 900; }
.info.flash { animation: flash .3s; }
@keyframes flash { from { background: rgba(255,255,255,.25); } }

/* hand */
.handgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 6px 6px; justify-items: center; padding-top: 10px; }
.handgrid .card { font-size: min(8.6px, 2.2vw); width: 10em; height: 12.6em; transition: transform .18s cubic-bezier(.2,1.4,.4,1), box-shadow .18s, opacity .25s; cursor: pointer; }
.handgrid .card.sel { transform: translateY(-10px) scale(1.04); box-shadow: 0 0 0 .25em #fff, 0 0 1.2em .4em rgba(255,220,120,.95), 0 .6em 1em rgba(0,0,0,.5); z-index: 2; }
.handgrid .card.deal { animation: deal .42s cubic-bezier(.2,1.3,.4,1) backwards; }
@keyframes deal { from { transform: translate(120px, 200px) rotate(30deg) scale(.6); opacity: 0; } }
.handgrid .card.gone { opacity: 0; transform: translateY(-80px) scale(.7); }
.handgrid .card.toss { transform: translate(-30px, 160px) rotate(-30deg); opacity: 0; transition: transform .33s ease-in, opacity .33s; }
.c-abl { font-size: .64em; font-weight: 900; text-align: center; color: #5a3a2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-cost { font-size: 1.15em !important; width: 1.7em !important; height: 1.7em !important; }
.actions { display: grid; grid-template-columns: .8fr 1fr 1.4fr; gap: 8px; padding-top: 6px; }
.actions .btn { padding: 12px 6px; }
.btn.disc { background: linear-gradient(#ffd0d0, #ff8a8a); }
.btn.sort { font-size: 14px; }
.shake { animation: shake .4s; }
@keyframes shake { 20% { translate: var(--sh) 0; } 40% { translate: calc(var(--sh) * -1) 2px; } 60% { translate: calc(var(--sh) * .6) -2px; } 80% { translate: calc(var(--sh) * -.4) 0; } }
.pop { animation: popa .28s ease; }
@keyframes popa { 40% { transform: scale(1.22); } }

/* floats */
.float { position: absolute; z-index: 60; translate: -50% 0; font-weight: 1000; font-size: 22px; white-space: nowrap; pointer-events: none; -webkit-text-stroke: 4px #1b1230; paint-order: stroke fill; animation: floatup 1.05s cubic-bezier(.2,1,.4,1) forwards; }
.float.c { color: #7fd0ff; } .float.m { color: #ff8a8a; } .float.x { color: #ffe14d; font-size: 28px; } .float.g { color: #ffd23f; } .float.bad { color: #bbb; }
.float.sub { font-size: 12px; color: #fff; -webkit-text-stroke: 3px #1b1230; }
@keyframes floatup { 0% { transform: translateY(14px) scale(.5); opacity: 0; } 20% { transform: translateY(0) scale(1.2); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-34px) scale(1); opacity: 0; } }

/* banner / toast / modal */
#banner { position: absolute; left: 0; right: 0; top: 38%; z-index: 40; text-align: center; padding: 18px 10px; background: linear-gradient(90deg, transparent, rgba(20,12,40,.92) 15%, rgba(20,12,40,.92) 85%, transparent); transform: scaleY(0); opacity: 0; pointer-events: none; }
#banner.show { animation: bnr 1.5s ease forwards; }
#banner.boss { background: linear-gradient(90deg, transparent, rgba(110,10,40,.92) 15%, rgba(110,10,40,.92) 85%, transparent); }
#banner.win .bn-a { color: #ffe14d; }
.bn-a { font-size: 32px; font-weight: 1000; -webkit-text-stroke: 3px #1b1230; paint-order: stroke fill; }
.bn-b { font-size: 15px; font-weight: 800; opacity: .9; margin-top: 4px; }
@keyframes bnr { 0% { transform: scaleY(0); opacity: 0; } 12%, 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
#toast { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 90px); translate: -50% 0; z-index: 45; background: #1b1230; border: 2px solid #ffd23f; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 14px; opacity: 0; pointer-events: none; white-space: nowrap; }
#toast.show { animation: tst 1.8s ease forwards; }
@keyframes tst { 10%, 80% { opacity: 1; transform: translateY(-8px); } }
#modal { position: absolute; inset: 0; z-index: 30; background: rgba(8,4,20,.7); display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.m-box { width: 100%; max-height: 100%; overflow: auto; background: linear-gradient(#2e2160, #1a1238); border: 3px solid #b8a8ff; border-radius: 20px; padding: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.6); animation: mIn .3s cubic-bezier(.2,1.4,.4,1); touch-action: pan-y; }
@keyframes mIn { from { transform: scale(.8); opacity: 0; } }
.m-box h2 { margin: 0 0 8px; font-size: 24px; color: #ffe9a8; }
.m-box p { margin: 6px 0; font-size: 14px; line-height: 1.4; }
.m-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ht, .pay { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 800; margin-top: 8px; }
.ht td, .pay td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hc { color: #7fd0ff; } .hm { color: #ff8a8a; }
.pay td:last-child { text-align: right; color: #ffd23f; } .pay .sum td { font-size: 17px; border: none; }
.small { font-size: 12px !important; opacity: .7; }
.deckgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; justify-items: center; }
.deckgrid .card { font-size: 5.8px; }

/* shop */
#shop { gap: 8px; }
.s-head { display: flex; justify-content: space-between; align-items: center; }
.s-head h2 { margin: 0; font-size: 30px; color: #ffe9a8; -webkit-text-stroke: 2px #1b1230; paint-order: stroke fill; text-shadow: 0 3px 0 #1b1230; }
.s-next { font-size: 14px; font-weight: 700; text-align: center; padding: 6px; border-radius: 12px; background: rgba(10,6,24,.5); display: flex; flex-direction: column; gap: 4px; }
.s-sec { font-weight: 900; font-size: 13px; text-align: center; opacity: .85; }
.offers { flex: 1; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.offers.re .offer { animation: oin .35s cubic-bezier(.2,1.4,.4,1) backwards; }
.offer { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 14px; background: linear-gradient(rgba(46,33,96,.92), rgba(26,18,56,.92)); border: 2px solid rgba(184,168,255,.5); animation: oin .35s cubic-bezier(.2,1.4,.4,1) backwards; flex: 1; min-height: 0; max-height: 108px; }
.offer:nth-child(2) { animation-delay: .05s; } .offer:nth-child(3) { animation-delay: .1s; } .offer:nth-child(4) { animation-delay: .15s; } .offer:nth-child(5) { animation-delay: .2s; }
@keyframes oin { from { transform: translateX(60px); opacity: 0; } }
.offer.sold { opacity: .4; }
.o-ic { width: 54px; height: 54px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 30px; background: radial-gradient(circle at 35% 30%, #5a4aa0, #241a4a); border: 2px solid #b8a8ff; }
.o-card .card { font-size: 5.6px; }
.o-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.o-t b { font-size: 14px; } .o-t span { font-size: 12px; opacity: .9; line-height: 1.25; } .o-t span i { color: #ffd23f; font-style: normal; font-weight: 900; }
.tag { font-style: normal; font-size: 10px; font-weight: 900; align-self: flex-start; padding: 1px 6px; border-radius: 6px; text-transform: uppercase; }
.tag.r { background: #6a4aff; } .tag.m { background: #2f9a4a; } .tag.t { background: #c06a10; }
.btn.buy { flex: none; font-size: 15px; padding: 9px 10px; min-width: 64px; }
.s-btns { display: grid; grid-template-columns: 1fr .8fr 1.4fr; gap: 8px; }

/* over */
.o-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.o-wrap h1 { margin: 0; font-size: 46px; font-weight: 1000; -webkit-text-stroke: 3px #1b1230; paint-order: stroke fill; text-shadow: 0 5px 0 #1b1230; }
.o-wrap.won h1 { color: #ffe14d; } .o-wrap.lost h1 { color: #ff9a8a; }
.o-sub { margin: 0; font-weight: 800; opacity: .9; }
.o-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.o-stats div { background: rgba(10,6,24,.55); border: 2px solid rgba(255,255,255,.15); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; }
.o-stats b { font-size: 24px; color: #ffd23f; } .o-stats i { font-size: 12px; opacity: .8; }
.o-relics { font-size: 30px; display: flex; gap: 6px; }
.o-wrap .btn { width: 240px; }
.handgrid .card.gone { visibility: hidden; transition: none; }
.s-next { display: block; }
.s-next .bossrule { margin-top: 4px; }
#shop .relic { width: 40px; height: 40px; font-size: 22px; }
.offers { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 2px; }
.offer { flex: none; min-height: 74px; max-height: none; }
.o-card .card { font-size: 5px; }