:root{color-scheme:dark;--bg:#0c1020;--panel:#151b30;--stroke:#2b3650;--text:#f4f7ff;--muted:#8290ad;--aqua:#66e1eb;--gold:#efc77d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080b14;color:var(--text);font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{max-width:430px;min-height:100dvh;margin:auto;background:radial-gradient(ellipse 100% 250px at 50% 0%,#18213c 0%,transparent 100%),var(--bg);box-shadow:0 0 50px #0006;padding-bottom:18px}.topbar{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:9px 14px;position:relative}.top-left{display:flex;align-items:center;gap:4px}.icon-button{display:grid;place-items:center;flex:none;width:30px;height:38px;border:0;background:transparent;color:#d7deec;padding:5px}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button:active{transform:scale(.9)}.hidden{display:none!important}.brand{font-size:30px;font-weight:1000;letter-spacing:-2px;line-height:1;white-space:nowrap;text-shadow:0 2px 20px #36d7fb33}.brand span{color:#fff}.brand em{font-style:normal;color:var(--aqua);margin-left:2px}.telegram-top{justify-self:end;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#39bdec,#147ad1);box-shadow:0 5px 18px #258cdd35}.telegram-top svg{width:23px;height:23px;fill:white}.quick-actions{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:7px;padding:0 14px 17px}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:8px 5px;border:1px solid #34415e;border-radius:10px;background:linear-gradient(180deg,#222d49,#172038);font-size:12px;font-weight:800;white-space:nowrap;color:#f1f6ff}.action-btn:active{transform:translateY(1px)}.contact-btn{border-color:#2475a9;background:linear-gradient(120deg,#145d9c,#123c72)}.contact-btn svg{width:18px;height:18px;fill:#fff;flex-shrink:0}main{padding:0 14px}.section{margin-bottom:26px}.section-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.section-head h2{font-size:14px;letter-spacing:1.1px;margin:0;font-weight:900}.section-head h2 span{color:var(--aqua)}.section-head i{height:1px;background:linear-gradient(90deg,#42506b,transparent);flex:1}.count{font-size:9px;letter-spacing:1.3px;color:#71809f}.video-grid,.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.video-card{position:relative;aspect-ratio:1.55;overflow:hidden;border:1px solid #374463;border-radius:12px;background:radial-gradient(circle at 80% 0%,#405078 0%,transparent 50%),linear-gradient(145deg,#252c4a,#0e172a 72%);box-shadow:inset 0 1px #ffffff18}.video-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 35%,#7bd9f008 50%,transparent 60%);background-size:240% 100%;animation:shimmer 7s linear infinite;pointer-events:none}.video-card video,.game-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.video-card .fallback,.game-card .fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.video-card.has-video .fallback,.game-card.has-video .fallback{display:none}.video-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid #66e1eb55;border-radius:50%;background:#56c3ed18;color:var(--aqua);font-size:16px;padding-left:2px}.video-card .fallback b{font-size:10px;letter-spacing:1.5px;color:#c6d4ea}.corner-label{position:absolute;left:10px;top:9px;font-size:9px;font-weight:800;color:#d3e1f8;letter-spacing:1px}.corner-label:before{content:"";display:inline-block;width:5px;height:5px;background:#4be2eb;border-radius:50%;margin-right:5px;vertical-align:2px}.video-card .bottom-label{position:absolute;bottom:0;left:0;right:0;padding:13px 9px 8px;background:linear-gradient(transparent,#081021c9);font-size:9px;letter-spacing:1.1px;color:#cbd5e7}.games-section{margin-top:5px}.game-card{aspect-ratio:1.23;position:relative;display:block;overflow:hidden;border-radius:13px;border:1px solid #41506c;background:radial-gradient(circle at 50% 15%,var(--glow),transparent 62%),linear-gradient(145deg,#1c2945,#0e162b)}.game-card:active{transform:scale(.985)}.game-card .fallback{gap:4px}.game-symbol{font-size:37px;line-height:1.1;filter:drop-shadow(0 6px 14px #0006)}.game-name{font-size:17px;font-weight:900;letter-spacing:2px}.game-english{font-size:9px;font-weight:800;letter-spacing:2px;color:#b6c4db}.game-card .game-gradient{position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,#0d1429bd);pointer-events:none}.game-card.has-video .game-title-overlay{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-weight:900;font-size:17px;text-shadow:0 2px 10px #000}.game-card:not(.has-video) .game-title-overlay{display:none}.bottom-section .video-card{aspect-ratio:1.5}footer{border-top:1px solid #26324a;margin:9px 14px 0;padding:16px 2px;font-weight:900;font-size:14px;color:#8999b9;display:flex;justify-content:space-between}footer span{font-weight:500;font-size:9px;letter-spacing:1px}.overlay,.modal-backdrop{position:fixed;inset:0;background:#050816bd;z-index:20}.overlay[hidden],.modal-backdrop[hidden]{display:none}.drawer{position:fixed;z-index:21;top:0;bottom:0;left:0;width:min(310px,82vw);background:#131c32;border-right:1px solid #33435f;transform:translateX(-105%);transition:transform .23s ease;padding:22px 18px;box-shadow:20px 0 45px #0005}.drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #35415a;padding-bottom:16px;margin-bottom:12px}.drawer-head strong{font-size:24px}.drawer-head small{font-size:10px;color:var(--aqua);margin-left:8px;letter-spacing:1px}.drawer-item{display:block;width:100%;padding:16px 10px;text-align:left;color:#f0f4ff;background:transparent;border:0;border-bottom:1px solid #263552;font-weight:750;font-size:14px}.modal-backdrop{z-index:35;display:grid;place-items:center;padding:20px}.modal{position:relative;width:min(360px,100%);background:#18223b;border:1px solid #40516c;border-radius:18px;padding:25px 20px;box-shadow:0 22px 55px #0008}.modal h2{margin:0 0 8px;font-size:22px}.modal p{color:#9baecb;font-size:12px;line-height:1.6}.close-modal{position:absolute;right:15px;top:13px;border:0;background:transparent;color:#bdcce1;font-size:18px}.modal form{display:grid;gap:12px;margin-top:19px}.modal label{display:grid;gap:7px;font-size:12px;font-weight:750}.modal input{width:100%;height:44px;border:1px solid #3b4d6a;border-radius:9px;padding:0 13px;background:#0c1429;color:white;font:inherit}.submit-btn{height:44px;border:0;border-radius:9px;background:#38b7d4;color:#07152a;font-weight:900;margin-top:5px}.form-notice{min-height:18px}@keyframes shimmer{to{background-position-x:-240%}}@media(max-width:350px){.topbar{padding-left:8px;padding-right:8px}.quick-actions{padding-left:9px;padding-right:9px;gap:5px}.action-btn{font-size:11px}main{padding:0 10px}.video-grid,.game-grid{gap:7px}.game-name{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;scroll-behavior:auto!important}}

/* Uploaded GS25 logo; only the header logo is replaced. */
.brand{display:flex;align-items:center;justify-content:center;line-height:0;text-shadow:none;letter-spacing:normal}
.brand img{display:block;width:112px;max-width:100%;height:auto;object-fit:contain}
@media(max-width:350px){.brand img{width:96px}}


/* GS25-inspired mobile refresh — preserve all interactions and video mapping. */
:root{--bg:#e9f6ff;--panel:#f7fcff;--stroke:#c5dff3;--text:#f4f7ff;--aqua:#00c9df}
body{background:#d8eaf8}
.app-shell{background:linear-gradient(180deg,#0879e8 0px,#0879e8 118px,#e9f6ff 118px,#f5fbff 330px,#e9f6ff 100%);box-shadow:0 0 44px #1b5b9220}
.topbar{height:72px;padding:9px 11px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.top-left{gap:2px;min-width:0}
.topbar .icon-button{width:36px;height:42px;padding:4px;color:#fff}
.topbar .icon-button svg{width:26px;height:26px;stroke-width:2.25}
.topbar #refreshBtn svg{stroke-width:2.2}
.brand img{width:110px}
.telegram-top{width:38px;height:38px;background:#fff;box-shadow:0 3px 11px #005da44a}
.telegram-top svg{fill:#088be5;width:23px;height:23px}
.quick-actions{grid-template-columns:repeat(3,minmax(0,1fr));padding:2px 12px 20px;gap:7px}
.action-btn{min-width:0;min-height:43px;padding:8px 3px;border:1px solid #c1e5fa;border-radius:10px;background:linear-gradient(180deg,#fff,#eefaff);color:#006cc5;box-shadow:0 3px 10px #0966b31c;font-size:12px;font-weight:850;gap:4px;letter-spacing:-.6px}
.contact-btn{border-color:#85d8f4;background:linear-gradient(180deg,#fff,#ebfaff);color:#006cc5}
.contact-btn svg{width:15px;height:15px;fill:#08a4dd;flex:none}
.contact-btn span{white-space:nowrap;min-width:0}
main{padding:0 12px}
.section{margin:0 0 13px}
.video-grid,.game-grid{gap:9px}
.video-card{border-color:#b5d7f4;box-shadow:0 4px 12px #2b7aba1e}
.game-card{border-color:#b5d7f4;box-shadow:0 4px 12px #2b7aba1e}
.games-section{margin-top:0}
.bottom-videos{grid-template-columns:minmax(0,1fr);gap:10px}
.bottom-section .video-card{aspect-ratio:2.75;min-height:112px;border-radius:12px}
footer{color:#34709d;border-top-color:#bfdbef;margin:10px 12px 0}
@media(max-width:370px){.topbar{padding-left:7px;padding-right:9px}.top-left{gap:0}.topbar .icon-button{width:32px}.topbar .icon-button svg{width:24px;height:24px}.brand img{width:93px}.quick-actions{padding-left:9px;padding-right:9px;gap:5px}.action-btn{font-size:11px;letter-spacing:-.7px}.contact-btn svg{width:13px;height:13px}}


/* Revision v3 — ice-white GS25 header, compact square actions, swipe MP4 slider */
body{background:#d9ebf6}
.app-shell{background:linear-gradient(180deg,#f4fbff 0px,#eef9ff 155px,#e9f6ff 320px,#e9f6ff 100%)}
.topbar{height:65px;padding:5px 12px 3px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.top-left{gap:3px}
.topbar .icon-button{width:34px;height:36px;padding:5px;border-radius:9px;color:#fff;background:#087de4;box-shadow:0 2px 7px #0879e822}
.topbar .icon-button svg{width:24px;height:24px}
.brand{padding:5px 7px;background:#fff;border-radius:9px;box-shadow:0 2px 9px #3c85b51a}
.brand img{width:107px}
.telegram-top{width:37px;height:37px;background:#e0f6ff;border:1px solid #a0e3f6;box-shadow:0 2px 8px #0879e822}
.quick-actions{padding:0 12px 9px;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
.action-btn{height:49px;min-height:49px;padding:4px 3px;border-radius:4px;border:1px solid #9bcdf1;background:#fff;color:#0879d7;box-shadow:0 2px 6px #0065a30f;font-size:12px;gap:3px;letter-spacing:-.65px}
.contact-btn{background:#fff;border-color:#9bcdf1}
.contact-btn svg{width:14px;height:14px}
.section{margin-bottom:12px}

.top-videos{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:7px;overscroll-behavior-x:contain}
.top-videos::-webkit-scrollbar{display:none}
.top-videos .video-card{flex:0 0 100%;width:100%;aspect-ratio:1 / 1;scroll-snap-align:start;scroll-snap-stop:always;border-radius:7px}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:15px;padding-top:6px;height:26px}
.slide-arrow{border:0;background:transparent;color:#1374bc;font-size:24px;line-height:20px;width:27px;height:22px;display:grid;place-items:center;padding:0}
.slide-dots{display:flex;gap:6px;align-items:center}
.slide-dot{display:block;width:6px;height:6px;padding:0;border:0;border-radius:50%;background:#aacde6}
.slide-dot.active{background:#087de4;width:17px;border-radius:8px}
@media(max-width:370px){.topbar{padding-left:7px;padding-right:7px}.top-left{gap:2px}.topbar .icon-button{width:30px;height:34px;padding:4px}.topbar .icon-button svg{width:22px;height:22px}.brand{padding:5px 4px}.brand img{width:93px}.quick-actions{gap:4px;padding:0 9px 9px}.action-btn{font-size:11px;gap:2px}.contact-btn svg{width:12px;height:12px}}

/* v4: half-height hero slides, pagination inside, ultra-tight lower video stack */
.top-carousel{position:relative}
.top-videos .video-card{aspect-ratio:2 / 1;min-height:0;border-radius:7px}
.carousel-controls{position:absolute;left:0;right:0;bottom:9px;z-index:4;height:auto;padding:0;pointer-events:none;gap:0}
.slide-arrow{display:none}
.slide-dots{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:9px;padding:7px 11px;background:#071a3699;border:1px solid #ffffff45;border-radius:99px;backdrop-filter:blur(5px)}
.slide-dot,.slide-dot.active{width:9px;height:9px;border-radius:50%;background:#ffffff75;border:1px solid #fff9;box-shadow:0 1px 3px #0003;transition:background .18s,transform .18s}
.slide-dot.active{background:#fff;transform:scale(1.15);border-color:#fff}
.bottom-videos{gap:3px}
.bottom-section .video-card{border-radius:5px}

/* v5: Only the four game tiles are slightly shorter and scale with mobile width. */
.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.game-grid .game-card{width:100%;height:auto;aspect-ratio:1.38}
.game-grid .game-symbol{font-size:clamp(28px,9vw,37px)}
.game-grid .game-name{font-size:clamp(14px,4.2vw,17px)}
.game-grid .game-english{font-size:clamp(8px,2.3vw,9px)}


/* v6: black site background; keep menu position, spread header controls. */
html,body{background:#000}
.app-shell{background:#000;box-shadow:none}
.top-left{gap:9px}
.topbar .icon-button{width:34px}
@media(max-width:370px){.top-left{gap:6px}.topbar .icon-button{width:30px}}

/* v7: bottom copyright/footer removed; no other layout changes. */

/* v8: sample-reference solid white controls; keep the menu's original left anchor. */
.topbar .top-left{gap:clamp(7px,2.5vw,12px)}
.topbar .top-left .icon-button{background:transparent;box-shadow:none;border:0;border-radius:0;width:clamp(31px,8.6vw,38px);height:42px;padding:3px;color:#fff}
.topbar .top-left .icon-button svg{width:clamp(27px,7.4vw,32px);height:clamp(27px,7.4vw,32px);stroke:none;fill:currentColor}
.topbar .top-left #soundBtn svg path[fill="none"]{fill:none}
.topbar .top-left #soundBtn svg{overflow:visible}
@media(max-width:370px){.topbar .top-left{gap:7px}.topbar .top-left .icon-button{width:31px;height:40px;padding:2px}.topbar .top-left .icon-button svg{width:28px;height:28px}}


/* v9: compact, single-baseline header, Telegram immediately after the logo. */
.topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  min-width:0;
}
.topbar .top-left{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:clamp(5px,1.8vw,9px);
  min-width:0;
}
.topbar .top-left .icon-button{
  width:clamp(26px,7.1vw,31px);
  height:36px;
  padding:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.topbar .top-left .icon-button svg{
  display:block;
  width:clamp(24px,6.6vw,29px);
  height:clamp(24px,6.6vw,29px);
  flex:none;
}
.topbar .brand{
  margin-left:auto;
  padding:4px 5px;
  flex:0 1 auto;
  min-width:0;
}
.topbar .brand img{width:clamp(81px,24vw,104px);max-width:100%}
.topbar .telegram-top{
  justify-self:auto;
  flex:0 0 auto;
  margin-left:clamp(5px,1.8vw,9px);
  margin-right:clamp(6px,2vw,10px);
  width:31px;
  height:31px;
}
.topbar .telegram-top svg{width:19px;height:19px}
@media(max-width:370px){
  .topbar{padding-left:7px;padding-right:5px}
  .topbar .top-left{gap:5px}
  .topbar .top-left .icon-button{width:26px;height:34px;padding:1px}
  .topbar .top-left .icon-button svg{width:24px;height:24px}
  .topbar .brand{padding:3px 4px}
  .topbar .brand img{width:clamp(77px,24vw,90px)}
  .topbar .telegram-top{width:29px;height:29px;margin-left:5px;margin-right:6px}
}

/* v10: Restore the GS25 logo to true screen center; move ONLY Telegram inward. */
.topbar{position:relative}
.topbar .brand{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  flex:none;
  z-index:1;
}
.topbar .telegram-top{
  position:absolute;
  left:calc(50% + 52px + 7px);
  top:50%;
  transform:translateY(-50%);
  margin:0;
  z-index:1;
}
@media(max-width:370px){
  .topbar .telegram-top{left:calc(50% + 45px + 5px);margin:0}
}

/* v11 — fine header alignment adjustments only. */
.topbar #menuBtn{position:relative;left:3px}
.topbar #refreshBtn{position:relative;left:5px;top:-2px}
/* Speaker stays at its original v10 position. */
.topbar .telegram-top{left:calc(50% + 52px + 17px)}
@media(max-width:370px){
  .topbar .telegram-top{left:calc(50% + 45px + 14px)}
}

/* v13: speaker spacing and Telegram position only. */
.topbar #soundBtn { position: relative; left: 9px; }
.topbar #soundBtn svg { width: clamp(22px, 6.1vw, 27px); height: clamp(22px, 6.1vw, 27px); }
.topbar .telegram-top { left: calc(50% + 52px + 32px); }
@media (max-width: 370px) {
  .topbar #soundBtn svg { width: 22px; height: 22px; }
  .topbar .telegram-top { left: calc(50% + 45px + 29px); }
}

/* v14: restore speaker size; shift three left controls +3px; Telegram +20px. */
.topbar #menuBtn { left: 6px; }
.topbar #refreshBtn { left: 8px; }
.topbar #soundBtn { left: 12px; }
.topbar #soundBtn svg { width: clamp(24px, 6.6vw, 29px); height: clamp(24px, 6.6vw, 29px); }
.topbar .telegram-top { left: calc(50% + 52px + 52px); }
@media (max-width: 370px) {
  .topbar #soundBtn svg { width: 24px; height: 24px; }
  .topbar .telegram-top { left: calc(50% + 45px + 49px); }
}

/* v15: slightly smaller header icons; refresh +1.5px; Telegram +5px. */
.topbar .top-left .icon-button svg {
  width: clamp(22px, 6.1vw, 27px);
  height: clamp(22px, 6.1vw, 27px);
}
.topbar #soundBtn svg {
  width: clamp(22px, 6.1vw, 27px);
  height: clamp(22px, 6.1vw, 27px);
}
.topbar #refreshBtn { left: 9.5px; }
.topbar .telegram-top { left: calc(50% + 52px + 57px); }
@media (max-width: 370px) {
  .topbar .top-left .icon-button svg,
  .topbar #soundBtn svg { width: 22px; height: 22px; }
  .topbar .telegram-top { left: calc(50% + 45px + 54px); }
}

/* v16: adjust refresh +1.3px, Telegram +5px; add icons without changing labels. */
.topbar #refreshBtn { left: 10.8px; }
.topbar .telegram-top { left: calc(50% + 52px + 62px); }
@media (max-width:370px){ .topbar .telegram-top { left: calc(50% + 45px + 59px); } }
.quick-actions .auth-icon { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-actions .action-btn span { white-space: nowrap; }
@media(max-width:370px){ .quick-actions .auth-icon { width: 13px; height: 13px; flex-basis:13px; } }


/* v17 — enlarge only the three quick-action icons; preserve label positions. */
.quick-actions .action-btn { position: relative; }
.quick-actions .action-btn > svg { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); margin: 0; }
.quick-actions .auth-icon { width: 21px; height: 21px; flex: none; stroke-width: 2; }
.quick-actions .contact-btn > svg { width: 23px; height: 23px; }
.quick-actions .action-btn > span { position: relative; z-index: 1; }
@media(max-width:370px){
  .quick-actions .action-btn > svg { left: 2px; }
  .quick-actions .auth-icon { width: 18px; height: 18px; }
  .quick-actions .contact-btn > svg { width: 20px; height: 20px; }
}


/* v18: black Telegram image near logo; slightly larger quick-action icons/text; slightly smaller top controls. */
.topbar .top-left .icon-button svg {
  width: clamp(20px, 5.7vw, 25px);
  height: clamp(20px, 5.7vw, 25px);
}
.topbar #soundBtn svg {
  width: clamp(20px, 5.7vw, 25px);
  height: clamp(20px, 5.7vw, 25px);
}
.topbar .telegram-top {
  width: 31px;
  height: 31px;
  border-radius: 7px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}
.topbar .telegram-top img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 7px;
}
.quick-actions .action-btn {
  font-size: 13px;
}
.quick-actions .auth-icon {
  width: 24px;
  height: 24px;
}
.quick-actions .contact-btn > svg {
  width: 25px;
  height: 25px;
}
.quick-actions .contact-btn > span {
  display: inline-block;
  transform: translateX(5px);
}
@media(max-width:370px){
  .topbar .top-left .icon-button svg,
  .topbar #soundBtn svg { width: 20px; height: 20px; }
  .topbar .telegram-top { width: 29px; height: 29px; }
  .quick-actions .action-btn { font-size: 12px; }
  .quick-actions .auth-icon { width: 21px; height: 21px; }
  .quick-actions .contact-btn > svg { width: 22px; height: 22px; }
}

/* v19: only requested label and icon size/position adjustments. */
.quick-actions .action-btn { font-size: 14px; }
.quick-actions .contact-btn > span { transform: translateX(10px); }
.quick-actions .action-btn[data-modal="signup"] > svg.auth-icon { width: 27px; height: 27px; }
.topbar .telegram-top { width: 35px; height: 35px; }
@media (max-width:370px) {
  .quick-actions .action-btn { font-size: 13px; }
  .quick-actions .action-btn[data-modal="signup"] > svg.auth-icon { width: 24px; height: 24px; }
  .topbar .telegram-top { width: 33px; height: 33px; }
}

/* v20: move only the login/signup label text; keep icons and button frames fixed. */
.quick-actions .action-btn[data-modal="login"] > span { display:inline-block; transform:translateX(4px); }
.quick-actions .action-btn[data-modal="signup"] > span { display:inline-block; transform:translateX(7px); }

/* v22 — grayscale surfaces only; retain every existing position, size and behavior. */
html, body { background: #999999; }
.app-shell { background: #999999; box-shadow: none; }
/* The three action boxes deliberately stand apart from the gray page. */
.quick-actions .action-btn,
.quick-actions .contact-btn {
  background: #e4e4e4;
  border-color: #686868;
  box-shadow: 0 2px 5px #00000020;
}
/* Retain the existing blue action labels and icons. */
.top-videos .video-card,
.bottom-videos .video-card,
.video-card {
  background: linear-gradient(145deg,#777777,#555555 74%);
  border-color: #757575;
  box-shadow: inset 0 1px #ffffff21;
}
.game-grid .game-card,
.game-card {
  background: linear-gradient(145deg,#707070,#4f4f4f);
  border-color: #777777;
  box-shadow: inset 0 1px #ffffff18;
}
.video-card::before { background: linear-gradient(135deg,transparent 35%,#ffffff0d 50%,transparent 60%); }
.game-card .game-gradient { background:linear-gradient(transparent,#303030b8); }
.video-card .bottom-label { background:linear-gradient(transparent,#333333cb); }
.video-icon { background:#5c5c5c55; border-color:#a7a7a799; }
.slide-dots { background:#555555a8; }
.slide-dot, .slide-dot.active { background:#ddddddaa; }
.slide-dot.active { background:#ffffff; }
.drawer { background:#626262; border-right-color:#848484; }
.drawer-head { border-bottom-color:#888888; }
.drawer-item { border-bottom-color:#808080; }
.overlay,.modal-backdrop { background:#333333bd; }
.modal { background:#626262; border-color:#8a8a8a; }
.modal input { background:#454545; border-color:#929292; }
.submit-btn { background:#d4d4d4; }
/* GS25 and Telegram artwork remain unmodified. */

/* v23 — requested palette: gray sample 53 for page, 38 for action boxes. */
html, body, .app-shell { background: #333333; }
.quick-actions .action-btn,
.quick-actions .contact-btn { background: #6E6E6E; }


/* v24 — requested color #D0D0D0 and compact action row, logo artwork replacement. */
.quick-actions .action-btn, .quick-actions .contact-btn { color: #D0D0D0; }
.quick-actions .action-btn, .quick-actions .contact-btn {
  height: 43px;
  min-height: 43px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* Keep all text/icon alignments intact; only remove unused vertical space below buttons. */
.quick-actions { padding-bottom: 6px; }
/* New metallic logo is already cropped and has transparency. */
.topbar .brand {
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  border-radius: 0;
  padding: 0;
}
.topbar .brand img { width: clamp(81px,24vw,104px); height: auto; display: block; }
.topbar .telegram-top { background: #333333; }
@media(max-width:370px){
 .quick-actions .action-btn,.quick-actions .contact-btn{height:43px;min-height:43px;}
 .topbar .brand img{width:clamp(77px,24vw,90px)}
}

/* v25 — requested text brightness, 1.5px login shift, compact buttons, signup glow only. */
.quick-actions .action-btn,
.quick-actions .contact-btn {
  color: #F5F5F5;
  height: 40px;
  min-height: 40px;
}
.quick-actions .action-btn[data-modal="login"] > span {
  transform: translateX(5.5px);
}
.quick-actions .action-btn[data-modal="signup"] {
  position: relative;
  overflow: visible;
  border-color: #c5d9ec;
  box-shadow: 0 -2px 10px 1px #d6eeff80, 0 2px 10px 1px #d6eeff80,
              inset 0 2px 8px #f0f9ff28, inset 0 -2px 8px #f0f9ff28;
}
@media (max-width:370px) {
  .quick-actions .action-btn,
  .quick-actions .contact-btn { height: 40px; min-height: 40px; }
}

/* v26 — Quick-action buttons only: bright white labels, gentle 3D relief
   and soft glow on all three buttons; add 4px of space before carousel. */
.quick-actions .action-btn,
.quick-actions .contact-btn {
  color: #FFFFFF;
  background: linear-gradient(to bottom, #858585 0%, #727272 22%, #676767 72%, #585858 100%);
  border: 1px solid #b3b3b3;
  box-shadow:
    0 -2px 7px #d6eeff66,
    0 2px 8px #d6eeff73,
    inset 0 2px 2px #ffffff60,
    inset 0 -2px 3px #24242475,
    0 3px 4px #00000040;
  text-shadow: 0 1px 2px #11111165;
}
/* V25 signup glow remains slightly more pronounced than the other two. */
.quick-actions .action-btn[data-modal="signup"] {
  border-color: #c5d9ec;
  box-shadow:
    0 -2px 10px 1px #d6eeff80,
    0 2px 10px 1px #d6eeff80,
    inset 0 2px 2px #ffffff70,
    inset 0 -2px 3px #24242475,
    0 3px 4px #00000040;
}
.quick-actions { padding-bottom: 10px; }

/* v27 — soften quick-action label white to ~80% brightness; lower only contact icon 1.5px. */
.quick-actions .action-btn,
.quick-actions .contact-btn { color: #D9D9D9; }
.quick-actions .contact-btn > svg { transform: translateY(calc(-50% + 1.5px)); }

/* v28 — use the exact signup glow on all three quick-action buttons. */
.quick-actions .action-btn,
.quick-actions .contact-btn,
.quick-actions .action-btn[data-modal="signup"] {
  border-color: #c5d9ec;
  box-shadow:
    0 -2px 10px 1px #d6eeff80,
    0 2px 10px 1px #d6eeff80,
    inset 0 2px 2px #ffffff70,
    inset 0 -2px 3px #24242475,
    0 3px 4px #00000040;
}


/* v29: replace the center PNG brand with the cropped animated MP4 logo. */
.topbar .brand .brand-video {
  display: block;
  width: clamp(81px,24vw,104px);
  height: auto;
  aspect-ratio: 610 / 290;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}
@media (max-width:370px) {
  .topbar .brand .brand-video { width: clamp(77px,24vw,90px); }
}

/* v31: animated logo has real transparency; preserve logo dimensions and position. */
.topbar .brand .brand-animation { background: transparent; }


/* v33: reference-inspired login overlay and truly matched quick-action controls. */
.quick-actions .action-btn,
.quick-actions .action-btn[data-modal="signup"],
.quick-actions .contact-btn {
  height:40px; min-height:40px;
  border:1px solid #c5d9ec;
  background:linear-gradient(to bottom,#858585 0%,#727272 22%,#676767 72%,#585858 100%);
  box-shadow:0 -2px 10px 1px #d6eeff80,0 2px 10px 1px #d6eeff80,inset 0 2px 2px #ffffff70,inset 0 -2px 3px #24242475,0 3px 4px #00000040;
  color:#D9D9D9;
  font-size:14px; font-weight:800; text-shadow:0 1px 2px #11111165;
}
.quick-actions .action-btn > svg,
.quick-actions .action-btn[data-modal="signup"] > svg.auth-icon,
.quick-actions .contact-btn > svg {
  width:23px; height:23px; left:4px;
}
/* The contact text retains the prior tiny offset requested by the user. */
.quick-actions .action-btn[data-modal="login"] > span {transform:translateX(5.5px)}
.quick-actions .action-btn[data-modal="signup"] > span {transform:translateX(7px)}
.quick-actions .contact-btn > span {transform:translateX(10px)}
@media(max-width:370px) {
  .quick-actions .action-btn {font-size:clamp(10px,3.5vw,13px)}
  .quick-actions .action-btn > svg,.quick-actions .action-btn[data-modal="signup"] > svg.auth-icon,.quick-actions .contact-btn > svg{width:20px;height:20px;left:2px}
}
body.modal-open{overflow:hidden}
.modal-backdrop{
  z-index:35;display:flex;align-items:center;justify-content:center;
  padding:12px;background:rgba(0,0,0,.78);overflow-y:auto;
}
.modal{
  width:min(390px,100%);max-height:calc(100dvh - 24px);
  overflow-y:auto;flex-shrink:0;
  background:radial-gradient(ellipse at 50% 115%,#34402955,transparent 60%),linear-gradient(150deg,#162016,#0b130d 70%,#1e281b);
  border:3px solid #82733d;border-radius:25px;
  box-shadow:inset 0 0 0 3px #243719,inset 0 0 0 6px #453b22,0 0 0 4px #25351a,0 15px 55px #000c;
  padding:clamp(20px,4vw,30px) clamp(20px,5vw,28px) 22px;
  color:#eeeeec;
}
.close-modal{top:12px;right:14px;font-size:34px;line-height:1;font-weight:800;color:white;padding:0 4px;z-index:2}
.modal-logo{display:flex;justify-content:center;align-items:center;height:clamp(105px,22dvh,180px);margin:4px 18px 10px}
.modal-logo img{display:block;width:min(78%,245px);height:auto;max-height:100%;object-fit:contain}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.modal form{margin-top:10px;gap:20px}
.modal label{gap:9px;color:#babdb6;font-size:15px;font-weight:500}
.modal input{height:49px;border:0;border-radius:5px;background:#303030;color:#f7f7f7;padding:0 14px;font-size:15px;outline-offset:2px}
.modal input::placeholder{color:#a8a8a8}
.modal input:focus{outline:2px solid #a58c4a}
.modal .submit-btn,.modal-pill{min-height:51px;width:100%;border:0;border-radius:999px;display:flex;justify-content:center;align-items:center;gap:7px;font-size:16px;color:#f7f7f7;font-weight:650}
.modal .submit-btn{margin-top:9px;background:linear-gradient(180deg,#e45006,#ab2702);box-shadow:inset 0 1px 0 #ff7b3980;color:white}
.modal .submit-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.modal-links{display:grid;gap:8px;margin-top:8px}
.modal-pill{background:#2c2c2c}
.modal-pill.telegram-pill{background:#428fe6}
.modal-pill.telegram-pill svg{height:19px;width:19px;fill:white}
.modal .form-notice{color:#d2d2d2;margin:10px 3px 0;min-height:0;text-align:center;font-size:12px}
@media(max-height:680px){.modal-logo{height:90px}.modal{padding-top:14px;padding-bottom:13px}.modal form{gap:12px}.modal .submit-btn,.modal-pill{min-height:43px}.modal input{height:42px}}


/* v35 — ONLY the login/signup pop-up is modified. Homepage stays exactly as v33. */
.modal {background:#333333;}
.modal .submit-btn,
.modal #modalSignupBtn {
  background:#333333;
  color:#e9e9e9;
  border:1px solid #777;
  box-shadow:inset 0 1px 0 #ffffff26,inset 0 -3px 6px #00000050,0 -3px 12px #c9eaff55,0 4px 12px #c9eaff55;
}
.modal .telegram-pill {
  /* Keep its original blue, add only a glow. */
  box-shadow:0 -3px 12px #c9eaff55,0 4px 12px #c9eaff55;
}
.modal input {height:40px;width:94%;margin-inline:auto;display:block;}
.modal form label {display:block;}
.modal .modal-member-icon {width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
@media(max-height:680px){.modal input{height:38px;}}


/* v36: modal-only adjustments. Remove the exterior gold framing and move just the field labels up 2px. */
.modal {
  border: 2px solid #686868;
  box-shadow: 0 15px 55px #0009, inset 0 0 0 1px #ffffff12;
}
.modal .modal-field-title {
  display: inline-block;
  position: relative;
  top: -7px;
}


/* v38: popup only. Wider login inputs; signup shows reference-style code step.
   Homepage UI and its interactions remain unchanged from v37. */
.modal #previewForm input { width:100%; }
.modal #signupPreviewForm input { width:100%; }
.modal #previewForm[hidden],
.modal #signupPreviewForm[hidden],
.modal .modal-links[hidden] { display:none!important; }
.modal #signupPreviewForm { display:grid; gap:8px; margin-top:10px; }
.modal #signupPreviewForm label { display:block; }
.modal #signupPreviewForm .modal-field-title { display:block; text-align:center; font-weight:750; font-size:14px; color:#e0e0e0; margin-bottom:4px; }
.modal #signupPreviewForm input { background:#444; border:1px solid #242424; color:#f1f1f1; text-align:center; border-radius:3px; }
.modal #signupPreviewForm .signup-next-btn { width:100%; margin-top:2px; min-height:40px; border-radius:4px; background:#333333; border:1px solid #777; color:#e9e9e9; box-shadow:inset 0 1px 0 #ffffff26,inset 0 -3px 6px #00000050,0 -3px 12px #c9eaff55,0 4px 12px #c9eaff55; font-weight:850; }
.modal #signupPreviewForm .signup-code-note { padding:0; margin:0; text-align:center; color:#dedede; font-size:11px; font-weight:650; }

/* v39: popup-only refinements; leave homepage and other components untouched. */
.modal #previewForm input {
  background: #414141;
  border: 1px solid #666666;
  box-shadow: inset 0 1px 2px #00000030, 0 0 0 1px #ffffff08;
}
.modal #previewForm input:focus {
  border-color: #8b8b8b;
  outline: 1px solid #a9a9a9;
  outline-offset: 0;
}
.modal #signupPreviewForm .modal-field-title {
  top: -12px; /* v37 -7px plus requested -5px */
}
.modal #signupPreviewForm input {
  transform: translateY(-3.5px);
}


/* v40 — signup popup only; v39 homepage selectors remain unchanged. */
.modal #registrationForm[hidden]{display:none!important}
.modal #registrationForm{display:grid;gap:9px;margin-top:8px}
.modal #registrationForm label{display:block;font-size:12px;color:#d5d5d5}
.modal #registrationForm input,.modal #registrationForm select{
  display:block;width:100%;height:37px;margin-top:6px;padding:0 10px;
  border:1px solid #666;background:#414141;color:#f3f3f3;
  box-shadow:inset 0 1px 2px #0003;border-radius:3px;
  font:inherit;font-size:13px;
}
.modal #registrationForm input:focus,.modal #registrationForm select:focus{outline:1px solid #a9a9a9;border-color:#999}
.modal #registrationForm .registration-title{text-align:center;font-size:14px;font-weight:750;margin-bottom:2px}
.modal #registrationForm .signup-divider{height:1px;background:#777;margin:0 2px 4px}
.modal #registrationForm .phone-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.modal #registrationForm .field-error{display:block;min-height:0;margin:4px 0 0;color:#ffb4b4;font-size:11px;line-height:1.4}
.modal #registrationForm .field-error:empty{display:none}
.modal #registrationForm .registration-hint{color:#d6c291;font-size:10px;text-align:center;line-height:1.5}
.modal #registrationForm .registration-submit{border-radius:4px;min-height:42px;margin-top:6px}
.modal #registrationForm .registration-notice{text-align:center;color:#efb9b9;font-size:12px;min-height:0;margin:1px 0 0}
.modal #registrationForm .registration-notice.success{color:#a5f0c4}
.modal #signupPreviewForm input{transform:translateY(-3.5px)}


/* v42 — signup flow typography and input dimensions only. All homepage styles unchanged. */
.modal #registrationForm .registration-label {
  display: block;
  text-align: center;
  margin-bottom: 3px;
}
.modal #registrationForm .registration-hint {
  text-align: center;
  color: #ff9f35;
  font-size: 11px;
  line-height: 1.55;
}
.modal #registrationForm input,
.modal #registrationForm select {
  height: 31px;
  margin-top: 3px;
  width: calc(100% + 16px);
  margin-left: -8px;
  margin-right: -8px;
  text-align: center;
}
.modal #registrationForm .phone-fields {
  width: calc(100% + 16px);
  margin-left: -8px;
  margin-right: -8px;
}
.modal #registrationForm .phone-fields input,
.modal #registrationForm .phone-fields select {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}


/* v43: signup popups only. Keep homepage and login UI unchanged. */
.modal #signupPreviewForm .signup-code-note {
  position: relative;
  top: 3px;
}
.modal #registrationForm .registration-label {
  text-align: left;
  color: #a6a6a6;
  font-weight: 500;
}
.modal #registrationForm input,
.modal #registrationForm select {
  height: 26px;
  min-height: 26px;
  line-height: 26px;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
.modal #registrationForm select {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
}
.modal #registrationForm .phone-carrier {
  grid-column: 1 / -1;
}
.modal #registrationForm .registration-hint { text-align: center; }


/* v44 — registration modal only; keep homepage and login unchanged. */
.modal #registrationForm .signup-divider {
  background: #ffffff;
  height: 1px;
  opacity: .9;
}
.modal #registrationForm .registration-hint {
  font-size: 9px;
  line-height: 1.5;
  color: #ff9f35;
}
.modal #registrationForm input,
.modal #registrationForm select {
  height: 23px;
  min-height: 23px;
  line-height: normal;
  padding-top: 0;
  padding-bottom: 0;
}
.modal #registrationForm .phone-fields {
  grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr) minmax(0,1fr) minmax(0,1fr);
  gap: 4px;
  align-items: center;
}
.modal #registrationForm .phone-carrier {
  grid-column: auto;
  font-size: 11px;
  padding-inline: 2px;
}
.modal #registrationForm .phone-fields select:not(.phone-carrier) { padding-inline: 0; }
.modal #registrationForm .phone-fields input { padding-inline: 2px; }
.modal #registrationForm .registration-expiration-note {
  margin: 4px 0 0;
  color: #d0d0d0;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.65;
}

/* v45 — registration step only. The home page, login and referral step are unchanged. */
.modal:has(#registrationForm:not([hidden])) {
  width: min(326px, calc(100vw - 30px));
  padding: 15px 17px 17px;
}
.modal:has(#registrationForm:not([hidden])) .modal-logo {
  height: clamp(72px, 16dvh, 112px);
  margin: 0 10px 5px;
}
.modal #registrationForm {
  gap: 6px;
  margin-top: 5px;
}
.modal #registrationForm label {
  font-size: 11px;
}

.modal #registrationForm input,
.modal #registrationForm select {
  width: 96%;
  height: 21px;
  min-height: 21px;
  margin: 2px auto 0;
  padding-inline: 6px;
  font-size: 11px;
  line-height: normal;
}
.modal #registrationForm .phone-fields {
  width: 96%;
  margin: 2px auto 0;
  grid-template-columns: minmax(0,.9fr) minmax(0,.975fr) minmax(0,.8fr) minmax(0,.8fr);
  gap: 3px;
}
.modal #registrationForm .phone-fields input,
.modal #registrationForm .phone-fields select {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-inline: 1px;
  font-size: 10px;
}
.modal #registrationForm .phone-fields .phone-carrier {
  font-size: 9px;
  padding: 0;
}
.modal #registrationForm .registration-hint,
.modal #registrationForm .registration-expiration-note {
  color: #ff9f35;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}
.modal #registrationForm .registration-expiration-note {
  margin-top: 2px;
}
.modal #registrationForm .registration-submit {
  min-height: 37px;
  margin-top: 3px;
}


/* v46: popup layout only; narrower and taller proportions, with compact carrier. */
.modal {
  width: min(298px, calc(100vw - 24px));
  padding: 19px 15px 23px;
}
.modal:has(#registrationForm:not([hidden])) {
  width: min(298px, calc(100vw - 24px));
  padding: 18px 15px 23px;
}
.modal .modal-logo {
  margin: 4px 10px 14px;
}
.modal #registrationForm {
  gap: 9px;
}
.modal #registrationForm .registration-label {
  margin-bottom: 3px;
}
.modal #registrationForm .phone-fields {
  width: 96%;
  grid-template-columns: minmax(0, .73fr) minmax(0, .78fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 3px;
}
.modal #registrationForm .phone-carrier {
  font-size: 10px;
  text-align: center;
  text-align-last: center;
}
@media (max-width: 340px) {
  .modal, .modal:has(#registrationForm:not([hidden])) {
    width: calc(100vw - 18px);
    padding-inline: 12px;
  }
}

/* v47: Only login and referral popups scale as a whole, keeping their proportions.
   The registration popup retains its v46 dimensions. */
.modal:has(#previewForm:not([hidden])) {
  zoom: 0.733333;
}
.modal:has(#signupPreviewForm:not([hidden])) {
  zoom: 0.766667;
}
/* Registration step: slightly lighter input fills and lighter outer field labels. */
.modal #registrationForm input,
.modal #registrationForm select {
  background-color: #4b4b4b;
}
.modal #registrationForm .registration-label {
  color: #bdbdbd;
}

/* v48: popup-only refinements. Main homepage styles remain unchanged. */
/* Login: 2.2 -> 2.6 on the same 3-point scale. */
.modal:has(#previewForm:not([hidden])) { zoom: .866667; }
/* Referral popup: a wider, less vertically stretched layout. */
.modal:has(#signupPreviewForm:not([hidden])) {
  zoom: 1;
  width: min(344px, calc(100vw - 24px));
  padding: 11px 17px 13px;
}
.modal:has(#signupPreviewForm:not([hidden])) .modal-logo {
  height: clamp(56px, 12dvh, 76px);
  margin: 0 8px 3px;
}
.modal:has(#signupPreviewForm:not([hidden])) #signupPreviewForm {
  margin-top: 3px;
  gap: 4px;
}
.modal:has(#signupPreviewForm:not([hidden])) #signupPreviewForm label {
  margin: 0;
}
.modal:has(#signupPreviewForm:not([hidden])) #signupPreviewForm input {
  height: 34px;
  min-height: 34px;
}
.modal:has(#signupPreviewForm:not([hidden])) #signupPreviewForm .signup-next-btn {
  min-height: 34px;
  margin-top: 0;
}
.modal:has(#signupPreviewForm:not([hidden])) .modal-links {
  gap: 4px;
  margin-top: 5px;
}
.modal:has(#signupPreviewForm:not([hidden])) .modal-pill { min-height: 38px; }
/* Signup submission button: remove only its halo; keep colors and functionality. */
.modal #registrationForm .registration-submit {
  box-shadow: none;
  filter: none;
}
/* Reduce rounded corners by approximately half, only inside popup. */
.modal { border-radius: 12px; }
.modal input,
.modal select,
.modal #signupPreviewForm input,
.modal #registrationForm input,
.modal #registrationForm select { border-radius: 2px; }
.modal .submit-btn,
.modal .modal-pill,
.modal #signupPreviewForm .signup-next-btn,
.modal #registrationForm .registration-submit { border-radius: 7px; }


/* v49: popup sizing only — login 2.6 -> 2.75; referral +10% height. */
.modal:has(#previewForm:not([hidden])) { zoom: .916667; }
.modal:has(#signupPreviewForm:not([hidden])) {
  padding-top: 23px;
  padding-bottom: 25px;
}

/* v50: Move only the logo inside the referral-code popup up by 3px. */
.modal:has(#signupPreviewForm:not([hidden])) .modal-logo {
  position: relative;
  top: -3px;
}

/* v51 — center live validation statuses under registration inputs. */
.modal #registrationForm .live-field-status{display:block;text-align:center;color:#ff4d4f;font-size:10px;line-height:1.4;margin-top:4px;}
.modal #registrationForm .live-field-status.is-valid{color:#43d879;}
.modal #registrationForm .live-field-status.is-pending{color:#c2c2c2;}


/* Signup footer spacing retained from the older popup layout. */
.modal #registrationForm .registration-expiration-note {margin:0;line-height:1.3;}
.modal #registrationForm .registration-submit {margin-top:1px;}
.modal:has(#registrationForm:not([hidden])) {padding-bottom:10px;}
/* On short displays the outer backdrop scrolls without clipping the popup. */
.modal-backdrop {overflow-y:auto; align-items:safe center;}
.modal:has(#previewForm:not([hidden])) {max-height:none; overflow:visible;}

/* v57: authentic Turnstile integration area; other UI styling untouched. */
.modal .turnstile-slot {
  width:100%; min-height:66px; margin:3px 0 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.modal .turnstile-slot .turnstile-mount {width:100%; display:flex; justify-content:center;}
.modal .turnstile-unconfigured {font-size:11px; color:#c5c5c5; text-align:center; padding:16px 8px; margin:0;}
.modal .turnstile-unconfigured[hidden] {display:none;}

/* v58 — restore compact popup spacing without changing homepage or inputs. */
/* The Turnstile area is real-widget space and must remain available. */
.modal:has(#previewForm:not([hidden])) {
  padding-top: 12px;
  padding-bottom: 12px;
}
.modal:has(#previewForm:not([hidden])) .modal-logo {
  margin-top: 0;
  margin-bottom: 3px;
}
.modal:has(#previewForm:not([hidden])) #previewForm {
  margin-top: 4px;
  gap: 11px;
}
.modal:has(#previewForm:not([hidden])) .modal-links {
  margin-top: 5px;
  gap: 5px;
}
.modal:has(#registrationForm:not([hidden])) {
  padding-top: 12px;
  padding-bottom: 10px;
}
.modal:has(#registrationForm:not([hidden])) .modal-logo {
  margin-top: 0;
  margin-bottom: 4px;
}
.modal #registrationForm {
  gap: 6px;
  margin-top: 4px;
}
.modal #registrationForm .registration-label {
  margin-bottom: 2px;
}
.modal #registrationForm .live-field-status,
.modal #registrationForm .field-error {
  font-size: 8px;
  line-height: 1.45;
  margin-top: 2px;
}
.modal #registrationForm .live-field-status:not(.is-valid):not(.is-pending) {
  color: #ff4d4f;
}



/* v59 — popup geometry only. Keep main page and all other styles untouched. */
/* Login: wider, remove excess space above the GRAY logo and compact vertical rhythm. */
.modal:has(#previewForm:not([hidden])) {
  zoom: 1;
  width: min(350px, calc(100vw - 24px));
  padding: 9px 16px 11px;
}
.modal:has(#previewForm:not([hidden])) .modal-logo {
  height: clamp(64px, 12dvh, 84px);
  margin: 0 8px 2px;
}
.modal:has(#previewForm:not([hidden])) #previewForm {
  gap: 8px;
  margin-top: 2px;
}
.modal:has(#previewForm:not([hidden])) #previewForm label {
  margin: 0;
}
.modal:has(#previewForm:not([hidden])) .modal-links {
  margin-top: 4px;
  gap: 4px;
}
/* Registration: exactly the same outer width as login; fields expand with it. */
.modal:has(#registrationForm:not([hidden])) {
  width: min(350px, calc(100vw - 24px));
  padding: 11px 16px 10px;
}
.modal:has(#registrationForm:not([hidden])) #registrationForm input,
.modal:has(#registrationForm:not([hidden])) #registrationForm select,
.modal:has(#registrationForm:not([hidden])) #registrationForm .phone-fields {
  max-width: 100%;
}
@media (max-width:340px) {
  .modal:has(#previewForm:not([hidden])),
  .modal:has(#registrationForm:not([hidden])) {
    width: calc(100vw - 18px);
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* v60 — only requested login/registration popup refinements. */
/* Login: 3 -> 2.7 in horizontal width; keep its vertical layout. */
.modal:has(#previewForm:not([hidden])) {
  width: min(315px, calc(100vw - 18px));
  padding-bottom: 6px;
}
/* A little more space between ID and password fields. */
.modal:has(#previewForm:not([hidden])) #previewForm {
  gap: 13px;
}
.modal:has(#previewForm:not([hidden])) .modal-field-title {
  font-size: 13px;
}
/* Pink validation messages, while preserving green success and neutral pending. */
.modal #registrationForm .field-error,
.modal #registrationForm .live-field-status:not(.is-valid):not(.is-pending) {
  color: #ff8db8;
}
.modal #registrationForm .live-field-status.is-valid { color: #43d879; }
.modal #registrationForm .live-field-status.is-pending { color: #c2c2c2; }
/* Match the existing luminous signup/login modal buttons. */
.modal #registrationForm .registration-submit {
  box-shadow: inset 0 1px 0 #ffffff26, inset 0 -3px 6px #00000050,
              0 -3px 12px #c9eaff55, 0 4px 12px #c9eaff55;
  filter: none;
}

/* v61 — targeted popup refinements only; homepage and all other controls unchanged. */
/* Move the password title and its field down together by 5px. */
.modal:has(#previewForm:not([hidden])) #previewForm label:nth-of-type(2) {
  margin-top: 5px;
}
/* Reduce only the login ID/password text-entry boxes. */
.modal:has(#previewForm:not([hidden])) #previewForm input {
  height: 34px;
  min-height: 34px;
}
/* Slightly smaller GRAY animated logo only on the registration details step. */
.modal:has(#registrationForm:not([hidden])) .modal-logo img {
  width: min(72%, 225px);
  max-height: 90%;
}


/* v62 — only login field dimensions and registration labels/new PIN. */
/* Reduce only the two login titles and text-entry boxes. */
.modal:has(#previewForm:not([hidden])) #previewForm .modal-field-title {
  font-size: 12px;
}
.modal:has(#previewForm:not([hidden])) #previewForm input {
  height: 31px;
  min-height: 31px;
}
/* Align registration labels directly above the left edge of their 96%-width input. */
.modal #registrationForm label > .registration-label {
  display: block;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-size: 10px;
  line-height: 1.3;
}
/* Exchange PIN matches existing registration fields in height, alignment and styling. */
.modal #registrationForm input[name="withdrawalPin"] {
  font-variant-numeric: tabular-nums;
}



/* v67 mobile usability: only requested input/toggle controls, no homepage layout changes. */
/* 16px is required for iOS Safari not to auto zoom when focusing a text input.
   Keep original fixed heights, borders, positions and popup dimensions. */
@media (hover:none), (pointer:coarse){
 .modal input:not([type=checkbox]),.modal select,.modal textarea{font-size:16px!important;}
 button,a,.modal label{touch-action:manipulation;}
}

/* v69: restore original password input widths; center requested signup titles and bank selection. */
.modal #registrationForm label:has(input[name="password"]) > .registration-label,
.modal #registrationForm label:has(input[name="passwordConfirm"]) > .registration-label,
.modal #registrationForm label:has(input[name="withdrawalPin"]) > .registration-label {
  text-align: center;
}
.modal #registrationForm select[name="bank"] {
  text-align: center;
  text-align-last: center;
}

/* v72: signup-only typography alignment. Cloudflare and behavior unchanged. */
/* Field titles belong above the inputs, aligned with the inputs' left edges. */
.modal #registrationForm label:has(input[name="password"]) > .registration-label,
.modal #registrationForm label:has(input[name="passwordConfirm"]) > .registration-label {
  text-align: left;
}
/* The live confirmation hint is separate from the field title and stays centered. */
.modal #registrationForm label:has(input[name="passwordConfirm"]) > .field-error {
  text-align: center;
}
/* Move just the bank's placeholder/selection text 2px to the right. */
.modal #registrationForm select[name="bank"] {
  padding-left: 14px;
  padding-right: 10px;
}

/* v74: align only withdrawal PIN title with ID/nickname; preserve box and hints. */
.modal #registrationForm label:has(input[name="withdrawalPin"]) > .registration-label {
  text-align: left;
}

/* v83: smoother mobile interactions, without changing layout/colors/content. */
/* Freeze only the shimmer on cards outside the viewport to reduce painting. */
.video-card.is-offscreen::before { animation-play-state: paused; }
/* Short press feedback for interactive controls; keep all base dimensions and colors. */
@media (hover: none), (pointer: coarse) {
  .quick-actions .action-btn,
  .topbar .icon-button,
  .topbar .telegram-top,
  .slide-arrow,
  .slide-dot,
  .game-card,
  .modal button,
  .drawer button,
  .drawer a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .quick-actions .action-btn:active,
  .slide-arrow:active,
  .modal button:active,
  .drawer button:active,
  .drawer a:active { opacity: .78; filter: brightness(1.13); }
  .game-card:active { opacity: .86; }
  .topbar .icon-button:active,
  .topbar .telegram-top:active { opacity: .7; }
}
/* Immediate visual confirmation for mouse clicks as well as touch input. */
.quick-actions .action-btn:active,
.modal button:active,
.drawer button:active,
.drawer a:active,
.slide-arrow:active { opacity:.80; }

/* v85: signup validation stays inline and centered; native alert reserved for successful completion. */
.modal #registrationForm .field-error { text-align: center; }


/* v86: full-screen scrollable menu only. The homepage and authentication forms stay unchanged. */
.drawer.drawer-full-menu{
  width:min(430px,100vw);
  max-width:100vw;
  padding:0;
  background:#101110;
  border-right:1px solid #363d34;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  overscroll-behavior:contain;
}
.drawer-full-head{
  flex:none;
  min-height:66px;
  margin:0;
  padding:14px 18px;
  border-bottom:1px solid #363d34;
  background:#171a16;
}
.drawer-full-head strong{font-size:20px;letter-spacing:0}
.drawer-full-head strong small{color:#b8d3a2}
.drawer-full-head .icon-button{font-size:25px;color:#e0e4d9}
.drawer-menu-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:10px 9px 24px;scrollbar-width:thin;scrollbar-color:#67744f #161915}
.menu-primary-actions,.menu-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.menu-primary-actions{margin-bottom:7px}
.menu-primary-btn{
  min-width:0;min-height:66px;display:flex;align-items:center;justify-content:center;gap:4px;
  border:1px solid #a79a52;border-radius:6px;
  background:linear-gradient(130deg,#30321c,#191e15 65%,#363117);
  color:#f6efca;font-size:17px;font-weight:850;text-shadow:0 1px 6px #ffce7355;
  box-shadow:inset 0 1px 2px #ffe8a759,0 0 8px #d1ad4148;
  animation:menuButtonGlow 3s ease-in-out infinite alternate;
}
.menu-primary-symbol{font-size:24px;line-height:1;font-weight:900;color:#f4d77e}
.menu-primary-btn:active{filter:brightness(1.3);transform:scale(.98)}
@keyframes menuButtonGlow{from{box-shadow:inset 0 1px 2px #ffe8a73d,0 0 5px #d1ad4138}to{box-shadow:inset 0 1px 3px #ffe8a77a,0 0 12px #d1ad4180}}
.menu-category-grid{margin-bottom:10px}
.menu-category-grid button{
  min-width:0;min-height:51px;padding:8px 2px;
  color:#eaece7;font-size:clamp(10px,3.1vw,14px);font-weight:650;
  background:linear-gradient(180deg,#262923,#10130f);
  border:1px solid #526b2a;border-radius:3px;
  box-shadow:inset 0 1px #ffffff17;
  white-space:nowrap;
}
.menu-category-grid button:active{filter:brightness(1.25);transform:scale(.98)}
.menu-feature-grid,.menu-bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.menu-feature-grid{margin-bottom:8px}
.menu-bottom-grid{margin-top:8px}
.menu-media-card{
  display:block;width:100%;min-width:0;aspect-ratio:2.15;
  padding:0;cursor:pointer;border-radius:5px;
  border:1px solid #556a32;
  background:linear-gradient(140deg,#283321,#101810);
  font:inherit;color:#fff;
}
.menu-media-card .fallback{gap:4px}
.menu-media-card .video-icon{width:24px;height:24px;font-size:11px;border-color:#caba6a88;color:#d7bc6b}
.menu-media-caption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:8px 5px 4px;text-align:center;
  font-weight:850;font-size:clamp(11px,3.4vw,15px);color:#f0dfb2;background:linear-gradient(transparent,#060b08c9);text-shadow:0 1px 6px #000}
.menu-media-card:active{filter:brightness(1.24)}

.menu-holdem-card .menu-media-caption{font-size:clamp(15px,4.5vw,20px);padding-bottom:8px}
@media (prefers-reduced-motion:reduce){.menu-primary-btn{animation:none}}


/* v87: compact two-thirds slide-in menu; isolated to the drawer only. */
.drawer.drawer-full-menu{
  width:min(70vw,300px);
  max-width:300px;
  transform:translateX(-105%);
  transition:transform .23s ease;
  box-shadow:12px 0 30px #0008;
}
.drawer.drawer-full-menu.open{transform:translateX(0)}
.drawer-full-head{min-height:52px;padding:6px 10px;margin:0}
.drawer-brand{display:flex;align-items:center;justify-content:flex-start;width:min(150px,75%);height:43px;overflow:hidden}
.drawer-brand img{display:block;max-width:100%;max-height:42px;object-fit:contain;object-position:left center}
.drawer-full-head .icon-button{width:30px;height:33px;font-size:20px}
.drawer-menu-content{padding:7px 7px 16px}
.menu-primary-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:7px}
.menu-primary-btn{min-height:42px;font-size:12px;gap:2px;padding:5px 2px;border-radius:5px}
.menu-category-grid{gap:3px;margin-bottom:7px}
.menu-category-grid button{min-height:37px;padding:5px 1px;font-size:clamp(9px,2.35vw,11px);letter-spacing:-.4px}
.menu-feature-grid{gap:4px;margin-bottom:5px}
.menu-media-card{aspect-ratio:2.15;border-radius:4px}
.menu-media-card .fallback{gap:1px}
.menu-media-card .video-icon{width:18px;height:18px;font-size:9px}
.menu-media-caption{font-size:clamp(9px,2.45vw,11px);padding:6px 2px 3px}
.menu-holdem-card{aspect-ratio:3.45}
.menu-holdem-card .menu-media-caption{font-size:clamp(11px,3vw,14px);padding-bottom:5px}
/* Six wide banners stacked one under the other, not a two-column grid. */
.menu-bottom-grid{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:6px}
.menu-bottom-grid .menu-media-card{aspect-ratio:2.75}
@media (max-width:340px){
  .drawer.drawer-full-menu{width:72vw}
  .menu-category-grid button{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .drawer.drawer-full-menu{transition:none}
}

/* v88: three primary menu buttons in one row, with precisely the homepage
   login/signup glow and neutral #333333 page background. Other menu stays. */
.drawer.drawer-full-menu,
.drawer.drawer-full-menu .drawer-full-head {
  background: #333333;
}
.drawer.drawer-full-menu .menu-primary-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.drawer.drawer-full-menu .menu-primary-btn {
  min-width: 0;
  min-height: 40px;
  height: 40px;
  padding: 5px 1px;
  border: 1px solid #c5d9ec;
  border-radius: 5px;
  background: linear-gradient(to bottom,#858585 0%,#727272 22%,#676767 72%,#585858 100%);
  box-shadow: 0 -2px 10px 1px #d6eeff80,0 2px 10px 1px #d6eeff80,inset 0 2px 2px #ffffff70,inset 0 -2px 3px #24242475,0 3px 4px #00000040;
  color: #D9D9D9;
  text-shadow: 0 1px 2px #11111165;
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 800;
  animation: none;
}
.drawer.drawer-full-menu .menu-primary-btn:active {
  filter: brightness(1.2);
  transform: translateY(1px);
}


/* v90: widen only the mobile slide-in drawer to approximately five sixths
   (2.5 / 3) of the viewport. Keep the homepage and dialogs untouched. */
.drawer.drawer-full-menu {
  width: min(83.333vw, 360px);
  max-width: 360px;
  background: #333333;
  border-right-color: #777777;
}
.drawer.drawer-full-menu .drawer-full-head {
  background: #333333;
  border-bottom-color: #777777;
  min-height: 55px;
}
.drawer.drawer-full-menu .drawer-menu-content {
  padding: 9px 10px 20px;
  scrollbar-color: #888888 #333333;
}
.drawer.drawer-full-menu .menu-primary-actions { gap: 7px; margin-bottom: 10px; }
.drawer.drawer-full-menu .menu-primary-btn {
  position: relative;
  height: 45px;
  min-height: 45px;
  font-size: clamp(11px, 3vw, 14px);
  padding: 5px 3px;
}
/* The icon sits at the left without moving the centered button text. */
.drawer.drawer-full-menu .menu-primary-btn > span {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}
.drawer.drawer-full-menu .menu-action-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.drawer.drawer-full-menu .menu-category-grid { gap: 5px; margin-bottom: 10px; }
.drawer.drawer-full-menu .menu-category-grid button {
  min-height: 41px;
  font-size: clamp(10px, 2.6vw, 12px);
  color: #e4e4e4;
  background: linear-gradient(180deg, #4a4a4a 0%, #3d3d3d 24%, #2f2f2f 70%, #262626 100%);
  border: 1px solid #8a8a8a;
  box-shadow: inset 0 1px 0 #ffffff1c, inset 0 -1px 0 #00000035, 0 1px 3px #00000028;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.drawer.drawer-full-menu .menu-category-grid button:active {
  filter: brightness(1.12);
  transform: translateY(1px);
}
.drawer.drawer-full-menu .menu-feature-grid { gap: 6px; margin-bottom: 7px; }
.drawer.drawer-full-menu .menu-media-card {
  background: #333333;
  border-color: #858585;
}
.drawer.drawer-full-menu .menu-media-caption {
  background: linear-gradient(transparent, #333333e8);
  color: #e7e7e7;
}
.drawer.drawer-full-menu .menu-media-card .video-icon {
  border-color: #aaaaaa88;
  color: #dddddd;
}
.drawer.drawer-full-menu .menu-bottom-grid { gap: 8px; margin-top: 8px; }
@media (max-width: 340px) {
  .drawer.drawer-full-menu { width: 83.333vw; }
  .drawer.drawer-full-menu .menu-primary-btn { font-size: 10px; }
  .drawer.drawer-full-menu .menu-action-icon { width: 11px; height: 11px; left: 3px; }
}

/* v91: adjust only the three drawer button text positions; icons and layout unchanged. */
.drawer.drawer-full-menu .menu-primary-actions > .menu-primary-btn:nth-child(1) > span { transform: translateX(2px); }
.drawer.drawer-full-menu .menu-primary-actions > .menu-primary-btn:nth-child(2) > span { transform: translateX(5px); }


/* v92: retain touch scrolling while hiding only the drawer's scrollbar; move 문의 text +1px. */

.drawer.drawer-full-menu .drawer-menu-content { scrollbar-width: none; -ms-overflow-style: none; }
.drawer.drawer-full-menu .drawer-menu-content::-webkit-scrollbar { display: none; width: 0; height: 0; }


/* v93 — homepage-only compact side gutters and button-label adjustment.
   Keep modal, drawer sizing, admin UI and original assets/behavior intact. */
.app-shell > main { padding-left: 4px; padding-right: 4px; }
.app-shell > .quick-actions { padding-left: 4px; padding-right: 4px; }
.app-shell > .topbar { padding-left: 4px; padding-right: 4px; }
.app-shell > main .video-grid,
.app-shell > main .game-grid { gap: 7px; }
/* Move labels vertically without changing the existing horizontal offsets. */
.app-shell > .quick-actions .action-btn[data-modal="login"] > span { transform: translate(5.5px, 1.5px); }
.app-shell > .quick-actions .action-btn[data-modal="signup"] > span { transform: translate(7px, 1.5px); }
.app-shell > .quick-actions .contact-btn > span { transform: translate(10px, 1.5px); }
.drawer.drawer-full-menu .menu-primary-actions > .menu-primary-btn:nth-child(1) > span { transform: translate(2px, 1.5px); }
.drawer.drawer-full-menu .menu-primary-actions > .menu-primary-btn:nth-child(2) > span { transform: translate(5px, 1.5px); }

/* Enlarge only the homepage hamburger artwork, not the button hitbox. */
.app-shell > .topbar #menuBtn svg { transform: scale(1.13); transform-origin: center; }
/* Server lookup uncertainty and referral errors use the existing submit-error pink. */
.modal #registrationForm .live-field-status.is-pending { color: #EFB9B9; }
.modal:has(#signupPreviewForm:not([hidden])) .form-notice { color: #EFB9B9; }

/* v95: center only the menu header logo, leaving close button in its original place. */
.drawer.drawer-full-menu .drawer-full-head { position: relative; justify-content: center; }
.drawer.drawer-full-menu .drawer-brand { width: min(172px, 67%); max-width: 67%; height: 43px; justify-content: center; margin: 0 auto; }
.drawer.drawer-full-menu .drawer-brand img { max-width: 100%; max-height: 42px; object-position: center center; }
.drawer.drawer-full-menu .drawer-full-head > #closeMenu { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

/* v97: match only the four homepage game tiles to their 16:9 MP4 sources.
   This prevents horizontal cropping and letterboxing without stretching video. */

/* Bottom six tiles are interactive, without altering their appearance. */
.bottom-videos .clickable-bottom-video { cursor: pointer; }
.bottom-videos .clickable-bottom-video:focus-visible { outline: 2px solid #e5e5e5; outline-offset: 2px; }

/* v98: four game MP4s have their embedded black bars removed (960x480).
   Match these tiles to the actual 2:1 visual content without clipping/stretching. */


/* v101 — homepage video geometry only; keep widths, assets and interactions intact.
   Top slider height 3 -> 2.5 (5/6); game tiles height 3 -> 3.4 (17/15).
   Square corners only for the six homepage bottom video cards. */
.app-shell > main .top-videos .video-card { aspect-ratio: 12 / 5; }

.app-shell > main .bottom-videos .video-card { border-radius: 0; }

/* v102 — adjust heights only; retain existing widths and button/media behavior.
   Main games: 3.4 -> 3.6 height (+1/17).
   Drawer casino/slot and holdem: 3 -> 3.3 height (+10%).
   Straight corners for only six drawer bottom video tiles. */
.app-shell > main .game-grid .game-card { aspect-ratio: 5 / 3; }
.drawer.drawer-full-menu .menu-feature-grid .menu-media-card { aspect-ratio: 43 / 22; }
.drawer.drawer-full-menu .menu-holdem .menu-holdem-card { aspect-ratio: 69 / 22; }
.drawer.drawer-full-menu .menu-bottom-grid .menu-media-card { border-radius: 0; }

/* v103 — only static PNG media renderers; keep every original card dimension. */
.video-card .card-static-image,
.game-card .card-static-image {
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
}

/* Requested: shift only the drawer customer-service label 2px to the right. */
.drawer.drawer-full-menu .menu-primary-actions > .menu-primary-btn:nth-child(3) > span { transform: translate(4px, 1.5px); }

/* Touch and keyboard-accessibility improvements: no geometry changes. */
@media (pointer: coarse) {
  .icon-button, .action-btn, .slide-arrow, .menu-primary-btn,
  .menu-category-grid button, .menu-media-card, .clickable-bottom-video,
  .game-card, .modal-pill, .submit-btn, .close-modal { touch-action: manipulation; }
}
.drawer.drawer-full-menu button:focus-visible,
.app-shell button:focus-visible,
.app-shell a:focus-visible,
.modal button:focus-visible,
.modal input:focus-visible,
.modal select:focus-visible { outline: 2px solid #dedede; outline-offset: 2px; }

/* Four homepage game tiles: visible tactile feedback without changing layout or navigation. */
.app-shell > main .game-grid .game-card {
  cursor:pointer;
  transform-origin:center;
  -webkit-tap-highlight-color:transparent;
}
.app-shell > main .game-grid .game-card:active {
  transform:scale(.975);
  filter:brightness(.84);
}

/* Mobile keyboard safety: modal content remains scrollable on short viewports. */
@media (max-width:430px) {
  .modal-backdrop {overflow-y:auto;overscroll-behavior:contain}
  .modal {max-height:calc(100dvh - 24px);overflow-y:auto}
}