.asset-loading,.asset-loading body { overflow:hidden; }
.asset-loader { position:fixed; inset:0; z-index:10000; display:grid; place-items:end center; isolation:isolate; overflow:hidden; padding:clamp(28px,5vw,70px); background:#160d08; color:#fff4df; transition:opacity .34s ease,visibility .34s ease; }
.asset-loader::before { content:''; position:absolute; inset:0; z-index:-2; background:url('../assets/backgrounds/kantin-loading-v1.webp') center/cover no-repeat; transform:scale(1.012); }
.asset-loader::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#07030112 24%,#08040270 64%,#080402e8 100%),radial-gradient(circle at 50% 42%,transparent 24%,#09040282 100%); }
.asset-loader.is-complete { opacity:0; visibility:hidden; }
.asset-loader-panel { width:min(680px,88vw); padding:18px 22px 16px; border:1px solid #edc76f80; border-radius:16px; background:#160c07d9; box-shadow:0 18px 60px #000c,inset 0 1px #fff2; backdrop-filter:blur(10px); }
.asset-loader-panel>small { display:block; margin-bottom:4px; color:#e7b94f; font-size:10px; font-weight:950; letter-spacing:.24em; }
.asset-loader-panel>strong { display:block; margin-bottom:13px; font:900 clamp(20px,2.8vw,30px) Georgia,serif; }
.asset-loader-track { height:12px; overflow:hidden; border:1px solid #dca94677; border-radius:999px; background:#050302b8; box-shadow:inset 0 2px 6px #000; }
.asset-loader-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9b5c18,#e9b949 55%,#fff0a2); box-shadow:0 0 14px #edbb4d; transition:width .14s linear; }
.asset-loader-meta { margin-top:8px; display:flex; justify-content:space-between; gap:14px; color:#cbbba4; font-size:11px; }
.asset-loader-meta b { color:#f3ca68; font-variant-numeric:tabular-nums; }
@media(max-height:560px) and (orientation:landscape){.asset-loader{padding:18px 7vw}.asset-loader-panel{padding:11px 16px 10px}.asset-loader-panel>strong{margin-bottom:8px;font-size:18px}.asset-loader-track{height:9px}.asset-loader-meta{margin-top:5px;font-size:9px}}

.brand { display: flex; align-items: center; padding: 0; }
.brand img { display:block; width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 5px 10px #0009); }

.mobile-lobby {
  position: relative;
  isolation: isolate;
  height: calc(100dvh - 72px);
  min-height: 430px;
  padding: clamp(12px, 2vw, 26px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  overflow: hidden;
  background: radial-gradient(circle at 58% 42%, #6b422331, transparent 48%), #0f0a07;
}

.mobile-lobby::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0d0907b5, #0d090752 48%, #0d090784), url('../assets/backgrounds/kantin-home-hero.webp') center / cover;
  opacity: 1;
}

.lobby-heading {
  width: min(1540px, 100%);
  margin: auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.lobby-heading small { color: #e2b454; font-weight: 900; letter-spacing: .14em; }
.lobby-heading small i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5add7e; box-shadow: 0 0 12px #5add7e; }
.lobby-heading h1 { margin: 3px 0 0; font: 900 clamp(24px, 3.2vw, 42px) Georgia, serif; }
.lobby-heading-actions { display: flex; align-items: center; gap: 9px; color: #d2c2ad; font-size: 12px; }
.lobby-heading-actions > span, .resume-pill { padding: 8px 12px; border: 1px solid #ffffff18; border-radius: 999px; background: #160f0bd9; }
.resume-pill { color: #161008; background: #e3b85d; border-color: #f1d28e; font-weight: 900; }
.rewarded-ad-button { min-width:190px; padding:8px 12px; display:flex; align-items:center; gap:9px; border:1px solid #f1c85b88; border-radius:13px; background:linear-gradient(145deg,#6f4418,#2c1a0d); color:#fff4d7; box-shadow:inset 0 1px #fff2,0 7px 18px #0005; text-align:left; }.rewarded-ad-button>span { width:28px; height:28px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; background:linear-gradient(#f6c94f,#c77a13); color:#2f1b08; font-size:11px; }.rewarded-ad-button>b { min-width:0; display:grid; font-size:11px; line-height:1.1; }.rewarded-ad-button small { margin-top:2px; color:#d4b988; font-size:7px; font-weight:700; letter-spacing:.04em; }.rewarded-ad-button:disabled { cursor:not-allowed; filter:grayscale(.7); opacity:.55; box-shadow:none; }.rewarded-ad-button.compact { min-width:170px; padding:6px 10px; border-radius:999px; }.rewarded-ad-button.compact>span { width:23px; height:23px; font-size:9px; }
.rewarded-test-ad { position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:20px; background:#050302ef; backdrop-filter:blur(12px); }.rewarded-test-ad>div { width:min(460px,100%); padding:28px; display:grid; justify-items:center; gap:10px; border:1px solid #e2b45488; border-radius:24px; background:radial-gradient(circle at 50% 0,#66411e,#160e09 68%); box-shadow:0 28px 90px #000; text-align:center; }.rewarded-test-ad small { color:#e2b454; font-weight:900; letter-spacing:.18em; }.rewarded-test-ad strong { font:900 25px Georgia,serif; }.rewarded-test-ad p { margin:0; color:#b9aa98; font-size:12px; }.rewarded-test-ad b { width:66px; height:66px; display:grid; place-items:center; border:2px solid #e2b454; border-radius:50%; background:#100a07; color:#f7cc68; font:900 32px Georgia,serif; }.rewarded-test-ad span { color:#f2d389; font-weight:900; }

.lobby-layout {
  width: min(1540px, 100%);
  min-height: 0;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 22vw, 350px);
  gap: clamp(10px, 1.5vw, 20px);
}

.game-families {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 16px);
}

.family-card {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 48%) auto auto;
  border: 1px solid #ffffff17;
  border-radius: 18px;
  background: linear-gradient(145deg, #2418118f, #17100c7d);
  color: #f8f0e5;
  box-shadow: 0 15px 36px #0007;
  backdrop-filter: blur(7px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.family-card:hover { transform: translateY(-3px); border-color: #e2b45488; }
.family-visual { position: relative; min-height: 0; overflow: hidden; background: #18100c40; }
.family-visual img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: .82; }
.family-visual span { position: absolute; top: 9px; right: 9px; padding: 4px 7px; border-radius: 99px; background: #100b08d9; color: #e9bd64; font-size: 9px; font-weight: 900; }
.family-card > header { padding: clamp(8px, 1vw, 14px) clamp(10px, 1.2vw, 16px) 7px; }
.family-card > header small { color: #b9aa98; font-size: clamp(9px, .8vw, 12px); }
.family-card h2 { margin: 2px 0 0; font: 900 clamp(20px, 2vw, 30px) Georgia, serif; }
.family-modes { padding: 0 clamp(8px, 1vw, 13px) clamp(8px, 1vw, 13px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.family-modes button { min-width: 0; padding: clamp(7px, .8vw, 11px); display: flex; align-items: center; justify-content: space-between; gap: 7px; border: 1px solid #ffffff1f; border-radius: 12px; background: #130d0969; color: #f7eee2; text-align: left; backdrop-filter: blur(5px); }
.family-modes button:hover, .family-modes button:focus-visible { border-color: #e2b45499; background: #e2b45413; }
.family-modes button span { min-width: 0; display: grid; }.family-modes button b { color: #e9bd64; font-size: clamp(11px, 1vw, 14px); }.family-modes button small { overflow: hidden; color: #ad9b87; font-size: clamp(8px, .68vw, 10px); text-overflow: ellipsis; white-space: nowrap; }
.family-modes button i { flex: 0 0 auto; color: #f5d27d; font: 900 clamp(9px, .8vw, 11px)/1 system-ui; }
.family-pisti .family-visual { background: #154b3652; }.family-okey .family-visual { background: #2b5c4352; }

.lobby-tools {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 1vw, 13px);
}

.tool-button {
  position: relative;
  min-width: 0;
  padding: clamp(9px, 1.2vw, 16px);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  overflow: hidden;
  border: 1px solid #ffffff17;
  border-radius: 17px;
  background: linear-gradient(145deg, #271b1494, #17100c82);
  color: #f7ede0;
  text-align: left;
  box-shadow: inset 0 1px #ffffff0d, 0 12px 30px #0005;
  backdrop-filter: blur(7px);
  transition: transform .18s, border-color .18s;
}

.tool-button::after { content: ''; position: absolute; width: 90px; height: 90px; right: -42px; bottom: -48px; border-radius: 50%; background: currentColor; opacity: .05; }
.tool-button:hover, .tool-button:focus-visible { transform: translateY(-2px); border-color: #e2b45488; }
.tool-button > b { display: grid; place-items: center; width: clamp(30px, 3vw, 44px); aspect-ratio: 1; border-radius: 13px; background: #ffffff0e; font-size: clamp(18px, 2vw, 28px); }
.tool-button span { display: grid; gap: 2px; }
.tool-button strong { font-size: clamp(12px, 1.15vw, 17px); }
.tool-button small { color: #ad9b87; font-size: clamp(9px, .75vw, 12px); }
.tool-button > i { position: absolute; top: 9px; right: 9px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: #dc4e42; color: white; font: 900 10px/1 system-ui; }
.tool-button.daily { color: #ffd16c; background: linear-gradient(145deg, #5d3d1699, #24170d80); }
.tool-button.missions { color: #74dea0; background: linear-gradient(145deg, #173e2b99, #121d1780); }
.tool-button.store { color: #d9a8ff; }
.tool-button.inventory { color: #8bc8ff; }
.tool-button.tournaments { color: #f1c563; }
.tool-button.stats { color: #8dc9ff; }

.utility-screen {
  min-height: calc(100dvh - 72px);
  padding: clamp(14px, 3vw, 40px);
  background: radial-gradient(circle at 80% 0, #6b422333, transparent 42%), #100b08;
}

.utility-screen > header { max-width: 1280px; margin: 0 auto 22px; display: flex; align-items: center; gap: 18px; }
.utility-screen header small { color: #e2b454; font-weight: 900; letter-spacing: .14em; }
.utility-screen h1 { margin: 2px 0; font: 900 clamp(26px, 4vw, 48px) Georgia, serif; }
.utility-screen header p { margin: 0; color: #b9aa98; }
.reward-grid, .store-grid, .inventory-grid, .mission-list { max-width: 1280px; margin: auto; }
.reward-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.reward-day { min-height: 150px; padding: 14px; display: grid; place-items: center; border: 1px solid #ffffff17; border-radius: 18px; background: #211711; }
.reward-day b { font-size: 34px; }.reward-day strong { color: #f2c865; }.reward-day.today { border-color: #e2b454; box-shadow: 0 0 30px #e2b45422; }.reward-day.claimed { opacity: .48; }
.utility-cta { display: block; margin: 22px auto 0; }
.mission-list { display: grid; gap: 11px; }
.mission-list article { padding: 15px 18px; display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; border: 1px solid #ffffff17; border-radius: 15px; background: #211711; }
.mission-list progress { grid-column: 1; width: 100%; accent-color: #dbaa4b; }.mission-list article > strong { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #f2c865; }
.mission-list article{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}.mission-list article>div:first-child{display:grid;gap:6px}.mission-list article>strong{grid-column:2;grid-row:1;display:flex;align-items:center;gap:5px;white-space:nowrap}.mission-list .mission-action{grid-column:3;grid-row:1}.mission-list .mission-action .rewarded-ad-button{min-width:210px}.mission-list article.complete{border-color:#dbaa4b66}.mission-list article.claimed{opacity:.7}.mission-list article.claimed progress{accent-color:#58bd82}
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.store-grid article { padding: 22px; border: 1px solid #ffffff17; border-radius: 19px; background: #211711; text-align: center; }.store-grid article > b { font-size: 44px; }.store-grid h3 { margin: 8px 0 4px; }.store-grid p { color: #b9aa98; }
.inventory-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }.inventory-slot { min-height: 165px; padding: 13px; display: grid; place-items: center; border: 1px solid #ffffff17; border-radius: 17px; background: #211711; }.inventory-slot b { font-size: 36px; }.inventory-slot small { color: #dbaa4b; font-size: 9px; font-weight: 900; }.inventory-slot.equipped { border-color: #56c77b; }
.tournament-grid { max-width: 1280px; margin: auto; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }.tournament-grid article { min-height: 230px; padding: 22px; display: grid; align-content: center; justify-items: start; border: 1px solid #ffffff1b; border-radius: 19px; background: #211711b8; backdrop-filter: blur(8px); }.tournament-grid article.featured { border-color: #e2b45488; background: linear-gradient(145deg, #614119b8, #21150db8); }.tournament-grid article > b { font-size: 40px; }.tournament-grid article > small { color: #e2b454; font-weight: 900; letter-spacing: .1em; }.tournament-grid h2 { margin: 8px 0 4px; }.tournament-grid p { color: #b9aa98; }
.tournament-card{align-content:start!important}.tournament-card .coin-icon{width:14px;height:14px;vertical-align:-3px}.tournament-bracket{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px;margin:10px 0}.tournament-match{padding:8px;border:1px solid #ffffff18;border-radius:10px;background:#0f0b08aa;display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;font-size:10px}.tournament-match small{grid-column:1/-1;color:#b99d6e}.tournament-match span:last-child{text-align:right}.tournament-match .winner{color:#f3c967;font-weight:900}.tournament-match i{font-style:normal;color:#776958}.tournament-champion{margin:7px 0;color:#f3c967;font-size:12px}
.stats-summary { max-width: 1280px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.stats-summary article { padding: 17px; display: grid; gap: 7px; border: 1px solid #ffffff1b; border-radius: 16px; background: #211711b8; backdrop-filter: blur(8px); }.stats-summary small { color: #b9aa98; font-size: 10px; font-weight: 900; letter-spacing: .1em; }.stats-summary b { color: #f0c86d; font: 900 32px Georgia,serif; }.match-history { max-width: 1280px; margin: 18px auto 0; }.match-history h2 { margin: 0 0 9px; }.match-history article { padding: 12px 15px; display: grid; grid-template-columns: 1fr auto auto; gap: 18px; border-bottom: 1px solid #ffffff12; background: #17100c91; }.match-history article b.win { color: #70dd94; }.match-history article b.loss { color: #ee766e; }.match-history time { color: #9f8f7d; }.empty-history { padding: 28px; border: 1px dashed #ffffff20; border-radius: 15px; color: #aa9985; text-align: center; background: #17100c70; }

.match-icon img { width: 160px; height: 90px; object-fit: cover; border-radius: 14px; border: 1px solid #ffffff17; }
.rotate-notice { display: none; }
.global-emoji-picker { position:fixed; z-index:55; right:12px; top:64px; width:min(280px,45vw); padding:7px; display:grid; grid-template-columns:repeat(6,1fr); gap:4px; border:1px solid #e2b45466; border-radius:13px; background:#120c09ee; box-shadow:0 15px 40px #000b; }.global-emoji-picker button { padding:5px; border:0; border-radius:7px; background:#ffffff0a; font-size:18px; }

.profile-trigger { padding:3px 7px; border:1px solid transparent; border-radius:12px; background:transparent; color:inherit; text-align:left; }
.profile-trigger:hover { border-color:#e2b45455; background:#ffffff08; }
.profile-trigger small b:not(:empty)::before { content:' · '; color:#756656; }
.avatar { overflow:hidden; }.avatar img { width:100%; height:100%; display:block; object-fit:cover; }
.friend-profile-link { min-width:0; flex:1; padding:0; display:flex; align-items:center; gap:9px; border:0; background:transparent; color:inherit; text-align:left; }.friend-profile-link>span:last-child { min-width:0; display:grid; }
.player-profile-button { display:flex; align-items:center; gap:7px; padding:0; border:0; background:transparent; color:inherit; }
.seat[data-player-profile] { color:inherit; border:0; cursor:pointer; }.seat[data-player-profile]:hover { outline:1px solid #e2b45488; }
.profile-modal { position:fixed; inset:0; z-index:60; padding:clamp(12px,3vw,42px); display:none; place-items:center; background:#080503d9; backdrop-filter:blur(9px); }
.profile-modal.open { display:grid; }.profile-card { position:relative; width:min(1080px,100%); height:min(680px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); overflow:hidden; border:1px solid #e2b45455; border-radius:24px; background:linear-gradient(135deg,#241710,#100b08); box-shadow:0 30px 90px #000c; }
.profile-close { position:absolute; z-index:2; top:13px; right:13px; width:38px; height:38px; border:1px solid #ffffff22; border-radius:50%; background:#120c09df; font-size:24px; }
#profileContent{height:100%;overflow:hidden}.profile-sheet{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.profile-sheet>header { min-height:76px;padding:14px 68px 12px 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;border-bottom:1px solid #ffffff16; }.profile-sheet>header small { color:#e2b454; font-weight:900; letter-spacing:.14em; }.profile-sheet>header h2 { margin:2px 0 0; font:900 32px Georgia,serif; }
.profile-tabs{display:flex;gap:6px;align-items:center}.profile-tabs button{padding:8px 13px;border:1px solid #ffffff20;border-radius:9px;background:#ffffff09;color:#b9aa98;font-size:11px;font-weight:900}.profile-tabs button.active{border-color:#e2b45488;background:#e2b4541c;color:#f3cf7b;box-shadow:inset 0 -2px #e2b454}.profile-main { min-height:0;display:grid; grid-template-columns:330px 1fr;overflow:hidden}.identity-card { min-height:0;padding:28px;display:flex;flex-direction:column;align-items:center;overflow:hidden;border-right:1px solid #ffffff17;background:linear-gradient(#3d2719aa,#1b120dcc);text-align:center; }
.profile-photo { width:130px; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border:4px solid #e2b454; border-radius:20px; background:#604027; box-shadow:0 10px 25px #0007; }.profile-photo img { width:100%; height:100%; object-fit:cover; }.profile-photo span { font:900 58px Georgia,serif; }
.identity-card h3 { margin:14px 0 2px; font:900 25px Georgia,serif; }.identity-card>p { margin:0; color:#b9aa98; }.profile-level { position:relative; width:100%; height:25px; margin:17px 0; overflow:hidden; border-radius:99px; background:#ffffff16; }.profile-level span { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#b97823,#f1c861); }.profile-level b { position:relative; line-height:25px; text-shadow:0 1px 3px #000; }
.photo-picker { margin-bottom:12px; padding:9px 13px; border-radius:9px; background:#2779a1; font-weight:900; cursor:pointer; }.photo-picker input { display:none; }.identity-card form { width:100%; display:grid; gap:8px; }.identity-card form label { display:grid; gap:5px; color:#b9aa98; font-size:11px; text-align:left; }.identity-card form input { width:100%; padding:10px; border:1px solid #ffffff22; border-radius:9px; background:#100b08; color:#fff; }.profile-note { margin-top:auto; padding-top:18px; color:#8f7d69; font-size:11px; }
.profile-panels{min-width:0;min-height:0;overflow:hidden}.profile-data { width:100%;height:100%;min-height:0;padding:22px;overflow:hidden; }.profile-panel[hidden]{display:none}.profile-panel.active{display:block}.profile-data>h3,.profile-achievements h3 { margin:0 0 13px; font:900 21px Georgia,serif; }.profile-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.profile-stats article { min-height:66px; padding:10px 12px; display:grid; grid-template-columns:1fr auto; align-items:center; border:1px solid #ffffff14; border-radius:11px; background:#ffffff09; }.profile-stats small { color:#b9aa98; font-weight:800; }.profile-stats b { color:#efc76d; font:900 25px Georgia,serif; }
.profile-achievements { margin-top:20px; padding-top:17px; border-top:1px solid #ffffff16; }.profile-achievements span { width:58px; height:58px; margin-right:9px; display:inline-grid; place-items:center; border:1px solid #e2b45455; border-radius:14px; background:#e2b45412; font-size:28px; }
.profile-signout { width:100%; margin-top:8px; border-color:#d96b6255; background:#6a211d55; color:#ffb3ac; }
.guest-lock { width:100%; margin-top:8px; padding:8px; border:1px solid #e2b45433; border-radius:9px; background:#e2b4540d; color:#c9af78; font-size:9px; }
.guest-name-readonly { width:100%; min-height:51px; padding:8px 10px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; border:1px solid #ffffff20; border-radius:9px; background:#100b08; text-align:left; }.guest-name-readonly small { grid-column:1/-1; color:#b9aa98; font-size:9px; }.guest-name-readonly strong { min-width:0; overflow:hidden; color:#eee3d2; text-overflow:ellipsis; white-space:nowrap; }.guest-name-readonly span { filter:saturate(.55); font-size:13px; }
.profile-data:has(.guest-upgrade) .profile-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }.profile-data:has(.guest-upgrade) .profile-stats article { min-height:66px; }
.guest-upgrade { margin-top:18px; padding:14px; border:1px solid #e2b45455; border-radius:15px; background:linear-gradient(135deg,#3c291ca6,#18100ce6); box-shadow:inset 0 1px #ffffff0d; }.guest-upgrade-copy { display:flex; align-items:center; gap:10px; }.guest-upgrade-copy>span { width:36px; height:36px; display:grid; flex:0 0 auto; place-items:center; border:1px solid #e2b45455; border-radius:11px; background:#e2b45412; }.guest-upgrade-copy h3 { margin:0; color:#f1d18a; font:900 17px Georgia,serif; }.guest-upgrade-copy p { margin:2px 0 0; color:#b9aa98; font-size:10px; }
.account-email-form { margin-top:11px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:8px; }.account-email-form label { display:grid; gap:4px; color:#b9aa98; font-size:9px; }.account-email-form label:only-of-type { grid-column:span 2; }.account-email-form input { width:100%; min-width:0; height:34px; padding:7px 9px; border:1px solid #ffffff22; border-radius:8px; background:#0f0a08; color:#fff; }.account-email-form input:disabled { color:#c7b9a9; opacity:.72; }.account-email-form .btn { min-height:34px; padding:7px 12px; }
.account-providers { margin-top:9px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.account-provider { min-width:0; padding:7px 9px; display:flex; align-items:center; gap:8px; border:1px solid #ffffff1c; border-radius:9px; background:#ffffff0a; color:#fff; text-align:left; }.account-provider i { width:25px; height:25px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; background:#fff; color:#27201b; font:900 13px Arial,sans-serif; }.account-provider.facebook i { background:#2879db; color:#fff; }.account-provider.apple i { background:#111; color:#fff; }.account-provider span { min-width:0; display:grid; }.account-provider b,.account-provider small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-provider b { font-size:10px; }.account-provider small { color:#b9aa98; font-size:7px; }.account-provider:disabled { cursor:not-allowed; filter:grayscale(1); opacity:.4; }.account-offline { margin-top:9px; padding:7px 9px; border-radius:8px; background:#8a3f2633; color:#dfad97; font-size:9px; }
.profile-panel-account .guest-upgrade{margin-top:0}.profile-account-summary{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid #60c98b55;border-radius:16px;background:#173c2a66}.profile-account-summary>span{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#49bf78;color:#092315;font-size:25px;font-weight:900}.profile-account-summary h3{margin:0;color:#9ce2b7;font:900 20px Georgia,serif}.profile-account-summary p{margin:4px 0 0;color:#c8d7cc}
@media(max-width:700px){.profile-main{grid-template-columns:1fr}.identity-card{border-right:0;border-bottom:1px solid #ffffff17}.profile-stats,.profile-data:has(.guest-upgrade) .profile-stats{grid-template-columns:1fr}.account-providers{grid-template-columns:1fr}.account-email-form{grid-template-columns:1fr}.account-email-form label:only-of-type{grid-column:auto}}

/* First-run account gateway */
.auth-modal { position:fixed; inset:0; z-index:110; display:none; background:#080503; }
.auth-modal.open { display:block; }
.auth-gateway { position:relative; isolation:isolate; width:100%; height:100dvh; min-height:520px; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto auto; color:#fff9ef; background:url('../assets/backgrounds/kantin-home-hero.webp') center 48%/cover no-repeat; }
.auth-gateway::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 62% 40%,transparent 0 17%,#08040b22 43%,#08040bc9 100%),linear-gradient(180deg,#0b071044 0,#0b071000 38%,#090507ed 78%,#090507 100%); }
.auth-gateway::after { content:''; position:absolute; inset:auto 0 0; z-index:-1; height:42%; background:linear-gradient(transparent,#090506 68%); }
.auth-gateway-head { padding:clamp(18px,3vw,38px) clamp(20px,4vw,64px); display:flex; align-items:flex-start; justify-content:space-between; }
.auth-gateway-head>img { width:clamp(86px,8vw,120px); height:auto; filter:drop-shadow(0 8px 15px #000c); }
.auth-gateway-head>div { display:grid; justify-items:center; gap:4px; }
.auth-gateway-head button { width:42px; height:42px; border:1px solid #efc86f88; border-radius:50%; background:#0e2730bb; color:#f5d782; font:900 19px Georgia,serif; box-shadow:0 7px 20px #0009,inset 0 0 12px #58bad733; }
.auth-gateway-head span { color:#e7d3aa; font-size:8px; font-weight:900; letter-spacing:.1em; }
.auth-gateway-copy { align-self:center; margin:0 clamp(24px,7vw,110px); text-shadow:0 3px 14px #000; }
.auth-gateway-copy small { color:#efc66c; font-size:10px; font-weight:950; letter-spacing:.24em; }
.auth-gateway-copy h1 { margin:6px 0 12px; font:900 clamp(43px,6.6vw,96px)/.86 Georgia,serif; letter-spacing:-.055em; }
.auth-gateway-copy p { margin:0; color:#d7c7b4; font-size:clamp(12px,1.2vw,18px); line-height:1.5; }
.auth-provider-area { width:min(1420px,calc(100% - 28px)); margin:0 auto; padding:10px 0 3px; }
.auth-provider-area>p { margin:0 0 9px; color:#c9bba9; font-size:9px; font-weight:950; letter-spacing:.16em; text-align:center; }
.auth-providers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(7px,1.1vw,16px); }
.auth-provider { min-width:0; min-height:64px; padding:8px 13px; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; border:1px solid #ffffff48; border-radius:13px; color:#1c1713; text-align:left; box-shadow:0 10px 26px #000b,inset 0 1px #fff9; transition:.18s ease; }
.auth-provider:hover,.auth-provider:focus-visible { transform:translateY(-3px); filter:brightness(1.08); }
.auth-provider:disabled { cursor:not-allowed; opacity:.58; filter:saturate(.4); transform:none; }
.auth-provider i { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#ffffffd9; font:900 22px/1 Arial,sans-serif; font-style:normal; box-shadow:0 3px 8px #0003; }
.auth-provider span { min-width:0; display:grid; gap:2px; }.auth-provider small { overflow:hidden; font-size:7px; font-weight:900; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; opacity:.65; }.auth-provider b { overflow:hidden; font-size:clamp(11px,1vw,15px); text-overflow:ellipsis; white-space:nowrap; }
.auth-provider.google { background:linear-gradient(#fff,#dedbd7); }.auth-provider.google i { color:#4285f4; }
.auth-provider.apple { background:linear-gradient(#2c2c2d,#070707); color:#fff; }.auth-provider.apple i { background:#fff;color:#111; }
.auth-provider.facebook { border-color:#6898e5; background:linear-gradient(#3978d6,#2452a4); color:#fff; }.auth-provider.facebook i { color:#2e65bd; }
.auth-provider.guest { border-color:#e2ad55; background:linear-gradient(#d49234,#8b4c14); color:#fff6e7; }.auth-provider.guest i { color:#8b531c; }
.auth-feedback { min-height:18px; margin:6px 0 0; color:#ff8d84; font-size:10px; font-weight:800; text-align:center; }.auth-feedback.success { color:#77d89a; }
.auth-consent { width:max-content; max-width:100%; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:7px; color:#9e8f80; font-size:9px; }.auth-consent input { accent-color:#dba742; }.auth-consent a { color:#d9b763; text-decoration:underline; }
.auth-gateway>footer { padding:5px clamp(16px,3vw,38px) 12px; display:flex; justify-content:space-between; color:#6f655c; font-size:8px; }
.language-switch { display:flex; align-items:center; gap:7px; color:#e7d3aa; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.language-switch select { min-width:92px; height:34px; padding:0 27px 0 10px; border:1px solid #e2b45455; border-radius:10px; color:#fff7e5; background:#20150f; font:800 11px Inter,system-ui,sans-serif; cursor:pointer; color-scheme:dark; }
.topbar-language { margin-inline-start:auto; margin-inline-end:14px; }
.topbar-language select { height:32px; min-width:86px; }
.auth-head-actions { display:flex!important; grid-auto-flow:column; align-items:flex-start; gap:14px!important; }
.auth-help { display:grid; justify-items:center; gap:4px; }
.auth-gateway-copy h1,.auth-gateway-copy p { white-space:pre-line; }
[dir="rtl"] .auth-gateway-copy,[dir="rtl"] .auth-provider-area,[dir="rtl"] .room-select,[dir="rtl"] .utility-screen,[dir="rtl"] .match-screen { text-align:right; }
[dir="rtl"] .auth-provider { text-align:right; }
[dir="rtl"] .auth-provider i { order:2; }
[dir="rtl"] .auth-provider span { order:1; }
[dir="rtl"] .room-head>button { transform:scaleX(-1); }
[dir="rtl"] .tavla-board,[dir="rtl"] .pisti-table,[dir="rtl"] .okey-table,[dir="rtl"] .word-layout,[dir="rtl"] .menu-game-scene { direction:ltr; }

@media(max-width:760px) {
  .auth-gateway-copy { margin-left:24px; }.auth-providers { grid-template-columns:1fr 1fr; }
  .topbar-language>span { display:none; }.topbar-language { margin-inline-end:7px; }.topbar-language select { min-width:76px; }
}

/* Illustrated game cards; artwork scales to both available dimensions. */
.arcade-home { grid-template-rows:auto minmax(0,1fr) auto; }
.arcade-games { width:min(1380px,100%); height:100%; min-height:0; margin:0 auto; display:grid; grid-template-columns:1.18fr repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); align-items:stretch; gap:clamp(9px,1.2vw,18px); }
.arcade-card { min-width:0; min-height:0; height:100%; overflow:hidden; padding:0; display:grid; grid-template-rows:minmax(0,1fr) clamp(36px,7vh,60px); border:1px solid #b58a4566; border-radius:16px; background:#211711; color:#fff; text-align:left; box-shadow:0 12px 25px #0007; transition:.2s ease; }
.arcade-card.featured{grid-column:1;grid-row:1/3}
.arcade-card.family-normalOkey{grid-column:2;grid-row:1}
.arcade-card.family-tavla{grid-column:3;grid-row:1}
.arcade-card.family-pisti{grid-column:4;grid-row:1/3}
.arcade-card.family-batak{grid-column:2;grid-row:2}
.arcade-card.family-sozcuk{grid-column:3;grid-row:2}
.arcade-card:hover,.arcade-card:focus-visible { transform:translateY(-5px); border-color:#e9bd64; box-shadow:0 26px 58px #000b,0 0 30px #e2b45422; }
.arcade-art { position:relative; min-height:0; overflow:hidden; container-type:size; background:radial-gradient(ellipse at center,#22638a,#092b44); }
.family-okey .arcade-art{background:#075341 url('../assets/games/okey101/felt-emerald-v1.webp') center/cover}.family-normalOkey .arcade-art{background:#165782 url('../assets/games/okey101/table-realistic-v1.webp') center/cover}.family-tavla .arcade-art{background:#2c170d url('../assets/games/tavla/tabletop-dark-walnut.webp') center/cover}.family-pisti .arcade-art{background:#063a32 url('../assets/games/pisti/final/tablecloth-green.webp') center/cover}.family-batak .arcade-art{background:radial-gradient(circle at 48% 35%,#172b53,#070e22 72%)}.family-sozcuk .arcade-art{background:#510b10 url('../assets/games/sozcuk/burgundy-tablecloth-v1.webp') center/cover}
.arcade-art::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 22px #0004; pointer-events:none; }
.arcade-art>img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.arcade-card:hover .menu-game-scene { transform:scale(1.025); }
.arcade-art>span { position:absolute; z-index:5; top:7px; right:7px; padding:4px 7px; border-radius:99px; background:#100b08dc; color:#f3ca70; font-size:9px; font-weight:900; letter-spacing:.08em; }
.arcade-art .menu-game-scene{inset:auto;left:50%;top:50%;width:min(100cqw,160cqh);height:min(100cqh,62.5cqw);translate:-50% -50%;container-type:size}
.menu-game-scene{position:absolute;inset:0;overflow:hidden;transform-origin:center;transition:transform .35s ease;background:#17100c}
.menu-game-scene img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}
.menu-tavla-scene{background:#2b170c url('../assets/games/tavla/tabletop-dark-walnut.webp') center/cover}.menu-tavla-board{left:50%;top:50%;width:100%;height:100%;object-fit:cover;transform:translate(-50%,-50%);filter:saturate(.96) contrast(1.03);image-rendering:auto}
.menu-tavla-checker{z-index:2;width:13%;height:auto;filter:drop-shadow(0 5px 5px #000b)}.menu-tavla-checker.c1{left:18%;top:15%}.menu-tavla-checker.c2{left:18%;top:27%}.menu-tavla-checker.c3{right:17%;bottom:18%}.menu-tavla-checker.c4{right:17%;bottom:30%}
.menu-tavla-die{z-index:3;width:13%;height:auto;filter:drop-shadow(0 5px 4px #000b)}.menu-tavla-die.d1{left:46%;top:52%;transform:rotate(-12deg)}.menu-tavla-die.d2{left:58%;top:57%;transform:rotate(9deg)}
.menu-pisti-scene{background:#063a32}.menu-pisti-cloth{inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.88)}.menu-pisti-card{z-index:2;width:23%;height:auto;filter:drop-shadow(0 8px 6px #000b)}.menu-pisti-card.p1{left:17%;top:18%;transform:rotate(-14deg)}.menu-pisti-card.p2{left:31%;top:12%;transform:rotate(-5deg)}.menu-pisti-card.p3{left:45%;top:18%;transform:rotate(7deg)}.menu-pisti-card.p4{left:58%;top:13%;transform:rotate(15deg)}.menu-pisti-card.back1{right:5%;bottom:4%;transform:rotate(17deg)}.menu-pisti-card.back2{right:9%;bottom:7%;transform:rotate(10deg)}
.menu-okey-scene{background:#0b3550}.menu-101-okey-scene{background:#075341}.menu-classic-okey-scene{background:#165782}.menu-okey-table{inset:0;width:100%;height:100%;object-fit:cover}.menu-classic-okey-scene .menu-okey-table{filter:saturate(1.08) hue-rotate(3deg)}.menu-okey-rack{z-index:2;left:-4%;bottom:-1%;width:108%;height:auto;filter:drop-shadow(0 6px 5px #000a)}
.menu-okey-tile{position:absolute;z-index:3;top:25%;width:16%;aspect-ratio:2/3}.menu-okey-tile.t1{left:8%;transform:rotate(-6deg)}.menu-okey-tile.t2{left:22%;transform:rotate(-3deg)}.menu-okey-tile.t3{left:36%}.menu-okey-tile.t4{left:50%;transform:rotate(2deg)}.menu-okey-tile.t5{left:64%;transform:rotate(4deg)}.menu-okey-tile.t6{left:78%;transform:rotate(7deg)}.menu-okey-tile img{inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 5px 4px #0009)}.menu-okey-tile b{position:absolute;z-index:1;left:50%;top:29%;transform:translateX(-50%);font:900 clamp(16px,2.6vw,35px)/1 Arial,sans-serif;text-shadow:0 1px #fff}.menu-okey-tile.red b{color:#b42c2a}.menu-okey-tile.blue b{color:#245eaa}.menu-okey-tile.black b{color:#171717}
.menu-word-scene{background:#510b10}.menu-word-cloth{inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.68)}.menu-word-board{z-index:1;left:50%;top:45%;width:63%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 7px #000a)}.menu-word-rack{z-index:3;left:-4%;bottom:-2%;width:108%;height:auto;filter:drop-shadow(0 5px 5px #000b)}
.menu-word-tile{position:absolute;z-index:4;top:37%;width:13%;aspect-ratio:1}.menu-word-tile.w1{left:12%;transform:rotate(-8deg)}.menu-word-tile.w2{left:27%;transform:rotate(-4deg)}.menu-word-tile.w3{left:42%}.menu-word-tile.w4{left:57%;transform:rotate(3deg)}.menu-word-tile.w5{left:72%;transform:rotate(6deg)}.menu-word-tile.w6{left:43%;top:59%;transform:rotate(-2deg)}.menu-word-tile img{inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 4px 3px #0009)}.menu-word-tile b{position:absolute;z-index:1;inset:0;display:grid;place-items:center;color:#2b1b12;font:900 clamp(15px,2.4vw,32px)/1 Georgia,serif}.menu-word-tile small{position:absolute;z-index:2;right:12%;bottom:10%;color:#2b1b12;font:900 clamp(5px,.55vw,8px)/1 Arial,sans-serif}
.arcade-label { min-width:0; padding:6px 12px; display:flex; gap:8px; align-items:center; justify-content:space-between; border-top:1px solid #d9aa4b55; background:linear-gradient(100deg,#372518,#20160e); }
.arcade-label small { display:none; }
.arcade-label strong { min-width:0; font:900 clamp(16px,1.9vw,28px)/1.1 Georgia,serif; }
.arcade-label i { flex-shrink:0; padding:6px 8px; border-radius:7px; background:#e2b454; color:#1a110b; font-size:9px; font-weight:950; }
.arcade-card.featured .arcade-label strong,.arcade-card.family-pisti .arcade-label strong{font-size:clamp(20px,2.4vw,34px)}
.arcade-art .menu-okey-tile b{font-size:10cqw}.family-normalOkey .menu-okey-tile b{font-size:7cqw}.menu-okey-tile.yellow b{color:#b88619}
.family-okey .menu-okey-scene{background:#075341}
.family-sozcuk .menu-word-scene{width:min(100cqw,320cqh);height:min(100cqh,31.25cqw)}
.family-sozcuk .menu-word-board{width:42%;height:96%;object-fit:contain;top:49%}
.family-sozcuk .menu-word-rack{height:48%;object-fit:fill;bottom:0}
.family-sozcuk .menu-word-tile{top:25%;width:11%;aspect-ratio:1}
.family-sozcuk .menu-word-tile.w1{left:9%}.family-sozcuk .menu-word-tile.w2{left:23%}.family-sozcuk .menu-word-tile.w3{left:37%}.family-sozcuk .menu-word-tile.w4{left:51%}.family-sozcuk .menu-word-tile.w5{left:65%}.family-sozcuk .menu-word-tile.w6{left:79%}
.arcade-art .menu-word-tile b{font-size:9cqw}.arcade-art .menu-word-tile small{font-size:2.2cqw}
.menu-batak-scene{background:radial-gradient(circle at 48% 35%,#172b53,#070e22 72%)}.menu-batak-scene::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(#0712268c,#030918a6);box-shadow:inset 0 0 28px #0008}.menu-batak-cloth{inset:0;width:100%;height:100%;object-fit:cover;filter:hue-rotate(125deg) saturate(.68) brightness(.43) contrast(1.2)}.menu-batak-card{z-index:2;width:24%;height:auto;top:14%;filter:drop-shadow(0 5px 4px #0009)}.menu-batak-card.b1{left:16%;transform:rotate(-20deg)}.menu-batak-card.b2{left:31%;top:9%;transform:rotate(-7deg)}.menu-batak-card.b3{left:46%;top:9%;transform:rotate(7deg)}.menu-batak-card.b4{left:61%;transform:rotate(20deg)}
.arcade-dock { width:min(760px,100%); margin:auto; padding:7px 12px; display:flex; justify-content:center; gap:clamp(7px,2vw,25px); border:1px solid #ffffff17; border-radius:18px; background:#120c09d9; backdrop-filter:blur(12px); }
.arcade-dock button { min-width:62px; padding:4px 7px; display:grid; gap:2px; place-items:center; border:0; background:transparent; font-size:21px; }
.arcade-dock span { color:#c5b5a1; font-size:9px; font-weight:800; }

/* Utility pages and the home dock reveal the shared Kantin scene instead of a black panel. */
body{background:radial-gradient(circle at 58% 38%,#6b422326,transparent 52%),linear-gradient(90deg,#0d090780,#0d090738 50%,#0d090766),url('../assets/backgrounds/kantin-home-hero.webp') center/cover fixed no-repeat}
.utility-screen{background:transparent}
.private-room-create{border-color:#d5a636;color:#ffe5a0;background:#25180c}
.private-room-screen{min-height:calc(100dvh - 72px);padding:clamp(16px,3vw,36px);background:radial-gradient(circle at 50% 35%,#173f36 0,#071d1a 70%);color:#fff}
.private-room-screen>header{max-width:1180px;margin:0 auto 24px;display:flex;align-items:center;gap:20px}.private-room-screen>header small{color:#f7c858;font-weight:900;letter-spacing:.15em}.private-room-screen h1{margin:3px 0;font:900 clamp(28px,4vw,46px) Georgia,serif}.private-room-screen p{margin:0;color:#b8c9c2}
.private-room-layout{max-width:1180px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:24px}.private-seats{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:18px;align-content:start}.private-seat{min-height:190px;border:2px dashed #6b897d;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#092820aa;color:#91a89f}.private-seat.filled{border-style:solid;border-color:#d7aa3f;background:linear-gradient(145deg,#174a3d,#0b3028);color:#fff;box-shadow:0 12px 30px #0005}.private-seat img{width:78px;height:78px;border-radius:50%;object-fit:cover;border:3px solid #f3c55d}.private-seat>span{font-size:42px}.private-seat small{color:#f0c65d;font-weight:900;font-size:10px;letter-spacing:.08em}
.private-room-layout>aside{padding:22px;border:1px solid #ffffff1f;border-radius:22px;background:#061713cc}.private-room-layout>aside h2{margin:0 0 5px}.private-friends{margin-top:18px;display:grid;gap:9px;max-height:52vh;overflow:auto}.private-friend{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;padding:9px;border-radius:14px;background:#ffffff0b}.private-friend img{width:42px;height:42px;border-radius:50%;object-fit:cover}.private-friend div{display:grid}.private-friend small{color:#91a89f}.private-invite-row{display:grid;gap:5px;padding:12px;border:1px solid #d8aa3f66;border-radius:14px;background:#d8aa3f12}.private-invite-row>small{color:#b9aa98}.private-invite-row>span{display:flex;gap:8px}
@media(max-width:760px){.private-room-screen{min-height:100dvh;padding:12px}.private-room-screen>header{align-items:flex-start}.private-room-layout{grid-template-columns:1fr}.private-seat{min-height:125px}.private-room-layout>aside{padding:14px}.private-friends{max-height:34vh}}
.arcade-dock{border-color:transparent;background:transparent;box-shadow:none;backdrop-filter:none}
.reward-day,.mission-list article,.store-grid article,.inventory-slot{background:#211711a3;backdrop-filter:blur(7px)}
.family-normalOkey .arcade-label i{background:#70d6b0}.family-normalOkey .arcade-art>span{color:#8ce2c1}

/* Mode and stake lobby */
.room-select { min-height:calc(100dvh - 72px); background:linear-gradient(90deg,#120b08ed,#15100ab0),url('../assets/backgrounds/kantin-home-hero.webp') center/cover; }
.room-head { height:82px; padding:10px clamp(16px,3vw,44px); display:flex; align-items:center; gap:16px; border-bottom:1px solid #ffffff18; background:#100b08c9; }
.room-head>button { width:48px; height:48px; border:1px solid #ffffff20; border-radius:50%; background:#ffffff0b; font-size:27px; }
.room-head div:nth-child(2) { flex:1; }.room-head small { color:#e2b454; font-size:10px; font-weight:900; letter-spacing:.14em; }.room-head h1 { margin:0; font:900 28px Georgia,serif; }
.room-balance { padding:10px 16px; border-radius:12px; background:#251910; color:#f4cb70; }
.room-body { min-height:calc(100dvh - 154px); display:grid; grid-template-columns:clamp(220px,22vw,330px) 1fr; }
.mode-rail { padding:22px 14px; display:grid; align-content:start; gap:10px; border-right:1px solid #ffffff17; background:#100a07a8; }
.mode-rail>small { padding:0 10px; color:#958574; font-size:9px; font-weight:900; letter-spacing:.14em; }
.mode-rail button { min-width:0; padding:12px; display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:10px; border:1px solid transparent; border-radius:13px; background:#ffffff07; text-align:left; }
.mode-rail button.active { border-color:#f0c365; background:linear-gradient(100deg,#be741f,#684018); box-shadow:0 8px 22px #0006; }
.mode-rail img { width:54px; height:40px; object-fit:cover; border-radius:7px; }.mode-rail span { min-width:0; display:grid; }.mode-rail b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mode-rail span small { color:#d8c3aa; font-size:10px; }.mode-rail i { color:#f5d27d; }
.stake-area { min-width:0; padding:clamp(16px,3vw,42px); display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:18px; }
.stake-title h2 { margin:2px 0; font:900 clamp(25px,3vw,40px) Georgia,serif; }.stake-title small { color:#e2b454; font-weight:900; }.stake-title p { margin:4px 0 0; color:#b9aa98; }
.stake-cards { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:clamp(12px,2vw,25px); }
.stake-card { position:relative; min-width:0; padding:clamp(17px,2.4vw,32px) 16px 0; display:grid; grid-template-rows:auto 1fr auto auto; place-items:center; overflow:hidden; border:2px solid #ffffff35; border-radius:26px 26px 17px 17px; background:linear-gradient(#8cd8ff,#dff5ff); color:#215984; box-shadow:0 17px 35px #0007; transition:.2s; }
.stake-card.violet { background:linear-gradient(#b895ff,#eee7ff); color:#673cb5; }.stake-card.gold { background:linear-gradient(#ffb86c,#fff0d5); color:#a64e0c; }
.stake-card.selected { transform:translateY(-6px); border-color:#ffe165; box-shadow:0 18px 42px #0008,0 0 25px #ffd64b99; }
.stake-card>small { font:900 clamp(17px,2vw,27px) Georgia,serif; text-transform:uppercase; }.stake-card>strong { align-self:center; font:900 clamp(35px,5vw,72px) Georgia,serif; }.stake-card>span { margin-bottom:16px; font-weight:900; opacity:.75; }
.stake-card footer { width:calc(100% + 32px); padding:12px 15px; display:flex; justify-content:space-between; background:#fffffff0; font-size:11px; font-weight:900; }.stake-card footer i { color:#8d5b12; }
.play-actions { display:flex; justify-content:flex-end; align-items:stretch; gap:10px; }.quick-play { min-width:min(360px,60vw); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; border:1px solid #ffe17a; border-radius:14px; background:linear-gradient(#f7c63d,#df861c); color:#311b08; box-shadow:0 8px 22px #0007; text-align:left; }.quick-play:disabled { cursor:not-allowed; filter:grayscale(.45); opacity:.58; box-shadow:none; }.quick-play span { display:grid; }.quick-play small { font-size:9px; }.quick-play b { font-size:22px; }.quick-play i { font-size:28px; }

@media (orientation:landscape) and (max-height:600px) {
  .arcade-home { height:calc(100dvh - 58px); }.arcade-dock { padding:3px 8px; }.arcade-dock button { font-size:15px; }.arcade-label { padding:5px 9px; }.arcade-label strong { font-size:clamp(14px,1.8vw,22px); }.arcade-label i{padding:5px 6px;font-size:8px}.arcade-card{border-radius:13px}
  body:has(.room-select) .topbar { display:none; }.room-select { min-height:100dvh; }.room-head { height:58px; padding:5px 12px; }.room-head>button { width:38px; height:38px; }.room-head h1 { font-size:20px; }.room-body { min-height:calc(100dvh - 58px); grid-template-columns:220px 1fr; }.mode-rail { padding:10px 8px; }.mode-rail button { padding:7px; }.stake-area { padding:10px 16px; gap:8px; }.stake-title h2 { font-size:24px; }.stake-title p { font-size:10px; }.stake-cards { gap:12px; }.stake-card { padding-top:12px; border-radius:17px 17px 11px 11px; }.stake-card>small { font-size:15px; }.stake-card>strong { font-size:38px; }.stake-card>span { margin-bottom:6px; font-size:10px; }.stake-card footer { padding:7px 12px; }.play-actions .btn { padding:7px 11px; }.quick-play { padding:6px 11px; }.quick-play b { font-size:16px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .topbar { height: 58px; padding: 5px 12px; }
  .brand img { width:44px; height:44px; }
  .avatar { width: 34px; height: 34px; }.profile { gap: 6px; }.profile small { display: none; }.level { width: 27px; height: 27px; }
  .social-actions { display: flex; gap: 5px; }.social-actions span { display: none; }.social-btn { padding: 6px 8px; font-size: 16px; }.wallet small { display: none; }
  .mobile-lobby { height: calc(100dvh - 58px); min-height: 300px; padding: 7px 9px 9px; gap: 7px; }
  .lobby-heading { align-items: center; }.lobby-heading small { font-size: 8px; }.lobby-heading h1 { margin: 0; font-size: 20px; }
  .lobby-heading-actions > span { display: none; }.resume-pill { padding: 5px 9px; font-size: 10px; }.rewarded-ad-button.compact { min-width:145px; padding:4px 7px; }.rewarded-ad-button.compact>span { width:20px; height:20px; }.rewarded-ad-button.compact>b { font-size:8px; }.rewarded-ad-button.compact small { font-size:6px; }
  .lobby-layout { grid-template-columns: minmax(0, 1fr) clamp(180px, 25vw, 220px); gap: 8px; }
  .game-families { gap: 7px; }.family-card { grid-template-rows: minmax(0, 46%) auto auto; border-radius: 12px; }
  .family-visual span { top: 5px; right: 5px; padding: 2px 5px; font-size: 7px; }.family-card > header { padding: 5px 7px 3px; }.family-card > header small { display: none; }.family-card h2 { font-size: 15px; }
  .family-modes { padding: 0 5px 5px; gap: 4px; }.family-modes button { padding: 5px; border-radius: 7px; }.family-modes button b { font-size: 9px; }.family-modes button small { font-size: 7px; }.family-modes button i { font-size: 8px; }
  .lobby-tools { gap: 6px; }.tool-button { padding: 6px; border-radius: 11px; gap: 2px; }.tool-button > b { width: 24px; border-radius: 7px; font-size: 14px; }.tool-button strong { font-size: 10px; }.tool-button small { display: none; }.tool-button > i { top: 5px; right: 5px; min-width: 16px; height: 16px; font-size: 8px; }
  .utility-screen { min-height: calc(100dvh - 58px); padding: 9px 14px; }.utility-screen > header { margin-bottom: 10px; }.utility-screen h1 { font-size: 24px; }.utility-screen header p { font-size: 11px; }
  .reward-day { min-height: 92px; padding: 7px; }.reward-day b { font-size: 20px; }.reward-day small { font-size: 8px; }.utility-cta { margin-top: 9px; }
  .store-grid article { padding: 10px; }.store-grid article > b { font-size: 25px; }.store-grid h3 { font-size: 13px; }.store-grid p { margin: 4px; font-size: 10px; }
  .inventory-slot { min-height: 90px; padding: 7px; font-size: 10px; }.inventory-slot b { font-size: 22px; }
  .tournament-grid article { min-height: 145px; padding: 10px; }.tournament-grid article > b { font-size: 24px; }.tournament-grid h2 { font-size: 14px; }.tournament-grid p { font-size: 9px; }.stats-summary article { padding: 8px; }.stats-summary b { font-size: 22px; }.match-history { margin-top: 9px; }.match-history h2 { font-size: 15px; }.match-history article { padding: 7px 10px; font-size: 10px; }
}

@media (max-width: 700px) and (orientation: portrait) {
  .rotate-notice { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 9px; background: #100b08; text-align: center; }
  .rotate-notice img { width: 82px; }.rotate-notice b { font: 900 22px Georgia, serif; }.rotate-notice span { color: #b9aa98; }
}

/* Landscape phones: every screen must fit into one viewport without scrolling. */
@media (orientation: landscape) and (max-height: 700px) {
  html, body, #app { width:100%; height:100dvh; min-height:0; overflow:hidden; }
  body { overscroll-behavior:none; }
  #screen { height:calc(100dvh - 58px); min-height:0; overflow:hidden; }
  body:has(.game), body:has(.match-screen), body:has(.room-select) { height:100dvh; }
  body:has(.game) #screen, body:has(.match-screen) #screen, body:has(.room-select) #screen { height:100dvh; }

  .mobile-lobby, .arcade-home, .room-select, .match-screen, .utility-screen { width:100%; height:100%; min-height:0; overflow:hidden; }
  .utility-screen { padding:8px 12px; }
  .utility-screen>header { margin-bottom:7px; gap:9px; }
  .utility-screen>header .btn { padding:6px 9px; }
  .utility-screen h1 { font-size:21px; }.utility-screen header p { font-size:9px; }
  .reward-grid { gap:6px; }.reward-day { min-height:72px; padding:5px; }
  .mission-list { gap:5px; }.mission-list article { padding:7px 10px; gap:3px 10px; font-size:10px; }
  .store-grid { gap:7px; }.store-grid article { min-height:0; padding:7px; }
  .inventory-grid { gap:6px; }.inventory-slot { min-height:72px; }
  .tournament-grid { gap:7px; }.tournament-grid article { min-height:120px; padding:8px; }
  .stats-summary { gap:6px; }.stats-summary article { padding:6px 9px; }.stats-summary b { font-size:19px; }
  .match-history { margin-top:6px; }.match-history article { padding:5px 8px; }

  .profile-modal { height:100dvh; padding:6px; overflow:hidden; }
  .profile-card { width:min(1050px,calc(100% - 8px)); height:calc(100dvh - 12px); max-height:none; overflow:hidden; border-radius:17px; }
  .profile-close { top:7px; right:7px; width:30px; height:30px; font-size:19px; }
  .profile-sheet { position:absolute; inset:0; height:auto; display:grid; grid-template-rows:50px minmax(0,1fr); overflow:hidden; }
  .profile-sheet>header { height:50px; padding:5px 46px 5px 18px; align-items:center; overflow:hidden; }
  .profile-sheet>header small { font-size:8px; }.profile-sheet>header h2 { margin:0; font-size:22px; line-height:1; }
  .profile-tabs{gap:4px}.profile-tabs button{padding:5px 8px;border-radius:7px;font-size:8px}
  .profile-main { min-height:0; height:100%; grid-template-columns:minmax(220px,31%) 1fr; overflow:hidden; }
  .identity-card { min-height:0; padding:9px 14px; overflow:hidden; }
  .profile-photo { width:min(84px,18vh); border-width:3px; border-radius:13px; }.profile-photo span { font-size:36px; }
  .identity-card h3 { margin:5px 0 0; font-size:17px; }.identity-card>p { font-size:10px; }
  .profile-level { height:19px; margin:6px 0; }.profile-level b { font-size:10px; line-height:19px; }
  .photo-picker { margin-bottom:5px; padding:5px 9px; font-size:10px; }
  .identity-card form { gap:4px; }.identity-card form label { gap:2px; font-size:8px; }.identity-card form input { height:28px; padding:4px 7px; font-size:10px; }
  .identity-card form .btn { padding:6px 8px; font-size:10px; }
  .profile-note { padding-top:5px; font-size:7px; }
  .profile-data { min-height:0; padding:9px 14px; overflow:hidden; }
  .profile-data>h3, .profile-achievements h3 { margin:0 0 5px; font-size:15px; }
  .profile-stats { gap:5px; grid-template-columns:repeat(5,minmax(0,1fr)); }
  .profile-stats article { min-height:0; height:clamp(40px,9.2vh,57px); padding:5px 9px; border-radius:8px; }
  .profile-stats small { font-size:8px; }.profile-stats b { font-size:18px; }
  .profile-achievements { margin-top:6px; padding-top:5px; }
  .profile-achievements span { width:34px; height:34px; margin-right:4px; border-radius:8px; font-size:17px; }
  .profile-data:has(.guest-upgrade) .profile-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .profile-data:has(.guest-upgrade) .profile-stats article { height:clamp(35px,7.4vh,46px); padding:4px 7px; }
  .guest-name-readonly { min-height:38px; padding:5px 8px; }.guest-name-readonly small { font-size:7px; }.guest-name-readonly strong { font-size:10px; }
  .guest-lock { margin-top:4px; padding:5px; font-size:7px; }
  .guest-upgrade { margin-top:6px; padding:7px 9px; border-radius:10px; }.guest-upgrade-copy>span { width:26px; height:26px; border-radius:8px; font-size:12px; }.guest-upgrade-copy h3 { font-size:12px; }.guest-upgrade-copy p { font-size:7px; }
  .account-email-form { margin-top:5px; gap:5px; }.account-email-form label { gap:2px; font-size:7px; }.account-email-form input { height:27px; padding:4px 6px; font-size:9px; }.account-email-form .btn { min-height:27px; padding:4px 8px; font-size:8px; }
  .account-providers { margin-top:5px; gap:4px; }.account-provider { padding:4px 6px; gap:5px; }.account-provider i { width:20px; height:20px; font-size:10px; }.account-provider b { font-size:8px; }.account-provider small { font-size:6px; }

  .auth-modal,.auth-gateway { height:100dvh; min-height:0; overflow:hidden; }
  .auth-gateway-head { padding:10px 18px; }.auth-gateway-head>img { width:72px; }.auth-gateway-head button { width:30px; height:30px; font-size:13px; }.auth-gateway-head span { font-size:6px; }
  .auth-gateway-copy { margin:0 5vw; }.auth-gateway-copy small { font-size:7px; }.auth-gateway-copy h1 { margin:2px 0 5px; font-size:clamp(34px,6vw,56px); }.auth-gateway-copy p { font-size:8px; line-height:1.3; }
  .auth-provider-area { width:calc(100% - 20px); padding-top:4px; }.auth-provider-area>p { margin-bottom:4px; font-size:6px; }
  .auth-providers { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }.auth-provider { min-height:44px; padding:4px 7px; grid-template-columns:29px minmax(0,1fr); gap:6px; border-radius:9px; }.auth-provider i { width:27px; height:27px; font-size:15px; }.auth-provider small { font-size:5px; }.auth-provider b { font-size:8px; }
  .auth-feedback { min-height:10px; margin-top:3px; font-size:6px; }.auth-consent { gap:4px; font-size:6px; }.auth-consent input { width:10px; height:10px; margin:0; }
  .auth-gateway>footer { padding:2px 10px 5px; font-size:5px; }

  .social-panel { height:100dvh; max-height:100dvh; overflow:hidden; }
  .social-panel .friend-list, .social-messages { min-height:0; overflow:hidden; }
}