:root{
    --tile: 84px;
    --gap: 1px;
    --btn: clamp(56px, 10vmin, 96px);
    --pad-scale: 1.2;
    --brand: clamp(22px, 6.5vmin, 48px);
    --paneW: clamp(320px, 86vw, 980px);
    --menuScale: 1;
}

/* Запрет выделения и D&D */
*{ box-sizing:border-box; user-select:none; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; }
img, svg, canvas{ -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; }
html,body{
    height:100%; margin:0; color:#eee;
    background:#151012 url("./UI/Pack/Backdrop/Stone_4k_bg.png") center/cover fixed no-repeat;
    font:16px/1.25 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif;
}
#app, .screen, .grid3, .btn, .btn-pad, .cell{
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.screen{ position:fixed; inset:0; display:none; overflow:hidden; }
.screen.show{ display:block; }

.menu-wrap{
    width:var(--paneW);
    margin:0 auto;
    padding: clamp(8px, 3vmin, 20px);
    display:grid;
    grid-template-rows: auto 1fr auto;
    min-height:100svh;
    transform-origin: top center;
    transform: scale(var(--menuScale));
}
.scroll-banner{ position:relative; width:100%; min-height: clamp(56px,12vmin,110px); display:grid; place-items:center; margin:6px 0 10px; }
.game-title{
    margin:0; font-weight:1000; letter-spacing:.04em; text-transform:uppercase;
    font-size:var(--brand);
    line-height:1.06; text-align:center; max-width:92%;
    background-image:linear-gradient(90deg,#f6e3b8,#d7b57c,#a06b3d,#d7b57c,#f6e3b8);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:textFlow 10s linear infinite;
    text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 12px rgba(255,255,255,.08);
}
.game-title .title-line{ display:block; }
@keyframes textFlow{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

/* язык */
.lang-switch{ position:absolute; right:16px; top:50%; transform:translateY(-50%); }
.lang-flag{
    font-size:22px; line-height:1; padding:4px 8px;
    border-radius:10px; border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.12); color:#fff;
    font-family: system-ui, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.lang-menu{
    position:absolute; right:16px; top:calc(50% + 26px); transform:translateY(-50%);
    display:grid; gap:6px; padding:8px; border-radius:12px;
    background:rgba(20,20,20,.9); border:1px solid rgba(255,255,255,.15); color:#eee;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.lang-menu[hidden]{ display:none; }
.lang-menu button{
    font-size:18px; line-height:1; padding:6px 8px; text-align:left;
    border:0; border-radius:8px; background:transparent; cursor:pointer; color:#eee;
}
.lang-menu button:hover{ background:rgba(255,255,255,.06); }

/* кнопки */
.menu-buttons{ display:grid; gap:16px; grid-template-columns:1fr; margin:12px 0; min-height:0; }
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:12px 16px; color:#f6f2ea; font-weight:900;
    text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 10px rgba(255,255,255,.06);
}
.toolbar .left{ display:flex; align-items:center; gap:8px; }
.btn .btn-ico{
    width:1.6em; height:1.6em; background-size:contain; background-repeat:no-repeat; background-position:center;
    filter:drop-shadow(0 1px 6px rgba(0,0,0,.4)); flex:0 0 auto;
}
.btn .btn-txt{ font-weight:1000; font-size:clamp(18px, 4.2vmin, 32px); }

/* Пак-кнопки */
.pack-lg{ background:url("./UI/Pack/Buttons/Long/Button_Wood_lg.png") center/100% 100% no-repeat; min-height:clamp(64px,12vmin,116px); border:0; border-radius:14px; }
.pack-md{ background:url("./UI/Pack/Buttons/Medium/Button_Wood.png") center/100% 100% no-repeat; min-height:clamp(52px,10vmin,92px); border:0; border-radius:14px; }
.pack-s{  background:url("./UI/Pack/Buttons/Little/Button_Wood_l.png") center/100% 100% no-repeat; min-height:clamp(38px,8vmin,74px); border:0; border-radius:12px; padding:10px 14px; }

/* панель / пилюли */
.toolbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:clamp(8px, 2.6vmin, 20px) }
.toolbar .left{ justify-self:start } .toolbar .center{ justify-self:center } .toolbar .right{ justify-self:end }
.pill{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.12); color:#f3f3f3; border:1px solid rgba(255,255,255,.22); }

/* layout */
.game-layout{
    height: calc(100svh - 150px);
    display:grid; gap: clamp(10px,3vmin,22px);
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas:
    "map map"
    "ctrl inv";
    align-items:center; justify-items:center;
    padding:0 clamp(8px,2.6vmin,20px) 100px;
}
.map-holder{ grid-area:map; display:grid; place-items:center; width:min(80vw,100%); z-index:3; }
.ctrl-holder{ grid-area:ctrl; display:grid; place-items:center; gap:8px; z-index:4; }

/* в альбомной ориентации инвентарь столбиком справа */
@media (min-aspect-ratio: 1/1){
    .game-layout{
        grid-template-columns: 1fr auto auto;
        grid-template-rows: 1fr;
        grid-template-areas: "map ctrl inv";
        padding-bottom: 60px;
    }
}

/* пад */
.pad{ --padBtn: calc(var(--btn) * var(--pad-scale)); display:grid; gap:12px;
    grid-template-columns:var(--padBtn) var(--padBtn) var(--padBtn);
    grid-template-rows:var(--padBtn) var(--padBtn) var(--padBtn);
    grid-template-areas: ". up ." "left ctr right" ". down .";
}
.pad [data-mv="N"]{ grid-area:up; } .pad [data-mv="S"]{ grid-area:down; }
.pad [data-mv="W"]{ grid-area:left; } .pad [data-mv="E"]{ grid-area:right; }
#center{ grid-area:ctr; position:relative; overflow:hidden; }
.btn-pad{
    appearance:none; -webkit-appearance:none;
    width:var(--padBtn); height:var(--padBtn);
    display:flex; align-items:center; justify-content:center;
    font-size:calc(var(--padBtn)*.52); line-height:1;
    background:url("./UI/Pack/Buttons/Square/Button_WOOD_s.png") center/100% 100% no-repeat;
    border:0; border-radius:12px;
}

/* уменьшение d‑pad на сверхузких экранах */
@media (max-width: 360px){
    :root{ --pad-scale: 0.95; }
}

/* центр-иконка */
#center .center-icon{ display:block; max-width:60%; max-height:60%; height:auto; width:auto; pointer-events:none; }

/* сетка 3×3 и туман */
.grid3{ display:grid; gap:var(--gap); grid-template-columns:repeat(3,var(--tile)); grid-template-rows:repeat(3,var(--tile)); place-content:center; }
.cell{ position:relative; width:var(--tile); height:var(--tile); overflow:hidden; background:#000; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.cell img{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; object-fit:cover; }
.layer-floor{ z-index:1; }
.layer-fog{ z-index:20; background:#000; }
.cell .feature-icon{
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
    width:calc(var(--tile)*.48); height:auto; z-index:40; image-rendering:auto;
    filter:drop-shadow(0 0 3px rgba(0,0,0,.5));
}
.cell .feature-icon.hero{ width:calc(var(--tile)*.58); z-index:50; }

/* === Инвентарь — тонкая колонка иконок === */
.inv-holder{
    grid-area:inv; align-self:start;
    width:clamp(50px, 11vw, 90px);
    display:grid; gap:8px; align-content:start;
}
.inv-title{ display:none; }
.inv-list{ display:grid; grid-auto-rows:38px; grid-template-columns:1fr; gap:6px; align-items:start; justify-items:center; }
.inv-item{
    position:relative; width:38px; height:38px; display:grid; place-items:center;
    padding:0; border-radius:10px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
}
.inv-item img{ width:26px; height:26px; object-fit:contain; }
.inv-item b{
    position:absolute; top:-6px; right:-6px;
    min-width:16px; height:16px; padding:0 4px;
    background:#222; color:#fff; font-size:11px; line-height:16px; text-align:center;
    border-radius:10px; border:1px solid rgba(255,255,255,.4);
}

/* чуть плотнее на совсем маленьких экранах */
@media (max-width: 420px){
    .game-layout{ gap:8px; padding-bottom:84px; }
    .pad{ --padBtn: calc(var(--btn) * 1.05); gap:8px; }
    .inv-list{ grid-auto-rows:34px; }
    .inv-item{ width:34px; height:34px; }
    .inv-item img{ width:22px; height:22px; }
}

/* хинт и мини-тексты: отступ динамический */
.hint{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(8px + env(safe-area-inset-bottom) + var(--hintPad, 0px));
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
    padding:8px 12px; border-radius:12px; z-index:2; pointer-events:none; color:#f3f3f3;
}
.mini.muted{ color:rgba(255,255,255,.78); }

/* Лидерборд: ограниченная область (≤70% по ширине/высоте) и прокрутка внутри */
.panel{
    width: min(70vw, 900px);
    max-width: 90vw;
    margin: 0 auto;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 10px 26px rgba(0,0,0,.22) inset, 0 4px 12px rgba(0,0,0,.28);
    color:#f1f1f1;
}
.panel-body{
    padding:8px 10px;
    max-height: min(70vh, 720px);
    overflow:auto;
}
.panel-body table{ width:100%; border-collapse:collapse; font-size:12px; color:#eee; }
.panel-body td{ padding:4px 4px; border-bottom:1px dashed rgba(255,255,255,.2); }
.panel-body tr:last-child td{ border-bottom:0; }
.panel-body tr.me td{ font-weight:800; }

/* splash */
.splash{ position:fixed; inset:0; z-index:999; background: radial-gradient(80% 80% at 50% 30%, #1b1b1b, #0b0b0b 70%); display:grid; place-items:center; gap:16px; overflow:hidden; opacity:1; transition:opacity .35s ease; }
.splash.out{ opacity:0; pointer-events:none; }
.splash-block{ display:grid; gap:10px; place-items:center; text-align:center; padding:0 12px; }
.splash-line{
    font-weight:800; letter-spacing:.02em; color:transparent;
    background-image:linear-gradient(90deg,#ffe7b4,#e0b77a,#8f5b2e,#e0b77a,#ffe7b4);
    background-size:300% 100%; -webkit-background-clip:text; background-clip:text;
    animation:textFlow 10s linear infinite;
    text-shadow:0 0 18px rgba(255,255,255,.08);
    font-size:clamp(14px,3.2vmin,24px);
}
.splash-title{
    font-weight:1000; text-transform:uppercase;
    color:transparent;
    background-image:linear-gradient(90deg,#ffe7b4,#e0b77a,#8f5b2e,#e0b77a,#ffe7b4);
    background-size:300% 100%; -webkit-background-clip:text; background-clip:text;
    animation:textFlow 10s linear infinite;
    text-shadow:0 0 22px rgba(255,255,255,.10);
    font-size:clamp(26px,7vmin,64px);
}
.skip{ position:absolute; right:16px; bottom:16px; padding:8px 12px; border-radius:12px; background:#1a1a1a; border:1px solid #444; color:#ddd; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.skip.on{ opacity:.95; pointer-events:auto; } .skip.on:hover{ transform:translateY(-1px); }

/* модалки */
.finish-overlay{ position:fixed; inset:0; z-index:1001; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); }
.finish-overlay.show{ display:flex; }
.finish-bubble{ display:grid; place-items:center; gap:10px; padding:22px 26px; border-radius:16px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 40px rgba(0,0,0,.4); min-width: clamp(260px, 70vw, 520px); text-align:center; color:#fff; }
.finish-title{ font-weight:900; letter-spacing:.08em; text-transform:uppercase; opacity:.95; font-size:clamp(18px,3.6vmin,24px); }
.finish-text{ opacity:.9; font-size:clamp(14px,3vmin,18px); }

.modal-overlay{ position:fixed; inset:0; z-index:1002; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.65); }
.modal-overlay.show{ display:flex; }
.modal-card{ display:grid; gap:10px; padding:18px 20px; border-radius:16px; background:rgba(30,30,35,.92); border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 40px rgba(0,0,0,.4); min-width: clamp(260px, 80vw, 720px); max-width: 92vw; color:#fff; }
.modal-title{ font-weight:900; text-transform:uppercase; letter-spacing:.06em; font-size:clamp(16px,3.4vmin,22px); }
.modal-text{ opacity:.9; font-size:clamp(14px,2.8vmin,18px); }
.modal-scroll{ max-height: 70svh; overflow:auto; padding-right:6px; }
.modal-card.guide{ max-width: 900px; }
.guide-item{ display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:center; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.18); }
.guide-item:last-child{ border-bottom:0; }
.guide-item img{ width:44px; height:auto; object-fit:contain; }

/* меню наград */
.reward-grid{ display:grid; grid-template-columns:repeat(2, minmax(120px,1fr)); gap:10px; }
.reward-btn{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2); cursor:pointer; color:#fff; }
.reward-btn img{ width:36px; height:36px; object-fit:contain; }
.reward-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* «Бонус (реклама)» — плавающая, в углу; компактная версия — иконка */
#reset{
    position:fixed;
    left:50%; transform:translateX(-50%);
    bottom:calc(56px + env(safe-area-inset-bottom));
    z-index:5;
}
#reset.right-anchored{
    left:auto; transform:none;
    right:max(12px, env(safe-area-inset-right));
    bottom:calc(56px + env(safe-area-inset-bottom));
}
#reset.compact{ font-size:0; min-width:auto; padding:10px 12px; }
#reset.compact::after{ content:"🎦"; font-size:20px; line-height:1; }

@media (prefers-reduced-motion:reduce){ .splash{ transition:none; } }

/* минимальные размеры touch‑контролов */
.btn, .btn-pad{ min-width: 48px; min-height: 48px; }
.pad{ padding-bottom: 12px; }