/* Last Five interface: shared surfaces and controls, without changing play input. */
:root{--ui-ink:#eff7ff;--ui-muted:#aac2d8;--ui-line:#7fa9cf42;--ui-gold:#ffd17a;--ui-cyan:#79dcf4;--ui-panel:#10253d;--ui-radius:18px;--ui-shadow:0 18px 60px #02091780}
button,input,select,textarea{-webkit-tap-highlight-color:transparent}
:is(button,input,select,textarea):focus-visible{outline:2px solid var(--ui-gold);outline-offset:3px}
button:disabled{cursor:default}
#home button:not(:disabled),#modal button:not(:disabled),#waiting button:not(:disabled){transition:background-color .14s,border-color .14s,box-shadow .14s}
#home .top-actions .icon-button{background:#183149;border:1px solid var(--ui-line);box-shadow:inset 0 1px #ffffff12;border-radius:14px}
.ui-icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
#home .home-grid{column-gap:0}
#home .hero-glow{border:1px solid #73d8ed38;box-shadow:inset 0 0 48px #238eb51c,0 0 60px #2f448926}
#home .skin-controls{padding:7px 10px;border:1px solid #779bb72b;border-radius:17px;background:#09182b80;gap:20px}
#home .skin-controls button{background:#1b3951;color:#ddf7ff;border:1px solid #73bdd658;box-shadow:inset 0 1px #ffffff16;border-radius:11px;min-width:40px;min-height:40px}
#home .skin-controls .eyebrow{color:#93bdd3;font-size:8px;letter-spacing:1.8px}
#home .skin-controls strong{color:#fff1cf}
#home h1{letter-spacing:-.6px}
#home #online{background:linear-gradient(110deg,#ffe29f,#ffbd54 75%,#ffac42);border:1px solid #ffe3a9;border-bottom:4px solid #bb722b;border-radius:16px;box-shadow:0 7px 26px #ffa74222,inset 0 1px #ffffff70;color:#17223b}
#home #online>span:last-child{display:grid;place-items:center;border-radius:10px;background:#82421415;width:32px;height:32px;font-size:20px}
#home #practice{color:#d5ebfa;background:linear-gradient(110deg,#18374f,#142a42);border-color:#6485a653;border-radius:13px;box-shadow:inset 0 1px #ffffff0c}
#home .collection-row button{display:flex;justify-content:center;align-items:center;gap:8px;background:#101f34;border:1px solid #748cab40;border-radius:13px;color:#bdd9ed;box-shadow:inset 0 1px #ffffff08}
#home .collection-row .ui-icon{width:19px;height:19px;color:#90d9ed}
#home .collection-row #leaderboardButton{border-color:#bc934752}
#home .collection-row #leaderboardButton .ui-icon{color:var(--ui-gold)}
#home .top-actions .google{color:#d8ebf8;border-color:#6dabc565;background:#152e45}
/* One visual language for every dialog, including account, store and results. */
#modal.modal{padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#030916bd;backdrop-filter:none}
#modal .modal-card{border:1px solid #7aafd765;border-radius:22px;background:radial-gradient(ellipse at 0 0,#24557748,transparent 58%),linear-gradient(145deg,#142b46,#101c34 75%,#20223e);box-shadow:inset 0 1px #bdddf32b,var(--ui-shadow);color:var(--ui-ink)}
#modal #modalTitle{color:#fff0cc;padding-inline-end:44px;margin-inline:0;letter-spacing:-.3px}
#modal #closeModal{display:grid;place-items:center;width:40px;height:40px;min-height:40px;min-width:40px;padding:0;top:8px;inset-inline-end:10px;inset-inline-start:auto;border:1px solid #7594b443;border-radius:12px;background:#152d46;color:#cce6f7;font-size:26px;line-height:1;z-index:2}
#modal #modalBody{scrollbar-width:thin;scrollbar-color:#53879f #11253c;overscroll-behavior:contain}
#modal #modalBody>p{color:var(--ui-muted)}
#modal #modalActions{gap:8px;padding-top:10px;border-top:1px solid #6586a22c}
#modal #modalActions:empty{display:none}
#modal :is(.primary,.secondary){border-radius:11px;line-height:1.4;box-shadow:inset 0 1px #ffffff20}
#modal .primary{background:linear-gradient(115deg,#ffdd91,#ffba56);color:#17283f;border-color:#f5cf87;border-bottom-color:#b77931}
#modal .secondary{background:linear-gradient(115deg,#214760,#1b334d);color:#d9f0ff;border-color:#6c9eba57}
#modal #modalActions>button{min-height:40px;padding:9px 15px;font-size:12px}
#modal :is(input:not([type=checkbox]),select,textarea){background:#0c1e34;border-color:#6b93b958;color:#eff8ff;border-radius:10px}
#modal input[type=checkbox]{accent-color:#62cbe2;flex:none}
#modal .text-button{color:#b8e6f6;text-underline-offset:4px}
#modal :is(.account-note,.social-load-status){color:#e5d3a6;border:1px solid #c99b4840;background:#6d552425}
#modal :is(.collection-header,.social-header,.wallet-header,.monthly-summary){background:linear-gradient(110deg,#1b425c,#21344f);border-color:#6ab7d445;box-shadow:inset 0 1px #ffffff10;border-radius:13px}
#modal :is(.collection-tabs,.social-tabs,.shop-tabs,.rank-filters) button{background:#132d46;border-color:#6c96b643;color:#b9d8ec;border-radius:10px;box-shadow:none}
#modal :is(.collection-tabs,.social-tabs,.shop-tabs,.rank-filters) button.active{background:linear-gradient(110deg,#ffe09a,#f5b953);color:#16273e;border-color:#ffd796;box-shadow:inset 0 1px #fff1}
#modal :is(.collection-card,.milestone-card,.coin-pack,.friend-card,.social-invitation,.social-code-card,.party-card,.achievement-card,.quest-row,.news-card,.report-card,.monthly-prize){background:radial-gradient(ellipse at 20% 0,#367d9930,transparent 80%),linear-gradient(145deg,#1c3a53,#182a44);box-shadow:inset 0 1px #ffffff12,0 4px 14px #030d2035;border-radius:14px}
#modal .collection-page .collection-card{border-color:color-mix(in srgb,var(--rarity,#8be5ff) 45%,transparent)}
#modal .collection-page .collection-card.equipped{border-color:#94e8bc;box-shadow:inset 0 0 0 1px #94e8bc45}
#modal .rarity-pill{background:#0c233dcc;border-color:color-mix(in srgb,var(--rarity,#8be5ff) 38%,transparent)}
#modal .collection-card-actions .collection-view{background:#17334b;color:#cde6f6;border-color:#7293b44d}
#modal .collection-card .item-price{color:#f5d69a}
#modal :is(.social-empty,.monthly-empty){background:#0d21384d;border:1px dashed #749bb74d;border-radius:14px}
#modal .monthly-table th{color:#91d9ed;background:#112a42}
#modal .monthly-table td{border-color:#6d8da62b}
#modal .monthly-table tr:nth-child(even){background:#36567a12}
#modal :is(.monthly-countdown,.monthly-season){color:#a6c7dc}
/* Profile is a small dashboard; account explanations stay inside this page. */
#modal:has(.profile-page) .modal-card{width:min(800px,96vw)}
.profile-page{display:grid;gap:12px;min-width:0}
.profile-summary{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid #81b4cf3b;border-radius:14px;background:linear-gradient(110deg,#21465e,#192b46)}
.profile-summary>.ui-icon{width:32px;height:32px;color:var(--ui-gold)}
.profile-summary>div{display:grid;gap:4px;min-width:0}
.profile-summary strong{font-size:18px;color:#f4f8ff;overflow-wrap:anywhere}
.profile-summary small{font-size:11px;line-height:1.6;color:#aecbdf}
.profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#modal .profile-tile{display:flex;align-items:center;gap:10px;text-align:start;padding:12px;min-height:64px;border:1px solid #6a96b344;border-radius:12px;background:#17314b;color:#d4e9f7;font-size:12px;line-height:1.4;box-shadow:inset 0 1px #fff1}
.profile-tile .ui-icon{color:#93d9eb;width:23px;height:23px}
.profile-tile span{overflow-wrap:anywhere}
#modal .profile-tile[data-open=rewardAdButton] .ui-icon,#modal .profile-tile[data-open=rewardsButton] .ui-icon{color:var(--ui-gold)}
#modal .profile-tile[data-open=noAdsButton]{border-color:#c3a05b50}
/* Settings groups maintain a readable order and a reachable save action. */
#modal:has(.settings-page) .modal-card{width:min(840px,96vw)}
.settings-page{display:grid;gap:14px;min-width:0}
.settings-group{min-width:0;padding:12px;border:1px solid #7097b438;border-radius:14px;background:#10273d70}
.settings-group h3{margin:0 0 8px;color:#86cfe7;font-size:11px;letter-spacing:.8px;text-transform:uppercase}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
#modal .settings-grid label{gap:10px;min-height:44px;padding:7px 0;border-color:#6e8da52e;font-size:12px}
#modal .settings-grid label span{min-width:0;line-height:1.5}
#modal .settings-grid :is(select,input:not([type=checkbox])){max-width:58%;font-size:12px;min-height:36px;padding:7px}
.settings-links{display:flex;flex-wrap:wrap;gap:6px}
#modal .settings-links>button{padding:9px 11px;min-height:38px;border:1px solid #6d96b63b;border-radius:10px;background:#17344b;text-decoration:none;font-size:11px}
.settings-links>p,.settings-links>.feedback-links{flex-basis:100%;margin:4px 0}
.settings-page>.muted{margin:0;font-size:10px!important}
/* Queue, in-match panels and results keep the same palette and compact footprint. */
#waiting{background:radial-gradient(ellipse at 15% 35%,#143e59,transparent 65%),#0a1429}
#waiting .waiting-card{background:linear-gradient(130deg,#16334b,#101f37);border-color:#72acc34d;box-shadow:inset 0 1px #ffffff18,var(--ui-shadow);border-radius:22px}
#waiting .queue-warmup{border-color:#7ba1bc3d;border-radius:15px}
#waiting #cancelQueue{border:1px solid #7194b33d;border-radius:11px;background:#172f47;color:#c1def0;text-decoration:none;min-height:40px}
#waiting #queueDash{border:1px solid #ffe5ac;background:linear-gradient(135deg,#ffe096,#ffba55);box-shadow:0 5px 14px #040b2555;color:#16283f}
#arena .game-top .icon-button{background:#10283dde;border:1px solid #8cb9d36b;border-radius:11px;box-shadow:inset 0 1px #ffffff20}
#arena :is(.mode-pill,.alive-pill){background:#10253bdb;border-color:#8aaac343;box-shadow:inset 0 1px #fff1}
#arena .tournament-panel,#modal.honors-open .modal-card,#modal.rules-open .modal-card{background:linear-gradient(140deg,#193a50,#14243d);border-color:#94bfd664;border-radius:19px;box-shadow:var(--ui-shadow)}
#arena .round-actions{background:#10263bea;border-color:#94aec553;border-radius:15px}
#arena .round-actions button{border-radius:10px;border:1px solid #759bb54d;background:#20415b;color:#dbf2ff}
#arena .round-actions #playAgain{background:linear-gradient(115deg,#ffdb91,#ffb851);color:#1d2c41;border-color:#edca83}
#toast{background:#10283af5;border-color:#7eb3ca6b;border-radius:13px;color:#e6f6ff;box-shadow:0 8px 28px #030c2570}
@media(hover:hover){#home button:not(:disabled):hover,#modal button:not(:disabled):hover,#waiting button:not(:disabled):hover{border-color:#a7d4e5;box-shadow:inset 0 1px #ffffff30,0 0 0 1px #78bfd124}}
@media(max-height:430px){#modal .modal-card{padding:13px 17px}#modal #modalTitle{font-size:20px;line-height:1.3;margin-bottom:10px}#modal #modalActions{padding-top:8px;margin-top:9px}#modal #modalActions>button{min-height:38px;padding:7px 12px}#home .skin-controls{padding:3px 6px;gap:16px}#home .skin-controls button{min-height:36px;min-width:36px}.profile-page{gap:8px}.profile-summary{padding:8px 12px}.profile-summary strong{font-size:16px}#modal .profile-tile{min-height:49px;padding:9px 10px;font-size:11px}.profile-tile .ui-icon{width:20px;height:20px}.settings-page{gap:10px}.settings-group{padding:9px 11px}}
@media(max-width:680px){#home .collection-row button{gap:5px;font-size:10px}#home .collection-row .ui-icon{width:16px;height:16px}.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-grid{grid-template-columns:1fr}#modal .settings-grid :is(select,input:not([type=checkbox])){max-width:65%}}
@media(max-height:340px){#home .skin-controls{padding:2px 4px;border-radius:12px}#home .skin-controls button{min-width:34px;min-height:34px}#home .skin-controls .eyebrow{font-size:7px}#home .collection-row{gap:5px}#home .collection-row .ui-icon{width:16px;height:16px}#home .collection-row button{gap:5px}#modal #modalTitle{font-size:18px}.profile-summary small{font-size:10px}.profile-grid{gap:6px}}
[dir=rtl] #home h1,[dir=rtl] .settings-group h3{letter-spacing:0}
@media(prefers-reduced-motion:reduce){#home button,#modal button,#waiting button{transition:none}}

#modal .profile-tile[hidden]{display:none!important}

/* Optional rewarded inventory remains discoverable beside the real coin balance. */
#home .home-reward-row{display:grid;grid-template-columns:minmax(70px,.65fr) minmax(0,1.65fr);gap:8px;margin-top:10px}
#home .home-reward-row button{margin:0;border-radius:11px;min-height:42px;padding:8px 10px;line-height:1.35;font-size:12px;white-space:normal}
#home .home-reward-row #walletBadge{border:1px solid #b991474d;background:#17273b;color:#ffdb87;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#home .home-reward-row #rewardAdButton{border:1px solid #62d0b574;background:linear-gradient(110deg,#23514e,#204051);color:#d5ffdf;box-shadow:inset 0 1px #fff2}
#home .home-reward-row #rewardAdButton:disabled{opacity:.65}
#home .home-reward-row #rewardAdButton[data-ready="true"]{border-color:#83e5bc;background:linear-gradient(110deg,#2a6757,#285568);color:#f0fff4}
@media(max-height:430px){#home .home-reward-row{margin-top:8px}#home .home-reward-row button{min-height:40px;padding:7px 8px;font-size:11px}#home h1{font-size:27px;margin-bottom:10px}}
@media(max-height:340px){#home .menu-side{padding-block:2px}#home h1{font-size:22px;margin-bottom:6px}#home .home-reward-row{margin-top:6px}#home .collection-row{margin-top:6px}#home .home-reward-row button{padding:6px;font-size:10px}#home .play-row{gap:6px}}

/* Keyboard space has priority over decorative framing. */
#modal.modal.input-viewport{padding:6px}
#modal.input-viewport .modal-card{border-width:1px}
#modal.input-viewport #modalActions{padding-top:0;border-top:0}
#modal.input-viewport #closeModal{min-width:38px;min-height:38px}

/* Keep the approved menu usable before a phone rotates into landscape. */
@media(orientation:portrait) and (max-width:700px){#home .home-grid{grid-template-columns:minmax(0,1fr);height:auto;gap:10px}#home .menu-side{width:100%;max-width:none;max-height:none;padding:0;overflow:visible}#home .collection-row button{font-size:12px}#home #online{min-height:60px}}