/* =======================================================================
   Look presets - everything here only activates when the <html> tag carries
   data-look-* attributes (Admin > Appearance). Loaded after site.css.
   ======================================================================= */

/* ---------- accent colours ---------- */
[data-look-accent="pink"]  { --accent: #ff4fa3; --accent2: #ff9a3c; }
[data-look-accent="blue"]  { --accent: #3b82f6; --accent2: #22d3ee; }
[data-look-accent="green"] { --accent: #10b981; --accent2: #a3e635; }
[data-look-accent="gold"]  { --accent: #f5b301; --accent2: #ff7a18; }
[data-look-accent="red"]   { --accent: #ef4444; --accent2: #f97316; }

/* ---------- corner shape ---------- */
[data-look-shape="round"] :is(.game-card, .why-card, .card, .mini-top, .pay-box, .order-card, .lk-card, .contact-box) { border-radius: 26px; }
[data-look-shape="round"] :is(.pkg-card, .search input, .field) { border-radius: 20px; }
[data-look-shape="round"] :is(.btn, .lk-btn) { border-radius: 18px; }
[data-look-shape="sharp"] :is(.game-card, .why-card, .card, .mini-top, .pay-box, .order-card, .lk-card, .contact-box, .pkg-card, .btn, .lk-btn, .slides) { border-radius: 5px; }

/* ---------- glow ---------- */
[data-look-glow="soft"] :is(.game-card, .why-card, .card, .mini-top, .pkg-card, .order-card, .lk-card, .contact-box) { box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow); }
[data-look-glow="soft"] :is(.btn, .lk-btn) { box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
[data-look-glow="strong"] :is(.game-card, .why-card, .card, .mini-top, .pkg-card, .order-card, .lk-card, .contact-box) { box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 4px var(--accent), var(--shadow); }
[data-look-glow="strong"] :is(.btn, .lk-btn) { box-shadow: 0 0 26px color-mix(in srgb, var(--accent2) 70%, transparent), 0 0 4px var(--accent2); }
[data-look-glow="strong"] :is(h1, .section-title) { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---------- background: plain / 3D ---------- */
[data-look-bg="plain"] .bg-orbs span, [data-look-bg="plain"] .bg-orbs::before, [data-look-bg="plain"] .bg-orbs::after { display: none; }
[data-look-bg="3d"] .bg-orbs::before { display: none; }          /* the flat grid is replaced by the 3D floor */
[data-look-bg="3d"] .bg-orbs span { opacity: .2; }

.look-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.look-scene.in-host { position: absolute; border-radius: inherit; z-index: 0; }
.look-horizon { position: absolute; left: 0; right: 0; bottom: 36%; height: 38%; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent2) 50%, transparent), transparent 68%); opacity: .8; }
.look-floor-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; perspective: 380px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%); mask-image: linear-gradient(to top, #000 35%, transparent 100%); }
.look-floor { position: absolute; left: -70%; right: -70%; top: 0; bottom: -30%; transform: rotateX(64deg); transform-origin: 50% 100%;
    background-image: linear-gradient(color-mix(in srgb, var(--accent) 80%, #fff) 2px, transparent 2px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, #fff) 2px, transparent 2px);
    background-size: 64px 64px; animation: lkFloor 2.6s linear infinite; }
@keyframes lkFloor { to { background-position: 0 64px; } }

.l3-wrap { position: absolute; left: var(--x); top: var(--y); perspective: 700px; will-change: transform;
    translate: calc(var(--px, 0) * var(--depth, 20) * 1px) calc(var(--py, 0) * var(--depth, 20) * 1px);
    animation: lkFloat var(--f, 7s) ease-in-out infinite alternate; }
@keyframes lkFloat { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
.l3-cube { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: lkSpin var(--t, 20s) linear infinite; }
.l3-cube i { position: absolute; inset: 0; border: 2px solid color-mix(in srgb, var(--c) 85%, #fff); background: color-mix(in srgb, var(--c) 16%, transparent);
    box-shadow: inset 0 0 16px color-mix(in srgb, var(--c) 45%, transparent), 0 0 12px color-mix(in srgb, var(--c) 35%, transparent); }
.l3-cube i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.l3-cube i:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.l3-cube i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.l3-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.l3-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.l3-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
@keyframes lkSpin { from { transform: rotateX(0) rotateY(0) rotateZ(0); } to { transform: rotateX(360deg) rotateY(540deg) rotateZ(180deg); } }
[data-theme="light"] .look-scene { opacity: .55; }

/* ---------- cards: 3D depth / tilt ---------- */
[data-look-cards="depth"] :is(.game-card, .why-card, .card, .mini-top, .pkg-card, .order-card, .pay-box, .lk-card, .contact-box),
[data-look-cards="tilt"] :is(.game-card, .why-card, .card, .mini-top, .pkg-card, .order-card, .pay-box, .lk-card, .contact-box) {
    background-image: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .2));
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .3),
                0 6px 0 color-mix(in srgb, var(--accent) 24%, #05010f), 0 18px 28px rgba(0, 0, 0, .45);
}
[data-theme="light"][data-look-cards="depth"] :is(.game-card, .why-card, .card, .mini-top, .pkg-card, .order-card, .pay-box, .lk-card, .contact-box),
[data-theme="light"][data-look-cards="tilt"] :is(.game-card, .why-card, .card, .mini-top, .pkg-card, .order-card, .pay-box, .lk-card, .contact-box) {
    box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(80, 40, 160, .12), 0 6px 0 rgba(124, 58, 237, .18), 0 16px 26px rgba(80, 40, 160, .22);
}
[data-look-cards="tilt"] :is(.game-card, .why-card, .lk-card) { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out, box-shadow .25s; will-change: transform; }
[data-look-cards="tilt"] :is(.game-card):hover { transform: perspective(900px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.03); }
[data-look-cards="tilt"] :is(.why-card, .lk-card):hover { transform: perspective(900px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* ---------- buttons: 3D pressable ---------- */
[data-look-buttons="3d"] :is(.btn:not(.btn-ghost), .lk-btn) {
    border: 0; transform: translateY(0);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, #fff) 0%, var(--accent) 22%, var(--accent2) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 5px 0 color-mix(in srgb, var(--accent) 50%, #14031f), 0 10px 18px rgba(0, 0, 0, .4);
    transition: transform .08s, box-shadow .08s, filter .2s;
}
[data-look-buttons="3d"] :is(.btn:not(.btn-ghost), .lk-btn):hover { transform: translateY(-1px); filter: brightness(1.08);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 6px 0 color-mix(in srgb, var(--accent) 50%, #14031f), 0 14px 22px rgba(0, 0, 0, .42); }
[data-look-buttons="3d"] :is(.btn:not(.btn-ghost), .lk-btn):active { transform: translateY(5px) scale(1);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 color-mix(in srgb, var(--accent) 50%, #14031f), 0 3px 6px rgba(0, 0, 0, .4); }
[data-look-buttons="3d"] :is(.btn-ghost) { box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15); transition: transform .08s, box-shadow .08s; }
[data-look-buttons="3d"] :is(.btn-ghost):active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0, 0, 0, .35); }
[data-look-buttons="3d"] :is(.chip) { box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15); }
[data-look-buttons="3d"] :is(.chip):active { transform: translateY(3px); box-shadow: none; }
[data-look-buttons="3d"] :is(.btn-buy)[disabled] { box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }

/* ---------- website style: 3D ---------- */
[data-look-style="3d"] :is(h1, .section-title, .brand-name, .buy-total) {
    text-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000),
                 0 3px 0 color-mix(in srgb, var(--accent) 40%, #000), 0 7px 10px rgba(0, 0, 0, .5);
}
[data-theme="light"][data-look-style="3d"] :is(h1, .section-title, .brand-name, .buy-total) {
    text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(124, 58, 237, .3), 0 3px 0 rgba(124, 58, 237, .18), 0 6px 8px rgba(80, 40, 160, .25);
}
[data-look-style="3d"] .topbar { box-shadow: 0 5px 0 rgba(0, 0, 0, .28), 0 14px 22px rgba(0, 0, 0, .35); }
[data-look-style="3d"] .buy-bar { box-shadow: 0 -5px 0 rgba(0, 0, 0, .25), 0 -14px 24px rgba(0, 0, 0, .35); }
[data-look-style="3d"] :is(.why-icon, .pkg-emoji, .medal, .pod-medal) { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .5)); }
[data-look-style="3d"] .pkg-card img { filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .55)); }
[data-look-style="3d"] .game-thumb img, [data-look-style="3d"] .thumb img { box-shadow: 0 10px 18px rgba(0, 0, 0, .45); }
[data-look-style="3d"] .slides { box-shadow: 0 8px 0 color-mix(in srgb, var(--accent) 28%, #05010f), 0 22px 36px rgba(0, 0, 0, .5); }
[data-look-style="3d"] .price-pill { box-shadow: 0 3px 0 rgba(120, 10, 70, .6); }

/* ---------- Back button ---------- */
.back-wrap { padding-top: 12px; padding-bottom: 0; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text);
    font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform .15s, border-color .15s; }
.back-btn:hover { transform: translateX(-3px); border-color: var(--accent); }
[data-look-buttons="3d"] .back-btn { box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
[data-look-buttons="3d"] .back-btn:active { transform: translateY(3px); box-shadow: none; }

/* ---------- Telegram contact (About section) ---------- */
.contact-wrap { margin-top: 18px; }
.contact-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.contact-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.6; }
.btn-telegram { background: linear-gradient(135deg, #2aabee, #229ed9) !important; box-shadow: 0 6px 18px rgba(34, 158, 217, .45); }
[data-look-buttons="3d"] .btn-telegram { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 5px 0 #145d85, 0 10px 18px rgba(0, 0, 0, .4) !important; }
@media (max-width: 600px) { .contact-box { flex-direction: column; align-items: stretch; text-align: center; } .contact-box .btn { width: 100%; } }

/* ---------- admin preview ---------- */
.lk-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.lk-side { position: sticky; top: 14px; }
.lk-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 10px 0; }
.lk-presets form { margin: 0; }
.lk-preset { width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; border: 2px solid var(--border); background: var(--card2); color: var(--text); cursor: pointer; font: inherit; transition: transform .15s, border-color .15s; }
.lk-preset span { color: var(--muted); font-size: .85rem; } .lk-preset em { color: var(--ok); font-style: normal; font-weight: 700; font-size: .8rem; }
.lk-preset:hover { transform: translateY(-2px); border-color: var(--accent); } .lk-preset.on { border-color: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 25%, transparent); }
.lk-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.lk-opt { cursor: pointer; } .lk-opt input { position: absolute; opacity: 0; pointer-events: none; }
.lk-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--border); background: var(--card2); transition: border-color .15s, transform .15s; }
.lk-opt small { color: var(--muted); font-weight: 400; }
.lk-opt:hover span { transform: translateY(-2px); }
.lk-opt input:checked + span { border-color: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 25%, transparent); }
.lk-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lk-save { margin: 6px 0 24px; }
.lk-stage { position: relative; overflow: hidden; min-height: 230px; padding: 16px; border-radius: 14px; background: radial-gradient(120% 100% at 50% 0, var(--bg2), var(--bg)); border: 1px solid var(--border); }
[data-look-bg="grid"] .lk-stage { background-image: linear-gradient(rgba(155, 92, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 92, 255, .14) 1px, transparent 1px), radial-gradient(120% 100% at 50% 0, var(--bg2), var(--bg)); background-size: 30px 30px, 30px 30px, auto; }
.lk-sample { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.lk-sample h3 { margin: 4px 0 2px; } .lk-sample p { margin: 0 0 10px; }
.lk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 1000px) { .lk-layout { grid-template-columns: 1fr; } .lk-side { position: static; order: -1; } }

/* ---------- phones / reduced motion ---------- */
@media (max-width: 700px) {
    .look-floor { background-size: 48px 48px; }
    [data-look-cards="tilt"] :is(.game-card, .why-card):hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .look-floor, .l3-wrap, .l3-cube { animation: none !important; } }

/* =======================================================================
   Phones: compact sizes (smaller cards, thinner 3D edges, smaller buttons)
   ======================================================================= */
@media (max-width: 600px) {
    /* About cards: icon on the left, text on the right -> about 1/2 the height */
    .why-grid { gap: 8px; }
    .why-card { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; }
    .why-icon { grid-row: 1 / span 2; font-size: 1.5rem; line-height: 1; }
    .why-card h3 { margin: 0; font-size: .95rem; line-height: 1.35; }
    .why-card p { grid-column: 2; font-size: .8rem; line-height: 1.45; }

    /* Telegram box */
    .contact-wrap { margin-top: 10px; }
    .contact-box { padding: 10px 12px; gap: 8px; border-radius: 14px; }
    .contact-text strong { font-size: .9rem; }
    .contact-text span { font-size: .78rem; }
    .btn-telegram { padding: 8px 14px; font-size: .88rem; border-radius: 12px; }

    /* titles and general buttons */
    .section-title { font-size: 1.1rem; margin: 16px 0 8px; }
    .btn { padding: 8px 16px; font-size: .9rem; }
    .game-card .name { font-size: .76rem; padding: 6px 4px; }
    .back-btn { padding: 5px 12px; font-size: .8rem; }
    .back-wrap { padding-top: 8px; }

    /* thinner 3D edges so cards do not look heavy on a small screen */
    [data-look-cards="depth"] :is(.game-card, .why-card, .card, .mini-top, .pkg-card, .order-card, .pay-box, .lk-card, .contact-box),
    [data-look-cards="tilt"] :is(.game-card, .why-card, .card, .mini-top, .pkg-card, .order-card, .pay-box, .lk-card, .contact-box) {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .28),
                    0 3px 0 color-mix(in srgb, var(--accent) 24%, #05010f), 0 8px 14px rgba(0, 0, 0, .4);
    }
    [data-look-buttons="3d"] :is(.btn:not(.btn-ghost), .lk-btn) {
        box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 color-mix(in srgb, var(--accent) 50%, #14031f), 0 6px 10px rgba(0, 0, 0, .35);
    }
    [data-look-buttons="3d"] :is(.btn:not(.btn-ghost), .lk-btn):active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 transparent, 0 2px 4px rgba(0, 0, 0, .35); }
    [data-look-buttons="3d"] .btn-telegram { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 #145d85, 0 6px 10px rgba(0, 0, 0, .35) !important; }
    [data-look-style="3d"] :is(h1, .section-title, .brand-name, .buy-total) {
        text-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 65%, #000), 0 2px 0 color-mix(in srgb, var(--accent) 45%, #000), 0 4px 6px rgba(0, 0, 0, .45);
    }
    [data-look-style="3d"] .topbar { box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 8px 12px rgba(0, 0, 0, .3); }
    [data-look-style="3d"] .slides { box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 28%, #05010f), 0 12px 20px rgba(0, 0, 0, .45); }
    [data-look-shape="round"] :is(.game-card, .why-card, .card, .mini-top, .pay-box, .order-card, .lk-card, .contact-box) { border-radius: 18px; }
}