.topbar { display:grid; grid-template-columns:1fr minmax(0,auto) 1fr; gap:0; }
.topbar > .icon-button { justify-self:start; }
.top-title { grid-column:2; min-width:0; line-height:1.15; }
.top-actions { grid-column:3; justify-self:end; }
.results-screen { width:100%; max-width:1100px; margin-inline:auto; padding:1cqh 0 3cqh; }
.result-actions,.result-stats { margin-inline:auto; }
.home-screen { gap:2cqh; }
.home-more { width:100%; display:grid; grid-template-columns:1fr 1fr auto; gap:12px; }
.mini-mode,.shop-launch { min-width:0; display:flex; align-items:center; gap:11px; background:linear-gradient(175deg,#3f7bc9,#204778); border:2px solid #0c2048; border-radius:10px; padding:7px 12px; box-shadow:inset 0 2px #a4dfff66,0 4px #0b204d; transition:transform .15s,filter .15s; }
.mini-mode.skins { background:linear-gradient(175deg,#9556df,#492270); }
.mini-mode:hover,.shop-launch:hover { transform:translateY(2px); filter:brightness(1.08); }
.mini-mode > img,.shop-launch > img { width:clamp(28px,5cqh,52px); height:clamp(28px,5cqh,52px); object-fit:contain; }
.mini-mode > span { text-align:left; flex:1; }
.mini-mode b,.mini-mode small { display:block; }
.mini-mode b { font-size:clamp(13px,2.3cqh,21px); }
.mini-mode small { font-size:clamp(10px,1.55cqh,14px); color:#cbeeff; }
.mini-mode i { font:28px/1 Lilita; color:#d5eaff; }
.home-extras { display:flex; gap:10px; }
.home-extras .icon-button { height:100%; min-height:0; }
.shop-launch > span { display:flex; align-items:center; gap:5px; font-size:1.2rem; }
.shop-launch > span img { width:23px; height:23px; }
.daily-chooser { width:min(100%,600px); text-align:center; display:grid; gap:.65cqh; }
.variant-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; background:#112a57df; border:2px solid #102447; }
.variant-tabs button { position:relative; display:flex; align-items:center; justify-content:center; gap:7px; padding:.75cqh 5px; min-height:40px; border-radius:7px; font-size:clamp(11px,2cqh,19px); background:linear-gradient(#3266af,#21487d); color:#cde6ff; }
.variant-tabs button[aria-pressed=true] { background:linear-gradient(#ffe975,#ffb625); color:#fff8e4; box-shadow:inset 0 2px #fff9b7,0 2px #7d440a; }
.variant-tabs button img { width:clamp(16px,2.9cqh,30px); height:clamp(16px,2.9cqh,30px); }
.variant-tabs button small { color:#73ffbb; }
.daily-chooser > p { color:#ddf6ff; font-size:clamp(11px,1.7cqh,16px); }
.daily-chooser > small { color:#fff39c; font-size:clamp(10px,1.55cqh,14px); }
.difficulty-screen { gap:2cqh; }
.difficulty-card:disabled { opacity:.55; }
.puzzle-start { display:grid; justify-items:center; width:min(100%,515px); padding:clamp(16px,3cqh,29px); gap:1.5cqh; border:2px solid #173e83; border-radius:16px; background:linear-gradient(#2c87daaa,#173d81ed); text-align:center; box-shadow:inset 0 3px #99f3ff49,0 5px #091f4f; }
.puzzle-start > img { width:clamp(68px,18cqh,145px); height:clamp(68px,18cqh,145px); filter:drop-shadow(0 6px 0 #081f4c44); }
.puzzle-start > p { font-size:clamp(15px,2.5cqh,25px); }
.puzzle-start > small { color:#bce9ff; }
.puzzle-start .action { width:min(100%,310px); }
.action:disabled { opacity:.55; }
.wordle-legend .direction,.trait-cell .direction { display:block; width:15px; height:18px; flex:none; background:#fff4bd; border:0; border-radius:0; clip-path:polygon(50% 0,100% 43%,70% 43%,70% 100%,30% 100%,30% 43%,0 43%); }
.wordle-legend .direction { width:10px; height:11px; }
.direction.down { transform:rotate(180deg); }
.trait-cell.miss:has(.direction) { background:linear-gradient(#f28c78,#ce4058); }
.gem-reward img,.daily-payout img { width:31px; height:31px; }
.daily-payout { width:max-content; max-width:100%; margin:7px auto; display:flex; align-items:center; gap:8px; padding:6px 13px; border:2px solid #6ce7c5; border-radius:10px; background:linear-gradient(#137986,#134977); font-size:clamp(11px,1.9cqh,17px); }
.daily-payout b { color:#fcf69c; font-size:1.3em; }
.reward-actions.time-controls { gap:5px; }
.time-controls button:disabled,.reward-wordle:disabled { opacity:.45; }
.revive-offer > span { font-size:clamp(11px,1.6cqh,16px); color:#bce3ff; }
.weekly-caption { color:#b7ecff; text-align:center; padding:.6rem; }
.shop-wallet,.achievement-total { display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 12px; margin:12px auto; width:max-content; max-width:100%; background:#132b62; border:2px solid #3175c9; border-radius:10px; }
.shop-wallet > img,.achievement-total > img { width:32px; height:32px; }
.shop-wallet > b,.achievement-total > b { font-size:23px; color:#ffe475; }
.shop-wallet p { font-size:.85rem; color:#ccefff; }
.boost-grid,.achievement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; padding:0 14px 20px; }
.boost-card { display:grid; justify-items:center; gap:8px; text-align:center; border:2px solid #112659; border-radius:12px; padding:14px; background:radial-gradient(ellipse at 50% 30%,#27bfe8,#19509b 75%); box-shadow:inset 0 2px #8cedff99,0 4px #0d244f; }
.boost-card.attempt { background:radial-gradient(ellipse at 50% 30%,#9e63ee,#53289c 75%); }
.boost-art { position:relative; }
.boost-art img { width:72px; height:72px; }
.boost-art b { position:absolute; bottom:0; right:-15px; font-size:27px; color:#ffe879; }
.boost-card p { font-size:14px; color:#e1ebff; }
.boost-stock { color:#bceeff; font-size:13px; }
.boost-card button { width:100%; }
.boost-card button span { display:flex; justify-content:center; align-items:center; gap:7px; }
.boost-card button img { width:23px; height:23px; }
.achievements-dialog { max-width:850px; }
.achievement-card { display:grid; align-items:center; grid-template-columns:47px 1fr auto; gap:9px; background:linear-gradient(#2f5089,#172d59); padding:11px 9px; border:2px solid #0e2550; border-radius:10px; box-shadow:inset 0 1px #86bfff80; }
.achievement-card.earned { background:linear-gradient(#257963,#163e51); border-color:#6ad9ae; }
.achievement-icon img { width:45px; height:45px; }
.achievement-card:not(.earned) img { opacity:.65; filter:saturate(.7); }
.achievement-card h3 { font-size:clamp(13px,2.1cqh,19px); }
.achievement-card p { font-size:clamp(11px,1.55cqh,15px); color:#cee6ff; margin-top:3px; }
.achievement-status { font-size:13px; min-width:1.3em; color:#ffe279; }
.earned .achievement-status { color:#7bffad; }
.unlock-shade { background:#050e29ce; backdrop-filter:blur(6px); }
.unlock-card { width:min(92vw,480px); max-height:94dvh; padding:15px 18px 23px; text-align:center; overflow:auto; isolation:isolate; position:relative; display:grid; justify-items:center; gap:8px; background:radial-gradient(ellipse at 50% 56%,#24d8e5,#1563c8 62%,#213780); border:3px solid #7ef3ff; border-radius:20px; box-shadow:0 8px 0 #072550,0 30px 90px #030b26ad; animation:unlock-pop .48s cubic-bezier(.18,.85,.26,1.22) both; }
.unlock-rays { position:absolute; width:190%; aspect-ratio:1; inset:50% auto auto 50%; translate:-50% -50%; z-index:-1; background:repeating-conic-gradient(#d1faff44 0 10deg,transparent 10deg 20deg); mask-image:radial-gradient(circle,#000,transparent 62%); animation:rays 24s linear infinite; }
.unlock-card h2 { font-size:clamp(22px,4.2cqh,36px); color:#fff599; }
.unlock-emblem img { width:51px; height:51px; }
.unlock-art img { width:min(70vw,305px); height:clamp(125px,33dvh,280px); filter:drop-shadow(0 8px 0 #113c8366); animation:unlock-pop .65s .10s cubic-bezier(.18,.85,.26,1.22) both; }
.unlock-card strong { font-size:clamp(20px,3.8cqh,33px); }
.unlock-card .action { width:min(100%,270px); margin-top:8px; }
@keyframes unlock-pop { from { opacity:0; transform:translateY(32px) scale(.82); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-aspect-ratio: 4/5) {
 .topbar { height:66px; min-height:66px; }
 .top-title { max-width:calc(100vw - 206px); font-size:clamp(12px,3.9vw,20px); }
 .top-title:has(.header-logo) { max-width:calc(100vw - 130px); }
 .top-actions { gap:5px; }
 .top-actions .icon-button { width:41px; min-width:41px; height:41px; min-height:41px; }
 .home-more { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .home-extras { grid-column:1/-1; justify-content:center; min-height:46px; }
 .mini-mode { gap:4px; padding:6px; }
 .mini-mode > img { width:32px; height:32px; }
 .mini-mode i { display:none; }
 .home-screen { gap:18px; }
 .difficulty-screen { gap:18px; }
 .results-screen { min-height:calc(100dvh - 75px); }
 .result-actions { width:100%; }
 .achievement-grid { grid-template-columns:1fr; }
 .boost-grid { gap:8px; padding-inline:8px; }
 .boost-card { padding:10px 6px; }
 .boost-card h3 { font-size:14px; }
 .boost-card p { font-size:12px; }
 .shop-wallet p { font-size:12px; }
 .boost-card .action { font-size:13px; }
}
@media (max-height:535px) and (min-aspect-ratio:4/5) {
 #app { overflow-y:auto; overscroll-behavior:contain; }
 .home-screen,.difficulty-screen,.results-screen { min-height:83cqh; height:auto; padding:8px 0 22px; }
 .home-more { gap:8px; }
 .unlock-card { gap:4px; padding:8px 15px 13px; }
 .unlock-emblem img { width:32px; height:32px; }
}
@media (prefers-reduced-motion:reduce) {
 .unlock-card,.unlock-art img,.unlock-rays { animation:none; }
}