styles.css - main - veranda/TypeGame

styles.css
170 строк48 KB
veranda
Обновить игры и карту приключений
09 авг 2026, 00:59
09 авг 2026, 00:5947e89c0
:root{--ink:#173b55;--muted:#58717e;--teal:#078d86;--mint:#dff6ed;--sun:#ffd34e;--orange:#ee6b38;--paper:#fffdf5;--shadow:0 14px 35px rgba(7,66,76,.2)}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;min-height:100vh;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:linear-gradient(#64d7e8 0 36%,#22aaba 36% 41%,#f3d98a 41% 100%);background-attachment:fixed}button,a,input,select,textarea{font:inherit}button,a{touch-action:manipulation}.skip-link{position:fixed;left:8px;top:-60px;z-index:99;background:#fff;padding:12px;border-radius:10px}.skip-link:focus{top:8px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:4px solid #ffb21b;outline-offset:3px}.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;opacity:.7}.sky i{position:absolute;font-style:normal;font-size:58px;animation:drift 22s linear infinite}.sky i:nth-child(1){top:5%;left:-10%}.sky i:nth-child(2){top:24%;left:-25%;animation-delay:-11s}.sky i:nth-child(3){top:14%;left:-15%;font-size:27px;animation-delay:-5s}@keyframes drift{to{left:110%}}
#app{position:relative;z-index:1;max-width:1280px;margin:auto;padding:18px;min-height:100vh}.screen{animation:arrive .35s ease}@keyframes arrive{from{opacity:0;transform:translateY(8px)}}.site-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:10px 14px;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}.brand{display:flex;align-items:center;gap:11px;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left}.brand img{width:62px;height:62px;object-fit:contain;border-radius:18px}.brand b,.brand small{display:block}.brand b{font-size:22px;text-transform:uppercase}.brand small{color:var(--teal)}.site-head nav{display:flex;align-items:center;gap:8px}.nav-btn,.pearls,.vk{min-height:46px;border:0;border-radius:15px;padding:10px 13px;background:#e9f6f1;color:var(--ink);font-weight:900;text-decoration:none;cursor:pointer}.vk{display:grid;place-items:center;background:#087be5;color:#fff}.pearls{background:#fff2ae}.hero{min-height:280px;display:grid;grid-template-columns:1fr 330px;align-items:center;overflow:hidden;padding:32px 42px;border-radius:34px;background:linear-gradient(120deg,rgba(255,255,255,.97),rgba(255,247,193,.94));box-shadow:var(--shadow)}.hero h1{font-size:clamp(38px,6vw,70px);line-height:.97;margin:12px 0;color:#a43f22;text-shadow:0 3px #ffd34e}.hero p{font-size:20px;margin:0}.hero img{width:100%;height:270px;object-fit:cover;border-radius:34% 34% 45% 45%;filter:drop-shadow(0 15px 10px #617a7144)}.eyebrow,.genre{display:inline-block;border-radius:99px;padding:6px 11px;background:#ffdc5b;color:#784814;font-weight:900;font-size:13px;text-transform:uppercase}.lesson-banner{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0;padding:12px;border-radius:16px;background:#443389;color:#fff;font-weight:800}.lesson-banner button{border:0;border-radius:10px;padding:7px 12px;cursor:pointer}.library-tools{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:20px 0}.filters,.grade-picker,.actions{display:flex;flex-wrap:wrap;gap:9px}.chip{min-height:44px;padding:8px 15px;border:2px solid #fff;border-radius:99px;background:#eaf8f2;color:var(--ink);font-weight:900;cursor:pointer}.chip.active{background:var(--sun);box-shadow:0 4px 0 #b77a0b}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 18px;border:0;border-radius:15px;color:#fff;font-weight:900;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 rgba(29,63,69,.35);transition:.15s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:linear-gradient(#ff965a,#dc4e29)}.btn.teacher{background:linear-gradient(#7a65c7,#514096)}.btn.ghost{background:#e9f6f1;color:var(--ink)}.btn.danger{background:#b83d3d}.btn.big{padding:15px 28px;font-size:20px}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.game-card{overflow:hidden;border-radius:27px;background:var(--paper);box-shadow:0 9px 0 #5f9d93,var(--shadow);transition:.2s}.game-card:hover{transform:translateY(-5px)}.cover{height:190px;position:relative;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover;transition:.4s}.game-card:hover .cover img{transform:scale(1.06)}.cover>span{position:absolute;right:13px;bottom:12px;width:57px;height:57px;display:grid;place-items:center;border-radius:50%;background:#fff8d4;font-size:34px;box-shadow:0 5px 12px #183a4f55}.card-copy{padding:17px}.card-copy h2{margin:9px 0 2px;font-size:23px}.card-copy p{margin:0;color:var(--muted)}.score{margin:12px 0}.play{width:100%}footer{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.9);font-weight:800}footer a{color:#186bb4}.panel,.launch,.result{padding:clamp(20px,4vw,44px);border-radius:30px;background:rgba(255,253,245,.96);box-shadow:var(--shadow)}.panel.narrow{max-width:680px;margin:auto}.back{min-height:44px;border:0;background:none;color:#256a79;font-weight:900;cursor:pointer}.lead{font-size:19px;color:var(--muted)}.launch{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}.launch>img{width:100%;max-height:520px;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}.launch h1{font-size:clamp(34px,5vw,55px);line-height:1.03;margin:12px 0}.launch ul{list-style:none;padding:0;font-size:19px}.launch li{margin:10px 0}.label{display:block;margin:20px 0 8px;font-weight:900}.launch .big{margin-top:25px}.lesson-layout{display:grid;grid-template-columns:1fr 330px;gap:28px}.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.topics label,.frequency{cursor:pointer}.topics input,.frequency input{position:absolute;opacity:0}.topics span,.frequency span{display:block;min-height:47px;padding:11px 12px;border:2px solid #d4e6e0;border-radius:13px;background:#fff}.topics input:checked+span,.frequency input:checked+span{border-color:#6c56bd;background:#eeeaff;box-shadow:inset 0 0 0 2px #6c56bd}.frequency{display:block;margin-bottom:10px}.frequency small,.frequency b{display:block}.frequency small{color:var(--muted)}.lesson-layout aside{align-self:start;position:sticky;top:15px;padding:20px;border-radius:20px;background:#f0ecff}.lesson-layout aside .btn{width:100%;margin-top:15px}
.playing{max-width:1040px;margin:auto}.ingame-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px;border-radius:20px 20px 0 0;background:#fff}.ingame-head>div:nth-child(2){text-align:center}.ingame-head b,.ingame-head span{display:block}.game-score{font-size:22px;font-weight:900}.round-progress{height:14px;padding:2px;background:#d3e2df}.round-progress i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#39c278,#ffd34e);transition:.4s}.game-stage{min-height:590px;padding:25px;border-radius:0 0 30px 30px;background:linear-gradient(#66d7e7,#1aa8b6 52%,#eccd72 52%);box-shadow:var(--shadow);display:grid;place-items:center}.game-stage #mechanic{width:100%;text-align:center}.game-stage h1{margin-top:0;padding:12px 18px;border-radius:18px;background:rgba(255,255,255,.94);font-size:clamp(24px,4vw,38px)}.game-stage em{color:#b43e22}.merge-grid{max-width:620px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.merge-grid button,.bubble-field button,.lanes button,.eggs button,.ships button{min-height:120px;border:4px solid #fff;border-radius:24px;background:#fff7cf;box-shadow:0 7px 0 #846f43;cursor:pointer}.merge-grid span,.bubble-field span,.lanes span{display:block;font-size:50px}.merge-grid small,.bubble-field small,.lanes small,.eggs small,.ships small{display:block;font-size:17px;font-weight:900}.merge-grid .selected{outline:7px solid var(--sun);transform:scale(1.05)}.bubble-field{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;max-width:760px;margin:auto}.bubble-field button{width:130px;border-radius:50%;background:linear-gradient(145deg,#bffaff,#40bdd3)}.cannon{margin-top:35px;font-size:45px}.built{display:flex;justify-content:center;gap:7px;margin:25px}.built span{width:48px;height:55px;display:grid;place-items:center;border-radius:10px;background:#fff;font-size:28px;font-weight:900}.built span.done{background:#9be594}.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.lanes button{height:220px;background:linear-gradient(90deg,#5caa4b,#b0de5b,#4c9d40);color:#fff}.runner{margin-top:20px;font-size:33px}.eggs,.ships{display:flex;justify-content:center;flex-wrap:wrap;gap:22px}.eggs button,.ships button{width:170px;font-size:70px;background:none;border:0;box-shadow:none;filter:drop-shadow(0 10px 4px #223b4b55)}.blaster{font-size:70px;margin-top:50px}.rink{min-height:330px;display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;border:8px solid #fff;border-radius:50px;background:linear-gradient(90deg,#d8f8ff,#fff,#d8f8ff)}.goal{min-height:220px;border:0;background:none;font-size:85px;cursor:pointer}.goal b{display:block;font-size:21px}.puck{font-size:50px}.ships button small{padding:7px;background:#fff;border-radius:10px}.aim{max-width:520px;margin:25px auto;display:flex;gap:20px;padding:15px;background:#fff;border-radius:16px}.aim label{flex:1}.aim input{width:100%}.pirate-cannon{font-size:58px}.wrong{filter:grayscale(1);opacity:.45}.result{text-align:center}.result-icon{font-size:90px}.result h1{font-size:45px;margin:0}.stars{font-size:48px;color:#f4b515}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0}.stats>div{padding:16px;border-radius:17px;background:#eaf7f1}.stats b,.stats span{display:block}.stats b{font-size:29px}.result .actions{justify-content:center}.modal-bg{position:fixed;z-index:100;inset:0;padding:15px;background:#102f4288;display:grid;place-items:center}.modal{position:relative;width:min(620px,96vw);max-height:92vh;overflow:auto;padding:30px;border:6px solid #fff;border-radius:28px;background:#fffdf3;box-shadow:0 25px 70px #071c2d88;text-align:center}.modal-x{position:absolute;right:10px;top:8px;width:44px;height:44px;border:0;border-radius:50%;background:#edf3f1;font-size:29px;cursor:pointer}.about-logo img{width:180px;height:180px;object-fit:contain}.lesson-modal{border-color:#ebc975;background:linear-gradient(#fff8d8,#f7e6ad)}.lesson-mark{display:inline-block;padding:8px 12px;border-radius:99px;background:#443389;color:#fff;font-weight:900}.lesson-modal h2{font-size:30px}.task-area{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.task-option{min-width:120px;min-height:58px;padding:10px 18px;border:3px solid #fff;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 5px 0 #b6aa80;font-weight:900;font-size:19px;cursor:pointer}.task-hint{min-height:28px;font-weight:800}.lesson-modal.success{background:#d8ffd9;animation:success .5s}@keyframes success{50%{transform:scale(1.04)}}.meta-map{overflow:hidden;border-radius:25px;background:#36bad0;padding-top:50px}.sea-line{font-size:50px;padding-left:18%;}.island-land{position:relative;min-height:430px;margin:0 7% -90px;border-radius:50% 50% 20% 20%;background:radial-gradient(circle,#a6dd6d,#58af4d 65%,#e7c36c 66%);box-shadow:inset 0 -20px #e2bb60}.flag{position:absolute;font-size:40px;filter:grayscale(1);opacity:.55}.flag.open{filter:none;opacity:1}.flag small{display:block}.f0{left:13%;top:32%}.f1{left:36%;top:11%}.f2{right:16%;top:25%}.f3{left:25%;bottom:24%}.f4{right:29%;bottom:17%}.f5{right:7%;bottom:39%}.pet{position:absolute;left:50%;top:48%;font-size:70px}.chest{position:absolute;left:45%;bottom:15%;font-size:55px}.treasures{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.treasures>div{min-height:100px;display:grid;place-items:center;padding:8px;border-radius:15px;background:#dfe7e4;filter:grayscale(1);font-size:34px}.treasures .found{background:#fff1aa;filter:none}.treasures small{display:block;font-size:11px}.setting{display:flex;align-items:center;justify-content:space-between;min-height:60px;margin:10px 0;padding:12px 15px;border-radius:15px;background:#eaf7f1;font-weight:900}.setting input{width:24px;height:24px}.privacy{margin-top:25px;color:var(--muted)}.toast{position:fixed;z-index:200;left:50%;bottom:20px;transform:translate(-50%,100px);padding:12px 20px;border-radius:14px;background:#183b4e;color:#fff;font-weight:900;opacity:0;transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}.dev-fab{position:fixed;right:15px;bottom:15px;z-index:20;width:60px;height:60px;border-radius:50%;border:0;background:#111;color:#0f0;font-weight:900;cursor:pointer}.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.dev-grid .chip,.dev-grid .btn{margin:4px}.panel textarea{width:100%;font:13px monospace}.panel select{min-height:48px;padding:8px;border-radius:10px}
@media(max-width:900px){.game-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr 240px}.lesson-layout{grid-template-columns:1fr}.lesson-layout aside{position:static}.launch{grid-template-columns:1fr}.launch>img{max-height:330px}.treasures{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){#app{padding:9px}.site-head{align-items:center;padding:8px}.brand img{width:48px;height:48px}.brand b{font-size:15px}.brand small{display:none}.nav-btn{font-size:0;padding:10px}.nav-btn:first-letter{font-size:20px}.site-head .vk{display:none}.hero{grid-template-columns:1fr;padding:24px}.hero img{display:none}.hero h1{font-size:42px}.library-tools{align-items:stretch;flex-direction:column}.game-grid{grid-template-columns:1fr}.cover{height:180px}footer{flex-direction:column;font-size:14px}.topics{grid-template-columns:1fr}.game-stage{min-height:520px;padding:13px}.merge-grid{grid-template-columns:repeat(2,1fr)}.merge-grid button{min-height:100px}.lanes{gap:7px}.lanes button{height:180px}.rink{grid-template-columns:1fr 75px 1fr}.goal{font-size:55px}.stats{grid-template-columns:repeat(2,1fr)}.ingame-head .nav-btn{font-size:14px}.treasures{grid-template-columns:repeat(2,1fr)}.dev-grid{grid-template-columns:1fr}.aim{flex-direction:column}.lesson-banner{align-items:flex-start;flex-direction:column}}
.brand-wrap{display:flex;align-items:center;gap:9px}.logo-link{display:block}.logo-link img{display:block;width:62px;height:62px;object-fit:contain;border-radius:18px}.brand{padding:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}.game-card,.btn{transition:none}}.reduced *,.reduced *:before,.reduced *:after{animation:none!important;transition:none!important}

/* ================================================================
   IGROVOY KVARTAL — CINEMATIC PIRATE EDITION
   Единый визуальный язык: карта, дерево, канат, золото и глубокий океан
   ================================================================ */
:root{
  --ink:#17364c;--ink-deep:#09283c;--ocean:#087d91;--ocean-dark:#064f64;
  --gold:#ffc941;--gold-deep:#b76c12;--parchment:#fff4c9;--wood:#743817;
  --premium-shadow:0 26px 70px rgba(3,28,43,.38),0 8px 18px rgba(3,28,43,.2);
}
body{
  background:
    radial-gradient(circle at 50% 5%,rgba(255,245,182,.18),transparent 28%),
    linear-gradient(180deg,rgba(1,33,52,.08),rgba(2,35,52,.48)),
    url("assets/treasure-island-3d.webp") center/cover fixed no-repeat;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,22,35,.42) 100%)}
.sky{opacity:.28;filter:drop-shadow(0 4px 4px rgba(0,31,44,.28))}
#app{max-width:1380px;padding:clamp(12px,2.3vw,32px)}
.screen{filter:drop-shadow(0 25px 40px rgba(0,32,47,.14))}

/* Навигационная палуба */
.site-head{
  position:relative;margin-bottom:22px;padding:12px 18px;border:1px solid rgba(255,255,255,.82);
  border-radius:25px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,244,207,.93));
  box-shadow:0 9px 0 rgba(91,48,22,.78),var(--premium-shadow),inset 0 2px 0 #fff;
  backdrop-filter:blur(18px) saturate(1.2);
}
.site-head:after{content:"";position:absolute;left:26px;right:26px;bottom:-9px;height:8px;border-radius:0 0 8px 8px;background:repeating-linear-gradient(90deg,#7b3e1e 0 35px,#8f4b25 35px 70px);box-shadow:0 2px 4px #102b3855}
.logo-link img{width:68px;height:68px;border:2px solid #f5d47a;background:#fff9df;box-shadow:0 6px 0 #8d5522,0 9px 16px #49200d44,inset 0 1px 0 #fff;transition:.25s}
.logo-link:hover img{transform:translateY(-3px) rotate(-2deg);filter:saturate(1.15)}
.brand b{font-family:Georgia,"Times New Roman",serif;font-size:25px;letter-spacing:.015em;color:#873f20;text-shadow:0 2px 0 #ffe696}
.brand small{font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.nav-btn,.pearls,.vk{border:1px solid rgba(255,255,255,.78);box-shadow:0 5px 0 #9f8155,0 8px 14px #18394b22,inset 0 2px 0 #fff;background:linear-gradient(#fff,#e9f2e8)}
.vk{background:linear-gradient(#2799ef,#0871ca);box-shadow:0 5px 0 #075497;color:#fff}.pearls{background:linear-gradient(#fff7b6,#ffc941);box-shadow:0 5px 0 #b87410;color:#693b0d}

/* Главный кинематографичный баннер */
.hero{position:relative;isolation:isolate;min-height:365px;padding:45px 55px;border:2px solid rgba(255,255,255,.84);border-radius:34px;background:linear-gradient(90deg,rgba(6,49,63,.82) 0%,rgba(9,75,88,.5) 48%,rgba(9,62,76,.04) 76%),url("assets/pirate-3d.webp") 70% 46%/cover no-repeat;box-shadow:0 12px 0 #6f391c,var(--premium-shadow),inset 0 0 0 5px rgba(255,255,255,.12);overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(125deg,rgba(255,237,152,.12),transparent 40%),radial-gradient(circle at 77% 22%,rgba(255,239,136,.28),transparent 22%)}
.hero:after{content:"⚓";position:absolute;right:4%;bottom:-24px;font-size:155px;color:rgba(255,242,190,.16);transform:rotate(-13deg);filter:drop-shadow(0 5px 2px #062b3d44)}
.hero>div{max-width:680px;position:relative;z-index:2}.hero>img{display:none}
.hero h1{max-width:650px;margin:15px 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(43px,6vw,72px);line-height:.96;color:#fff4cf;text-shadow:0 3px 0 #6c3218,0 8px 20px #001d2b;letter-spacing:-.035em}
.hero p{max-width:600px;color:#f8f4df;font-size:21px;font-weight:800;text-shadow:0 2px 5px #002a3a}
.eyebrow{border:1px solid #ffeca0;background:linear-gradient(#ffe986,#efb829);color:#68350c;box-shadow:0 5px 0 #9c5b10,0 8px 14px #001c2e55,inset 0 1px 0 #fff9c8}

/* Фильтры и игровые афиши */
.library-tools{margin:31px 0 22px;padding:13px 16px;border:1px solid rgba(255,255,255,.7);border-radius:20px;background:linear-gradient(145deg,rgba(255,250,226,.95),rgba(231,244,232,.92));box-shadow:0 7px 0 #75401f,0 16px 28px #062f4155,inset 0 2px 0 #fff}
.chip{border:1px solid #fff;background:linear-gradient(#fffdf4,#dfebe3);box-shadow:0 4px 0 #a89c77,inset 0 1px 0 #fff;color:#28495a;transition:.18s}
.chip:hover{transform:translateY(-2px)}.chip.active{border-color:#fff5b1;background:linear-gradient(#ffe985,#f1b82c);box-shadow:0 5px 0 #a6660e,0 8px 12px #6d3c1433;color:#66370d}
.btn{border:1px solid rgba(255,255,255,.55);border-radius:15px;box-shadow:0 7px 0 #075463,0 12px 18px rgba(0,37,52,.25),inset 0 2px 0 rgba(255,255,255,.38);text-shadow:0 2px 2px rgba(0,0,0,.22);transition:transform .18s,filter .18s,box-shadow .18s}
.btn.primary{background:linear-gradient(#ff9c56,#dc4e28);box-shadow:0 7px 0 #8f2f16,0 12px 18px rgba(80,26,8,.26),inset 0 2px 0 #ffc6a1}
.btn.teacher{background:linear-gradient(#8e79d6,#58449e);box-shadow:0 7px 0 #372969,0 12px 18px rgba(40,27,89,.27),inset 0 2px 0 #c6b9f1}
.btn.ghost{background:linear-gradient(#fffef9,#dcece5);box-shadow:0 6px 0 #8aaaa1;color:#183c4c;text-shadow:none}
.game-grid{gap:27px}
.game-card{position:relative;isolation:isolate;border:2px solid rgba(255,255,255,.94);border-radius:28px;background:linear-gradient(145deg,#fffdf1,#e9f3e9);box-shadow:0 11px 0 #74401f,0 21px 36px rgba(1,36,50,.38),inset 0 2px 0 #fff;overflow:hidden;transition:.32s cubic-bezier(.2,.8,.2,1)}
.game-card:before{content:"";position:absolute;z-index:5;top:-70%;left:-100px;width:75px;height:220%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);transition:left .65s;pointer-events:none}.game-card:hover:before{left:130%}
.game-card:hover{transform:translateY(-9px) scale(1.018);box-shadow:0 14px 0 #603116,0 31px 48px rgba(1,28,42,.47),inset 0 2px 0 #fff}
.cover{height:235px;border-bottom:5px solid #d09a3d;overflow:hidden;background:#1b8da0}.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(3,32,43,.48)),linear-gradient(115deg,rgba(255,255,255,.15),transparent 33%);box-shadow:inset 0 0 35px rgba(0,28,40,.2)}
.cover img{filter:saturate(1.13) contrast(1.05);transform:scale(1.03);animation:premium-camera 8s ease-in-out infinite}.game-card:nth-child(2n) .cover img{animation-delay:-3s}.game-card:nth-child(3n) .cover img{animation-delay:-5s}.game-card:hover .cover img{transform:scale(1.13)}
.cover>span{z-index:3;right:16px;bottom:15px;width:66px;height:66px;border:3px solid #fff6be;background:linear-gradient(#fffbdc,#ffc943);box-shadow:0 7px 0 #9b5c0d,0 12px 18px #001f2d88;font-size:39px}
.card-copy{padding:20px 21px 22px}.card-copy h2{margin:10px 0 3px;font-family:Georgia,"Times New Roman",serif;font-size:26px;color:#713719}.card-copy p{font-weight:800;color:#577276}.genre{border:1px solid #f7d76d;background:linear-gradient(#fff2a4,#f3c64b);box-shadow:0 3px 0 #ae751c;color:#6e3c0b}.score{padding:9px 11px;border-radius:12px;background:#e5f2eb;color:#375a61;font-size:14px}

/* Панели, запуск, урок и результаты */
.panel,.launch,.result{position:relative;border:2px solid rgba(255,255,255,.9);background:linear-gradient(145deg,rgba(255,253,237,.97),rgba(233,244,231,.95));box-shadow:0 11px 0 #703b1c,var(--premium-shadow),inset 0 2px 0 #fff;backdrop-filter:blur(18px) saturate(1.15);overflow:hidden}
.panel:before,.launch:before,.result:before{content:"";position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(90deg,#70401f,#d19034,#fff1a0,#d19034,#70401f)}
.panel h1,.launch h1,.result h1{font-family:Georgia,"Times New Roman",serif;color:#783c1d;text-shadow:0 2px 0 #ffe796}
.launch{grid-template-columns:1.16fr 1fr;gap:46px}.launch>img{border:4px solid #fff5c5;box-shadow:0 10px 0 #74401f,0 23px 37px rgba(1,31,44,.36);filter:saturate(1.12) contrast(1.04)}
.launch ul{padding:14px 18px;border-radius:17px;background:rgba(223,242,232,.8);box-shadow:inset 0 0 0 1px #fff}.launch li{color:#34575d;font-weight:800}
.lesson-layout aside{border:1px solid #fff4bd;background:linear-gradient(145deg,#f3edff,#ddd2ff);box-shadow:0 8px 0 #705d9f,0 15px 24px #32275a33,inset 0 2px 0 #fff}.topics span,.frequency span{box-shadow:0 4px 0 #b7c7bc,inset 0 1px 0 #fff;background:linear-gradient(#fff,#eff4eb)}
.lesson-banner{border:1px solid #d7c9ff;background:linear-gradient(90deg,#443389,#6e57ba,#443389);box-shadow:0 6px 0 #2e245f,0 12px 20px #041e3155}

/* Полноэкранные игровые диорамы */
.playing{max-width:1240px}.ingame-head{position:relative;z-index:4;padding:14px 20px;border:2px solid #fff;border-radius:25px 25px 0 0;background:linear-gradient(145deg,#fffef8,#e8f2e9);box-shadow:0 7px 0 #69391f,0 15px 28px rgba(1,30,43,.35)}
.ingame-head:before,.ingame-head:after{content:"";position:absolute;bottom:-13px;width:34px;height:34px;border:6px solid #a8672d;border-radius:50%;background:#5b2c14;box-shadow:inset 0 0 0 3px #dca257}.ingame-head:before{left:20px}.ingame-head:after{right:20px}
.ingame-head b{font-family:Georgia,"Times New Roman",serif;font-size:23px;color:#6f361b}.game-score{padding:7px 13px;border-radius:14px;background:linear-gradient(#fff5ad,#ffc532);box-shadow:0 4px 0 #a8690b;color:#6c3b09}
.round-progress{position:relative;z-index:3;height:18px;padding:4px;background:#65381f;box-shadow:inset 0 3px 5px #301508}.round-progress i{background:linear-gradient(90deg,#25b46f,#8cdb67,#ffe262);box-shadow:0 0 12px #f9db5b}
.game-stage{position:relative;isolation:isolate;min-height:690px;padding:clamp(24px,4vw,52px);border:3px solid rgba(255,255,255,.9);border-top:0;border-radius:0 0 34px 34px;background-position:center;background-size:cover;box-shadow:0 13px 0 #673718,var(--premium-shadow),inset 0 0 70px rgba(0,31,43,.22);overflow:hidden}
.game-stage:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(1,38,52,.13),rgba(1,31,44,.4)),radial-gradient(circle at 50% 22%,rgba(255,245,171,.2),transparent 35%)}
.game-stage:after{content:"";position:absolute;z-index:-1;inset:auto -5% 0;height:100px;background:radial-gradient(ellipse at 50% 0,#efffff 0 8px,transparent 10px) 0 0/55px 23px repeat-x,linear-gradient(transparent,rgba(1,71,85,.25));opacity:.45}
.game-stage.animals{background-image:url("assets/animals-3d.webp")}.game-stage.sea{background-image:url("assets/sea-3d.webp")}.game-stage.jungle{background-image:url("assets/jungle-3d.webp")}.game-stage.dino{background-image:url("assets/dino-3d.webp")}.game-stage.sport{background-image:url("assets/sport-3d.webp")}.game-stage.pirate{background-image:url("assets/pirate-3d.webp")}
.game-stage #mechanic{position:relative;padding:clamp(20px,3vw,35px);border:2px solid rgba(255,255,255,.88);border-radius:28px;background:linear-gradient(145deg,rgba(255,253,233,.94),rgba(232,244,232,.88));box-shadow:0 12px 0 rgba(91,47,21,.82),0 25px 45px rgba(0,24,36,.4),inset 0 2px 0 #fff;backdrop-filter:blur(12px) saturate(1.1)}
.game-stage #mechanic:before{content:"";position:absolute;inset:10px;border:1px solid rgba(164,110,44,.3);border-radius:20px;pointer-events:none}
.game-stage h1{position:relative;margin:-2px auto 20px;width:fit-content;max-width:95%;padding:13px 27px;border:1px solid #f5da7a;background:linear-gradient(#fffceb,#f7e8b6);box-shadow:0 6px 0 #a56c28,0 12px 20px #3b1c0b2e;font-family:Georgia,"Times New Roman",serif;color:#173d51;text-shadow:0 2px 0 #fff}
.game-stage em{color:#b54723;text-shadow:0 1px 0 #fff;font-family:Georgia,serif}
.merge-grid button,.bubble-field button,.lanes button,.eggs button,.ships button{border:3px solid #fff7c6;background:linear-gradient(145deg,#fffdf0,#ecdca4);box-shadow:0 8px 0 #754521,0 15px 22px rgba(42,25,9,.28),inset 0 2px 0 #fff;transition:.18s}
.merge-grid button:hover,.bubble-field button:hover,.lanes button:hover,.eggs button:hover,.ships button:hover{transform:translateY(-6px) scale(1.025);filter:saturate(1.15);box-shadow:0 12px 0 #673816,0 21px 28px rgba(31,19,6,.32),inset 0 2px 0 #fff}
.merge-grid span,.bubble-field span{filter:drop-shadow(0 8px 5px rgba(47,35,17,.3))}.merge-grid small,.bubble-field small,.lanes small,.eggs small,.ships small{color:#18394b}
.bubble-field button{border-color:#d8ffff;background:radial-gradient(circle at 35% 25%,#efffff 0 6%,#70d8e9 45%,#1496b0 100%);box-shadow:0 8px 0 #075568,0 16px 26px rgba(0,42,57,.34),inset 8px 8px 14px rgba(255,255,255,.55)}
.cannon,.blaster,.runner{filter:drop-shadow(0 13px 7px rgba(0,25,35,.38))}.built span{border:2px solid #fff;box-shadow:0 6px 0 #6e4422,0 10px 17px #2c180c44;background:linear-gradient(#fffef2,#e9d79d)}.built span.done{background:linear-gradient(#b9f2a0,#61ba55);box-shadow:0 6px 0 #347a37}
.lanes button{border-color:#e8ffd4;background:linear-gradient(90deg,#347e31,#9ade5c 50%,#347e31);box-shadow:0 9px 0 #285d27,0 17px 25px rgba(13,51,15,.35),inset 0 2px 0 #d8ffbd}
.eggs button,.ships button{background:transparent;border:0;box-shadow:none}.eggs button:hover,.ships button:hover{box-shadow:none;filter:drop-shadow(0 15px 7px rgba(0,24,34,.42));transform:translateY(-8px) scale(1.06)}
.rink{border:5px solid #fff;box-shadow:0 9px 0 #2c7181,0 19px 31px rgba(0,38,51,.34),inset 0 0 35px rgba(40,163,188,.18);background:linear-gradient(120deg,rgba(232,253,255,.96),rgba(255,255,255,.94),rgba(210,247,252,.96))}.goal{filter:drop-shadow(0 12px 6px #15334144);transition:.2s}.goal:hover{transform:scale(1.07)}
.aim{border:2px solid #fff5c2;background:linear-gradient(#fffdf1,#ede5c7);box-shadow:0 7px 0 #855322,0 14px 22px #39220e44}.aim input{accent-color:#c16b24}

/* Мета-остров, статистика, модалки */
.meta-map{border:4px solid #fff2b9;box-shadow:0 10px 0 #6e3b1d,0 22px 38px #062e4055;background:linear-gradient(rgba(14,143,165,.2),rgba(5,95,116,.38)),url("assets/treasure-island-3d.webp") center/cover}.island-land{background:radial-gradient(circle,#bde876,#61b251 62%,#efd276 64%);box-shadow:inset 0 -25px #ddb157,0 20px 30px #00324666}.stats>div{border:1px solid #fff;background:linear-gradient(145deg,#fffdf2,#e1f0e7);box-shadow:0 6px 0 #9b7a4c,0 11px 17px #213a3d22,inset 0 2px 0 #fff}.treasures>div{border:1px solid #fff;background:linear-gradient(#e9efeb,#cbd9d4);box-shadow:0 5px 0 #879d94}.treasures .found{background:linear-gradient(#fff8bd,#f4c945);box-shadow:0 6px 0 #a36812,0 10px 18px #5f390d33}
.modal-bg{background:radial-gradient(circle,rgba(7,51,65,.7),rgba(1,20,32,.94));backdrop-filter:blur(9px)}.modal{border:3px solid #fff1ad;background:linear-gradient(145deg,#fffdf0,#e8f0df);box-shadow:0 12px 0 #633419,0 30px 80px #0009,inset 0 2px 0 #fff}.lesson-modal{border:5px solid #f2d16d;background:linear-gradient(145deg,#fff9d6,#e8d59e);box-shadow:0 12px 0 #704018,0 35px 90px #001823aa,inset 0 2px 0 #fff}.lesson-mark{box-shadow:0 5px 0 #2b2159}.task-option{border-color:#fff8c9;background:linear-gradient(#fffef8,#e8e1c8);box-shadow:0 6px 0 #81542a,0 11px 17px #3c230e33}.task-option:hover{transform:translateY(-3px);background:linear-gradient(#fff7b6,#ffd458)}
.result-icon{filter:drop-shadow(0 15px 8px rgba(48,32,12,.28));animation:premium-float 3s ease-in-out infinite}.stars{color:#f2ae18;text-shadow:0 3px 0 #89530d,0 7px 12px #6c3b1555}
footer{border:1px solid rgba(255,255,255,.82);background:linear-gradient(145deg,rgba(255,253,235,.96),rgba(225,240,228,.93));box-shadow:0 7px 0 #693919,0 15px 25px #052f4055,inset 0 2px 0 #fff;color:#38565b}

@keyframes premium-camera{0%,100%{transform:scale(1.03) translate3d(0,0,0)}50%{transform:scale(1.095) translate3d(-1%,-1%,0)}}
@keyframes premium-float{50%{transform:translateY(-9px) rotate(2deg)}}
@media(max-width:900px){.hero{min-height:315px;background-position:63% center}.hero>div{max-width:570px}.cover{height:205px}.game-stage{min-height:620px}.launch{grid-template-columns:1fr}.launch>img{max-height:390px}}
@media(max-width:620px){body{background-attachment:scroll}.site-head{border-radius:18px}.logo-link img{width:49px;height:49px}.brand b{font-size:16px}.hero{min-height:350px;padding:28px 24px;background-position:58% center}.hero:before{background:rgba(4,45,59,.64)}.hero h1{font-size:43px}.hero p{font-size:17px}.library-tools{padding:12px}.cover{height:210px}.game-stage{min-height:570px;padding:12px}.game-stage #mechanic{padding:18px 11px}.game-stage h1{padding:11px 14px}.ingame-head:before,.ingame-head:after{display:none}.merge-grid button{min-height:115px}.bubble-field button{width:105px;min-height:105px}.panel,.launch,.result{border-radius:22px}.launch{padding:20px}.meta-map{border-width:2px}}

/* Полноценные игровые иллюстрации вместо emoji */
.item-art,.game-icon,.cover-icon,.title-art,.prompt-art,.goal-art,.merge-art,.bubble-art,.runner-art,.finish-art,.dino-art,.mini-cannon-art,.goal-net,.hockey-art,.ship-art,.cannon-art,.projectile-art,.inline-art{display:block;object-fit:contain;pointer-events:none;user-select:none}
.inline-art{display:inline-block;width:28px;height:28px;vertical-align:middle;margin:0 3px;filter:drop-shadow(0 3px 2px rgba(34,27,13,.24))}
.game-icon{display:inline-block;width:38px;height:38px;vertical-align:middle}.cover .game-icon{width:58px;height:58px}.title-art{display:inline-block;width:62px;height:62px;vertical-align:middle}.prompt-art{display:inline-block;width:58px;height:58px;vertical-align:middle}.result-icon .game-icon{width:120px;height:120px;margin:auto}.flag .game-icon{width:40px;height:40px}.treasures .game-icon{width:52px;height:52px}.dev-grid .game-icon{display:inline-block;width:30px;height:30px;vertical-align:middle}

/* Настоящее merge-поле */
.animals #mechanic{max-width:940px}.merge-goal{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;max-width:650px;margin:0 auto 15px;padding:13px 19px 12px;border:2px solid #fff4b5;border-radius:20px;background:linear-gradient(145deg,#fff9d7,#eed28b);box-shadow:0 7px 0 #89501f,0 14px 22px #321c0c44,inset 0 2px 0 #fff}.goal-label{position:absolute;left:15px;top:-12px;padding:4px 10px;border-radius:99px;background:#773d1d;color:#fff5d0;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.merge-goal>div{min-width:105px;display:grid;grid-template-columns:50px auto;align-items:center;gap:7px;padding:5px 9px;border-radius:14px;background:rgba(255,255,255,.63)}.merge-goal>div.reward{background:linear-gradient(#fff5a4,#ffc643);box-shadow:0 3px 0 #a5670c}.merge-goal i{font:900 28px Georgia;color:#783c1c}.merge-goal b{color:#244657}.goal-art{width:50px;height:50px}.merge-help{margin:10px auto 16px;color:#365862;font-weight:800}.merge-board{width:min(660px,100%);margin:auto;padding:13px;display:grid;grid-template-columns:repeat(4,1fr);gap:11px;border:4px solid #a96b30;border-radius:27px;background:linear-gradient(135deg,#8c4b22,#5e2d15);box-shadow:0 10px 0 #3b1c0e,0 20px 32px #21100555,inset 0 0 0 5px #c88a47,inset 0 8px 18px #321506}.merge-cell{position:relative;min-width:0;aspect-ratio:1/1;border:2px solid #fff2ac;border-radius:18px;background:linear-gradient(145deg,#fffdf0,#e9d89c);box-shadow:0 6px 0 #6d3b1c,0 9px 14px #24120766,inset 0 2px 0 #fff;cursor:pointer;transition:.2s;overflow:hidden}.merge-cell:hover{transform:translateY(-4px);filter:saturate(1.12)}.merge-cell.selected{z-index:2;outline:5px solid #ffce3c;transform:translateY(-7px) scale(1.04);box-shadow:0 10px 0 #754018,0 18px 25px #25110477,0 0 25px #ffe263}.merge-cell.empty{display:block;border:2px dashed rgba(255,228,156,.2);background:rgba(49,20,7,.2);box-shadow:inset 0 3px 7px #220e07}.merge-art{width:72%;height:60%;margin:2px auto -2px;filter:drop-shadow(0 7px 5px rgba(41,27,12,.25))}.merge-cell b,.merge-cell small{display:block;line-height:1.05}.merge-cell b{font-size:16px;color:#173c50}.merge-cell small{font-size:10px;color:#657675}.merge-cell .rank{position:absolute;right:6px;top:6px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#fff7a9,#ffc632);box-shadow:0 3px 0 #9f630b;color:#663808;font-size:12px;font-weight:900}

/* Иллюстрации остальных механик */
.bubble-art{width:82px;height:72px;margin:0 auto 1px;filter:drop-shadow(0 6px 4px #064c5a55)}.cannon-graphic{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:18px auto 0}.cannon-art{width:125px;height:100px;filter:drop-shadow(0 12px 6px #102c3866)}.projectile-art{width:48px;height:48px;animation:premium-float 2s ease-in-out infinite}.runner-graphic{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px}.runner-graphic i{width:min(360px,45vw);height:7px;border-radius:9px;background:repeating-linear-gradient(90deg,#75401f 0 13px,#d7a35d 13px 24px);box-shadow:0 3px 0 #47230f}.runner-art{width:70px;height:70px}.finish-art{width:62px;height:62px}.egg-art{display:block;width:82px;height:105px;margin:auto;border-radius:52% 48% 48% 52%/62% 62% 38% 38%;background:radial-gradient(circle at 35% 25%,#fff0a1 0 5%,#e9a04e 35%,#943e2c 100%);box-shadow:inset 8px 5px 14px #fff5ab77,0 12px 10px #3a210d55}.blaster-graphic{display:flex;align-items:end;justify-content:center;gap:18px;margin-top:25px}.dino-art{width:145px;height:145px}.mini-cannon-art{width:115px;height:100px;transform:scaleX(-1)}.goal-net{width:130px;height:120px;margin:auto}.hockey-art{width:120px;height:110px;margin:auto}.ship-art{width:160px;height:125px;margin:auto}.pirate-cannon .cannon-art{width:160px;height:130px;margin:18px auto 0}
@media(max-width:620px){.merge-board{gap:7px;padding:9px}.merge-cell{border-radius:13px}.merge-cell small{display:none}.merge-cell b{font-size:13px}.merge-goal{gap:5px;padding:17px 6px 8px}.merge-goal>div{min-width:76px;grid-template-columns:35px 1fr;padding:4px}.goal-art{width:35px;height:35px}.merge-goal b{font-size:12px}.merge-art{width:82%;height:68%}.bubble-art{width:68px;height:60px}.goal-net{width:85px}.ship-art{width:110px;height:90px}}

/* V4: real-time Canvas games */
.canvas-stage{padding:18px;min-height:0}.canvas-stage #mechanic{width:min(1120px,100%);padding:0;overflow:hidden;background:#092f42;border-color:#fff4bd}.canvas-stage #mechanic:before{display:none}.arcade-shell{position:relative;width:100%;background:#082d3f}.arcade-canvas{display:block;width:100%;height:auto;aspect-ratio:1.72/1;cursor:crosshair;touch-action:none;outline:0}.arcade-hud{position:absolute;left:18px;right:18px;top:16px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.arcade-hud span{padding:9px 14px;border:2px solid rgba(255,255,255,.86);border-radius:14px;background:rgba(255,251,225,.91);box-shadow:0 5px 0 rgba(91,47,20,.72),0 10px 18px rgba(0,27,39,.24);color:#173b4d;font-weight:900;backdrop-filter:blur(7px)}.arcade-help{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:80%;padding:8px 13px;border-radius:12px;background:rgba(3,34,47,.74);color:#fff7d1;font-size:14px;font-weight:800;text-align:center;pointer-events:none}.merge-generator{min-height:40px;margin:7px auto;padding:7px 18px;border:2px solid #fff4a8;border-radius:14px;background:linear-gradient(#ffdf65,#f3a91e);box-shadow:0 4px 0 #9b5b0b;color:#60360d;font-weight:900;cursor:pointer}.merge-generator:disabled{filter:grayscale(1);opacity:.65}.animals .arcade-shell{display:grid;grid-template-rows:auto auto minmax(0,1fr);background:linear-gradient(#ffe7a5,#d99d50)}.animals .arcade-hud{position:static;grid-row:1;padding:7px 10px 3px;align-items:center}.animals .arcade-hud span{padding:6px 11px;font-size:14px}.animals .merge-generator{grid-row:2}.animals .arcade-canvas{grid-row:3;max-height:calc(100vh - 235px);aspect-ratio:auto}.animals .arcade-help{display:none}.config-field{display:grid;gap:5px;margin:12px 0;font-weight:900}.config-field select{width:100%;border:2px solid #c8bde9;background:#fff;padding:9px;border-radius:11px}.task-preview{margin:15px 0;padding:14px;border:2px solid #fff;border-radius:15px;background:#fff9dc;box-shadow:0 5px 0 #a98a43}.task-preview p{min-height:48px;color:#173b4d;font-weight:800}.task-preview .btn{width:100%;font-size:14px}.lesson-config aside{max-height:none;overflow:visible;position:static}
body:has(.playing){overflow:hidden}body:has(.playing) #app{height:100vh;padding:5px}.screen.playing{height:calc(100vh - 10px);display:flex;flex-direction:column}.playing .game-stage{flex:1;min-height:0;padding:8px}.playing .canvas-stage #mechanic{max-height:100%}
body:has(.playing){overscroll-behavior:none}.playing .canvas-stage #mechanic{height:100%;min-height:0}.playing .arcade-shell{height:100%;min-height:0}.playing .arcade-canvas{max-width:100%;max-height:100%}.playing .sea .arcade-shell{height:100%;display:block}.playing .sea .arcade-canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:fill}.playing .sea #mechanic{height:100%}
body:has(.launch){overflow:hidden}body:has(.launch) #app{height:100vh;padding:5px}.screen:has(>.launch){height:calc(100vh - 10px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px}.screen:has(>.launch) .site-head{margin:0;padding:6px 12px}.screen:has(>.launch) .logo-link img{width:48px;height:48px}.screen:has(>.launch) .launch{min-height:0;padding:clamp(12px,2.2vh,24px);gap:24px;overflow:hidden}.screen:has(>.launch) .launch>img{height:100%;max-height:100%;min-height:0}.screen:has(>.launch) .launch h1{font-size:clamp(30px,5vh,48px);margin:6px 0}.screen:has(>.launch) .launch ul{margin:8px 0;font-size:clamp(14px,2.2vh,18px)}.screen:has(>.launch) .launch li{margin:5px 0}.screen:has(>.launch) .label{margin:9px 0 5px}.screen:has(>.launch) .launch .big{margin-top:10px;padding:10px 24px}.screen:has(>.launch) footer{margin:0;padding:10px 18px}
@media(max-width:720px){.canvas-stage{padding:7px}.arcade-hud{left:8px;right:8px;top:8px}.arcade-hud span{padding:6px 8px;font-size:11px}.arcade-help{bottom:5px;max-width:94%;padding:5px 8px;font-size:10px}.arcade-canvas{aspect-ratio:1.35/1}.canvas-stage #mechanic{border-radius:17px}.lesson-config aside{max-height:none}}
@media(max-height:700px){.playing .ingame-head{padding:7px 14px}.playing .ingame-head b{font-size:19px}.playing .round-progress{height:12px}.playing .game-stage{padding:5px}.playing .arcade-hud{top:8px}.playing .arcade-hud span{padding:6px 9px;font-size:13px}.playing .arcade-help{bottom:5px;padding:5px 9px;font-size:11px}}

/* Jungle runner modes and shared arcade sound control */
.sound-toggle{position:absolute;z-index:6;right:18px;bottom:14px;width:43px;height:43px;border:2px solid #fff;border-radius:50%;background:rgba(255,251,225,.94);box-shadow:0 4px 0 #70451e;font-size:20px;cursor:pointer}
.runner-mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.runner-mode{padding:14px 10px;border:3px solid #d7cda5;border-radius:16px;background:#f8f6e9;color:#173b4d;cursor:pointer}.runner-mode b,.runner-mode small{display:block}.runner-mode small{margin-top:4px}.runner-mode.active{border-color:#ffbd2e;background:#fff1ac;box-shadow:0 5px 0 #b66c14}.launch-select{width:100%;min-height:48px;padding:9px 12px;border:2px solid #c8bde9;border-radius:12px;background:#fff;font-weight:800}.jungle .arcade-canvas{cursor:default}.playing .jungle .arcade-shell{height:100%}.playing .jungle .arcade-canvas{width:100%;height:100%;aspect-ratio:auto}
@media(max-width:620px){.runner-mode-picker{grid-template-columns:1fr}.sound-toggle{right:8px;bottom:8px;width:37px;height:37px;font-size:17px}}
.task-area.colour{gap:18px}.colour-option{width:118px;min-width:118px;height:82px;padding:7px;background:#fff}.colour-option span{display:block;width:100%;height:100%;border:3px solid rgba(20,40,50,.18);border-radius:10px;background:var(--option-colour);box-shadow:inset 0 3px 8px rgba(255,255,255,.42)}
@media(max-width:520px){.colour-option{width:88px;min-width:88px;height:68px}}
.launch-select{width:100%;min-height:48px;padding:9px 12px;border:2px solid #b9d7d0;border-radius:13px;background:#fff;color:var(--ink);font-weight:800}.merge-set-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.merge-set{display:flex;align-items:center;gap:9px;min-height:58px;padding:7px 10px;border:3px solid transparent;border-radius:15px;background:#edf7f1;color:var(--ink);font-weight:900;cursor:pointer;box-shadow:0 4px 0 #9cb8ad}.merge-set img{width:45px;height:45px;object-fit:contain}.merge-set.active{border-color:#6d55bd;background:#eee9ff;box-shadow:0 4px 0 #5a459a}.merge-launch p{margin:5px 0 8px}.merge-launch .label{margin-top:7px}
@media(max-width:620px){.merge-set-picker{grid-template-columns:1fr}.merge-set{min-height:50px}.merge-set img{width:38px;height:38px}}
.game-card.coming-soon{filter:saturate(.72)}.game-card.coming-soon .cover{position:relative}.coming-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);width:max-content;max-width:85%;padding:10px 18px;border:2px solid #fff4ac;border-radius:14px;background:linear-gradient(145deg,#6e56b8,#443282);box-shadow:0 6px 0 #2e225c,0 13px 24px #10283f66;color:#fff;font-weight:900;text-align:center}.soon-button{margin-top:auto;padding:12px 16px;border:2px solid #d5c9ff;border-radius:14px;background:linear-gradient(#eee9ff,#d9d0f7);box-shadow:0 4px 0 #7a69a6;color:#4c3a79;font-weight:900;text-align:center}

/* Premium full-height scenes for the three redesigned arcade games. */
.playing .dino .arcade-shell,.playing .sport .arcade-shell,.playing .pirate .arcade-shell{height:100%}
.playing .dino .arcade-canvas,.playing .sport .arcade-canvas,.playing .pirate .arcade-canvas{width:100%;height:100%;aspect-ratio:auto}
.playing .dino #mechanic,.playing .sport #mechanic,.playing .pirate #mechanic{height:100%}
.dino .arcade-hud,.sport .arcade-hud,.pirate .arcade-hud{top:12px}
.dino .arcade-hud .objective,.sport .arcade-hud .objective,.pirate .arcade-hud .objective{max-width:68%;font-size:clamp(13px,1.5vw,18px)}

/* Premium interactive adventure archipelago. */
.island-panel{overflow:hidden;padding:clamp(18px,3vw,34px)}
.map-title{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:4px 0 22px}
.map-title h1{margin:8px 0 4px;font:900 clamp(30px,4vw,52px)/1 Georgia,"Times New Roman",serif;color:#71391d}
.map-title p{max-width:720px;margin:0;color:#49666d;font-size:17px;font-weight:800}
.map-total{min-width:170px;padding:12px 17px;border:2px solid #fff2a9;border-radius:19px;background:linear-gradient(145deg,#fff6ad,#ffc640);box-shadow:0 6px 0 #a76612,0 13px 22px #63371433;text-align:center}
.map-total b,.map-total span{display:block}.map-total b{font:900 32px Georgia;color:#743a15}.map-total span{font-size:12px;font-weight:900;color:#714c28}
.meta-map.premium-map{position:relative;width:100%;aspect-ratio:16/9;min-height:0;padding:0;border:4px solid #fff3b1;border-radius:29px;background:url("assets/adventure-archipelago-map.png") center/cover no-repeat;box-shadow:0 11px 0 #653719,0 26px 50px #052f4666,inset 0 0 60px #00364b44;overflow:hidden}
.premium-map:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(1,39,58,.22));box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)}
.map-stop{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;max-width:205px;padding:7px 11px 7px 7px;border:2px solid rgba(255,255,255,.9);border-radius:18px;background:linear-gradient(145deg,rgba(255,254,237,.96),rgba(222,243,235,.93));box-shadow:0 6px 0 #6b4a2d,0 12px 22px #002d4566;color:#17384d;text-align:left;cursor:pointer;transition:.2s;backdrop-filter:blur(8px)}
.map-stop:hover{transform:translate(-50%,-55%) scale(1.05);filter:saturate(1.12)}
.map-stop-icon{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(#fff8bc,#ffd34b);box-shadow:inset 0 2px 0 #fff,0 3px 0 #ad7318}.map-stop-icon .game-icon{width:38px;height:38px}
.map-stop-copy{min-width:0}.map-stop-copy b,.map-stop-copy small{display:block;white-space:nowrap}.map-stop-copy b{overflow:hidden;text-overflow:ellipsis;font-size:13px}.map-stop-copy small{margin-top:2px;color:#557277;font-size:10px;font-weight:900}
.map-stop.complete{border-color:#fff39a;background:linear-gradient(145deg,#fffbd1,#dff5d5);box-shadow:0 7px 0 #4f8f47,0 0 28px #fff36f,0 14px 24px #002d4566}.map-stop.complete .map-stop-icon{background:linear-gradient(#fff58a,#ffbd2e)}
.map-stop.unavailable{filter:grayscale(.45);opacity:.84;cursor:default}.map-stop.unavailable .map-stop-icon{background:linear-gradient(#e8e4ff,#b8a9e8)}
.map-stop.m0{left:18%;top:72%;transform:translate(-50%,-50%)}.map-stop.m1{left:50%;top:72%;transform:translate(-50%,-50%)}.map-stop.m2{left:33%;top:37%;transform:translate(-50%,-50%)}.map-stop.m3{left:67%;top:49%;transform:translate(-50%,-50%)}.map-stop.m4{left:55%;top:19%;transform:translate(-50%,-50%)}.map-stop.m5{left:84%;top:21%;transform:translate(-50%,-50%)}
.map-ship{position:absolute;z-index:1;left:37%;top:58%;animation:map-voyage 4s ease-in-out infinite;filter:drop-shadow(0 8px 5px #00364b77)}.map-ship-art{width:58px;height:58px;object-fit:contain}@keyframes map-voyage{50%{transform:translate(20px,-9px) rotate(4deg)}}
.island-stats{margin:26px 0}.treasure-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:25px 0 13px}.treasure-head h2{margin:7px 0 0;font:900 30px Georgia;color:#703819}.treasure-head p{margin:0;color:#58717e;font-weight:800}
.premium-treasures{grid-template-columns:repeat(3,1fr);gap:14px}.premium-treasures>div{min-height:125px;display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;place-items:initial;align-items:center;gap:2px 12px;padding:15px;border-radius:19px;text-align:left;font-size:initial}.premium-treasures>div>span{grid-row:1/3;width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:rgba(255,255,255,.58)}.premium-treasures .game-icon{width:50px;height:50px}.treasure-lock{width:47px;height:47px;object-fit:contain;filter:grayscale(1);opacity:.65}.premium-treasures b{font-size:15px;color:#17384d}.premium-treasures small{font-size:11px;color:#607472}.premium-treasures .found>span{box-shadow:0 0 24px #ffe556;background:#fff8c3}
@media(max-width:800px){.map-title,.treasure-head{align-items:flex-start;flex-direction:column}.map-total{align-self:stretch}.map-stop{padding:5px;border-radius:14px}.map-stop-copy{display:none}.map-stop-icon{width:38px;height:38px;flex-basis:38px}.map-stop-icon .game-icon{width:32px;height:32px}.premium-treasures{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.meta-map.premium-map{border-radius:18px}.map-stop-icon{width:30px;height:30px;flex-basis:30px;border-radius:9px}.map-stop-icon .game-icon{width:26px;height:26px}.map-ship{display:none}.premium-treasures{grid-template-columns:1fr}.island-panel{padding:12px}.map-title h1{font-size:31px}}