styles.css - master - veranda/TypeGame

styles.css
172 строки33 KB
veranda
Improve tutorial and optimize image loading
04 авг 2026, 13:59
04 авг 2026, 13:590cb3cc5
:root{--navy:#17324d;--sea:#087f8c;--sea2:#16a6b6;--sand:#ffe8a3;--sun:#ffc83d;--green:#35a853;--orange:#ef7b45;--paper:#fffdf2;--shadow:0 12px 30px #064b5c38;--radius:24px;font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;color:var(--navy);background:#5bc9dc}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(#78d7e7 0 48%,#0e9caf 48%);overflow-x:hidden}.ocean-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}.ocean-bg:after{content:"";position:absolute;left:-10%;right:-10%;top:48%;height:45px;background:radial-gradient(ellipse at 50% 0,#eafcff 0 9px,transparent 10px) 0 0/54px 24px repeat-x}.ocean-bg span{position:absolute;font-size:clamp(28px,4vw,52px);filter:drop-shadow(0 3px 0 #fff8)}.ocean-bg span:nth-child(1){left:7%;top:8%}.ocean-bg span:nth-child(2){right:9%;top:16%}.ocean-bg span:nth-child(3){right:28%;top:7%}.skip-link{position:fixed;z-index:99;left:12px;top:-60px;padding:12px;background:#fff;color:#000}.skip-link:focus{top:12px}#app{position:relative;z-index:1;min-height:100vh;padding:clamp(12px,3vw,36px);display:grid;place-items:center}.screen{width:min(1050px,100%);animation:arrive .35s ease}.panel{background:var(--paper);border:4px solid #fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px,4vw,40px);text-align:center}.logo{font-size:clamp(38px,8vw,82px);line-height:.92;margin:0;color:#b9512a;text-shadow:0 4px 0 #ffd65c,0 7px 0 #7d351f}.subtitle{font-size:clamp(17px,2.5vw,25px);margin:18px 0 28px}.mascot{font-size:clamp(68px,12vw,125px);display:block;animation:float 3s ease-in-out infinite}.button-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.btn{appearance:none;border:0;border-radius:16px;min-height:50px;padding:12px 22px;font:700 18px inherit;cursor:pointer;color:#fff;background:var(--sea);box-shadow:0 5px 0 #075865;transition:transform .12s,filter .12s}.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #075865}.btn:focus-visible,.card:focus-visible,input:focus-visible{outline:4px solid #ff9f1c;outline-offset:3px}.btn.primary{background:#e86f35;box-shadow:0 5px 0 #9a391b;font-size:22px}.btn.secondary{background:#6d5cae;box-shadow:0 5px 0 #423674}.btn.ghost{background:#fff;color:var(--navy);border:2px solid #b6ccd2;box-shadow:0 4px 0 #a4bbc0}.btn.danger{background:#c64242;box-shadow:0 5px 0 #842b2b}.btn:disabled,.card:disabled{filter:grayscale(.8);opacity:.6;cursor:not-allowed;transform:none}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.topbar h1{margin:0;font-size:clamp(25px,5vw,45px)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:24px 0}.card{border:3px solid #b8e0db;border-radius:20px;background:#fff;padding:20px;min-height:150px;color:var(--navy);font:inherit;cursor:pointer;box-shadow:0 7px 0 #bad3cf;transition:.15s}.card:hover:not(:disabled){transform:translateY(-5px);border-color:var(--sea)}.card .emoji{display:block;font-size:55px;margin-bottom:8px}.card h2,.card h3{margin:5px 0}.card p{margin:7px 0}.language-card{font-size:27px;font-weight:800}.map{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;margin:24px 0}.island{min-height:205px;position:relative;background:linear-gradient(#fff 0 55%,#ffdf77 55%);overflow:hidden}.island.open{border-color:#40a85e}.island.current{animation:pulse 2s infinite}.stars{color:#e39700;font-size:22px;letter-spacing:2px}.lock{position:absolute;right:10px;top:10px;font-size:26px}.summary-strip{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-weight:700;font-size:18px}.pill{background:#e6f7f5;border-radius:99px;padding:9px 16px}.game-panel{padding:clamp(12px,3vw,28px)}.game-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.game-head .button-row{flex-wrap:nowrap}.icon-btn{padding:9px;min-width:48px;font-size:22px}.journey{height:96px;border-radius:20px;background:linear-gradient(#7dd9e8 0 58%,#f4d06f 58%);position:relative;margin:12px 0;overflow:hidden}.journey:after{content:"🏝️ 🎁";position:absolute;right:15px;bottom:8px;font-size:38px}.hero{position:absolute;left:2%;bottom:6px;font-size:48px;transition:left .55s ease;z-index:2}.rope{position:absolute;left:5%;right:12%;bottom:18px;border-bottom:5px dashed #9e612b}.game-meta{display:flex;justify-content:space-between;gap:12px;font-weight:800}.progress{height:18px;border-radius:20px;background:#dce8e7;overflow:hidden;margin:8px 0 18px}.progress span{display:block;height:100%;background:linear-gradient(90deg,#3bb966,#ffca3a);transition:width .4s}.stage{color:#6b4ba0;font-weight:800;font-size:19px}.hint{font-size:clamp(58px,10vw,100px);margin:8px}.word-display{font-size:clamp(36px,8vw,72px);font-weight:900;letter-spacing:.06em;min-height:90px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.letter{padding:1px 2px;border-bottom:5px solid #9cb5ba}.letter.done{color:#16864b;border-color:#16864b}.letter.current{background:#fff0a6;border-color:#e36524;border-radius:7px}.translation{min-height:25px;color:#586c7c;font-size:18px}.type-input{width:min(560px,95%);font:800 clamp(24px,5vw,42px) inherit;text-align:center;border:4px solid #83b8bd;border-radius:17px;padding:12px;background:#fff;color:var(--navy)}.type-input.error{border-color:var(--orange);background:#fff0e8;animation:shake .25s}.feedback{min-height:30px;font-size:18px;font-weight:800;margin:9px}.keyboard{max-width:750px;margin:12px auto 0;display:flex;flex-direction:column;gap:5px}.key-row{display:flex;justify-content:center;gap:4px}.key{min-width:29px;padding:6px 4px;border-radius:6px;background:#e9f2ef;border:2px solid #b8ccc7;font-weight:bold;text-transform:uppercase}.key.next{background:#ffd34d;border-color:#c27800;transform:translateY(-3px)}.result-stars{font-size:60px;color:#e5a100}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px auto;max-width:650px}.stat{background:#e9f7f4;border-radius:16px;padding:14px}.stat strong{display:block;font-size:30px}.treasure{font-size:80px}.collection-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.locked-treasure{filter:grayscale(1);opacity:.35}.settings{max-width:680px;margin:auto;text-align:left}.setting{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border-bottom:2px dashed #cddfdc;font-weight:700}.setting input{width:26px;height:26px;accent-color:var(--sea)}.setting select{font:700 17px inherit;padding:8px;border-radius:10px}.modal-backdrop{position:fixed;z-index:20;inset:0;background:#123a4ccc;display:grid;place-items:center;padding:15px}.modal{width:min(600px,100%);max-height:90vh;overflow:auto}.steps{text-align:left;font-size:19px;line-height:1.55}.toast{position:fixed;z-index:50;left:50%;bottom:20px;transform:translate(-50%,120px);background:#17324d;color:#fff;border-radius:14px;padding:12px 20px;font-weight:700;transition:.3s}.toast.show{transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mobile-note{display:none}.confetti{position:fixed;z-index:30;top:-30px;font-size:28px;animation:fall 2.2s linear forwards;pointer-events:none}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}}@keyframes float{50%{transform:translateY(-9px) rotate(2deg)}}@keyframes pulse{50%{box-shadow:0 0 0 10px #ffcf4366}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes fall{to{transform:translateY(110vh) rotate(500deg)}}
@media(max-width:700px){#app{padding:10px}.panel{padding:16px}.map{grid-template-columns:1fr 1fr;gap:12px}.island{min-height:170px}.game-head h1{font-size:21px}.journey{height:74px}.hero{font-size:38px}.journey:after{font-size:30px}.keyboard{display:none}.mobile-note{display:block}.stats{grid-template-columns:1fr 1fr}.btn{padding:10px 14px}}
@media(max-width:390px){.map{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.topbar{align-items:flex-start}.summary-strip{font-size:15px}.game-head{align-items:flex-start}.word-display{min-height:68px}.hint{margin:0}.stats{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation:none!important;transition:none!important}

/* Cinematic 3D visual upgrade */
body{
  background:
    linear-gradient(180deg,rgba(4,44,69,.12),rgba(2,45,68,.35)),
    url("assets/treasure-island-3d.webp") center/cover fixed no-repeat;
}
.ocean-bg{opacity:.35}.ocean-bg:after{display:none}
#app:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 25%,transparent 18%,rgba(2,27,45,.2) 100%);z-index:-1}
.panel{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,249,220,.88));
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 28px 70px rgba(0,35,55,.36),inset 0 1px 0 #fff,inset 0 -3px 0 rgba(157,105,44,.12);
  backdrop-filter:blur(16px) saturate(1.18);
}
.panel:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#ffb93f,#fff1a2,#ff8b4b,#47cfb6);opacity:.9}
.screen>.panel{animation:panel-arrive .55s cubic-bezier(.2,.9,.25,1.2)}
.logo{color:#a33d20;text-shadow:0 2px 0 #fff5b0,0 5px 0 #f3b12d,0 9px 16px rgba(70,24,5,.32);letter-spacing:-.035em}
.mascot{filter:drop-shadow(0 14px 10px rgba(27,43,44,.28));transform-origin:50% 100%}
.btn{
  border:1px solid rgba(255,255,255,.45);
  background:linear-gradient(180deg,#1bb6bd,#087987);
  box-shadow:0 7px 0 #075561,0 12px 20px rgba(0,53,68,.24),inset 0 2px 0 rgba(255,255,255,.42);
  text-shadow:0 2px 2px rgba(0,0,0,.18)
}
.btn.primary{background:linear-gradient(180deg,#ff9e55,#e4572e);box-shadow:0 7px 0 #963116,0 12px 22px rgba(116,42,14,.28),inset 0 2px 0 rgba(255,255,255,.46)}
.btn.secondary{background:linear-gradient(180deg,#8d7bd5,#57459b);box-shadow:0 7px 0 #392d70,0 12px 22px rgba(53,39,105,.25),inset 0 2px 0 rgba(255,255,255,.42)}
.btn.ghost{background:linear-gradient(180deg,#fff,#e7f3ef);color:var(--navy);text-shadow:none;box-shadow:0 5px 0 #a8c8c4,0 9px 15px rgba(24,67,70,.14),inset 0 2px 0 #fff}
.card{
  position:relative;overflow:hidden;
  border:2px solid rgba(255,255,255,.9);
  background:linear-gradient(145deg,#fff 0%,#effbf7 65%,#d4eee7 100%);
  box-shadow:0 10px 0 #91bbb2,0 17px 24px rgba(18,70,73,.22),inset 0 2px 0 #fff;
}
.card:before{content:"";position:absolute;width:90px;height:180%;top:-75%;left:-80px;transform:rotate(28deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transition:left .6s}
.card:hover:not(:disabled):before{left:120%}.card:hover:not(:disabled){transform:translateY(-8px) scale(1.025);box-shadow:0 13px 0 #71a99d,0 23px 30px rgba(14,59,65,.27),inset 0 2px 0 #fff}
.card .emoji{filter:drop-shadow(0 9px 7px rgba(39,68,62,.25));transform:translateZ(0);transition:transform .25s}.card:hover .emoji{transform:scale(1.12) rotate(-3deg)}
.island{background:linear-gradient(180deg,rgba(255,255,255,.98) 0 52%,rgba(255,223,119,.98) 52% 82%,rgba(42,180,150,.96) 82%);box-shadow:0 10px 0 #337e78,0 20px 28px rgba(0,50,60,.27),inset 0 2px 0 #fff}
.island:after{content:"";position:absolute;left:-10%;right:-10%;bottom:13%;height:13px;background:radial-gradient(ellipse at 50% 0,#dffcff 0 5px,transparent 6px) 0 0/32px 13px repeat-x;opacity:.85}
.island.open{border-color:#fff6b3}.island.current{outline:5px solid rgba(255,203,59,.7);outline-offset:3px}
.pill{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(219,244,237,.92));border:1px solid #fff;box-shadow:0 5px 13px rgba(23,77,74,.14),inset 0 1px 0 #fff}
.treasure-pill{appearance:none;color:var(--navy);font:800 18px inherit;cursor:pointer;transition:transform .18s,box-shadow .18s,filter .18s}.treasure-pill span{display:inline-block;margin-left:4px;transition:transform .18s}.treasure-pill:hover{transform:translateY(-3px);filter:brightness(1.04);box-shadow:0 8px 18px rgba(23,77,74,.22),inset 0 1px 0 #fff}.treasure-pill:hover span{transform:translateX(4px)}.treasure-pill:active{transform:translateY(1px)}.treasure-pill:focus-visible{outline:4px solid #ff9f1c;outline-offset:3px}
.journey{height:128px;background:linear-gradient(rgba(72,186,200,.22),rgba(8,102,114,.32)),url("assets/treasure-island-3d.webp") center 58%/cover;border:3px solid rgba(255,255,255,.9);box-shadow:inset 0 0 25px rgba(0,60,73,.2),0 8px 18px rgba(0,65,80,.18)}
.journey:before{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(0,75,91,.22))}.hero{filter:drop-shadow(0 8px 5px rgba(0,37,40,.45));font-size:56px;transform:scaleX(-1)}.rope{filter:drop-shadow(0 2px 0 rgba(255,255,255,.55))}
.progress{height:22px;padding:3px;border:1px solid #abc8c3;background:linear-gradient(180deg,#bdd4d0,#eafff9);box-shadow:inset 0 2px 5px rgba(19,75,75,.2)}.progress span{border-radius:20px;background:linear-gradient(90deg,#21a86c,#6cd66d,#ffd64c);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 0 10px rgba(80,205,103,.4)}
.hint{filter:drop-shadow(0 13px 8px rgba(32,59,52,.24));animation:hint-bob 2.6s ease-in-out infinite}.word-display{text-shadow:0 4px 0 #fff,0 8px 18px rgba(20,53,59,.18)}
.letter{border-radius:9px 9px 3px 3px}.letter.current{box-shadow:0 5px 0 #e2a21e,0 9px 14px rgba(130,77,15,.22),inset 0 2px 0 #fff}.letter.done{text-shadow:0 2px 0 #fff}
.type-input{background:linear-gradient(180deg,#fff,#f0fbf7);box-shadow:inset 0 3px 8px rgba(36,84,84,.12),0 8px 20px rgba(28,82,82,.15)}
.key{background:linear-gradient(180deg,#fff,#dcebe7);box-shadow:0 3px 0 #9cb7b0,inset 0 1px 0 #fff}.key.next{background:linear-gradient(180deg,#ffe783,#ffc126);box-shadow:0 5px 0 #b77b08,0 8px 14px rgba(154,96,0,.24)}
.stat{border:1px solid #fff;background:linear-gradient(145deg,#f5fffb,#d8f1e9);box-shadow:0 7px 14px rgba(25,79,72,.13),inset 0 2px 0 #fff}.treasure{filter:drop-shadow(0 17px 11px rgba(80,49,10,.28));animation:treasure-pop 1s cubic-bezier(.2,.9,.25,1.3)}
@keyframes panel-arrive{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}@keyframes hint-bob{50%{transform:translateY(-7px) scale(1.03)}}@keyframes treasure-pop{0%{transform:scale(.3) rotate(-15deg)}70%{transform:scale(1.16) rotate(4deg)}100%{transform:none}}
@media(max-width:700px){body{background-position:60% center;background-attachment:scroll}.panel{backdrop-filter:blur(12px)}.journey{height:88px}.hero{font-size:42px}}

/* Animated 3D island cards */
.map{align-items:stretch}.island{padding:10px 10px 14px;min-height:285px;display:flex;flex-direction:column;align-items:center}
.island-art-wrap{position:relative;display:block;width:calc(100% + 20px);height:165px;margin:-10px -10px 9px;overflow:hidden;border-radius:18px 18px 30% 30%;background:#76d6e4;transform:translateZ(0)}
.island-art{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.055);filter:saturate(1.08) contrast(1.03);animation:island-breathe 5s ease-in-out infinite;will-change:transform}
.island:nth-child(2) .island-art{animation-delay:-.8s}.island:nth-child(3) .island-art{animation-delay:-1.6s}.island:nth-child(4) .island-art{animation-delay:-2.4s}.island:nth-child(5) .island-art{animation-delay:-3.2s}.island:nth-child(6) .island-art{animation-delay:-4s}
.island-art-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 20%,rgba(255,255,255,.48) 42%,transparent 62%);transform:translateX(-130%);animation:card-shimmer 6s ease-in-out infinite;pointer-events:none}
.art-glow{position:absolute;inset:auto 10% -20px;height:45px;background:#fff6a0;border-radius:50%;filter:blur(20px);opacity:.38;animation:glow-pulse 2.8s ease-in-out infinite}
.island h3{position:relative;margin:1px 0 3px;font-size:19px}.island .stars,.island p{position:relative;z-index:2}.island p{margin:auto 0 0}
.island:hover:not(:disabled) .island-art{animation-play-state:paused;transform:scale(1.14) rotate(.8deg)}
.island:hover:not(:disabled) .island-art-wrap{box-shadow:0 10px 22px rgba(0,70,83,.28)}
.island.current .island-art-wrap{animation:card-float 2.6s ease-in-out infinite}
.island:disabled .island-art{filter:grayscale(.82) brightness(.62)}.island:disabled .island-art-wrap:after{opacity:.25}
.lock{z-index:5;background:rgba(255,255,255,.92);width:42px;height:42px;display:grid;place-items:center;border-radius:50%;box-shadow:0 6px 14px rgba(0,0,0,.24)}
@keyframes island-breathe{0%,100%{transform:scale(1.055) translateY(0)}50%{transform:scale(1.1) translateY(-3px)}}
@keyframes card-shimmer{0%,65%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@keyframes glow-pulse{50%{opacity:.7;transform:scale(1.2)}}
@keyframes card-float{50%{transform:translateY(-5px) rotate(.5deg)}}
@media(max-width:700px){.island{min-height:250px}.island-art-wrap{height:140px}.island h3{font-size:17px}}

/* Premium animated title screen */
.home-panel{width:min(1180px,100%);padding:clamp(14px,2.5vw,30px);background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,247,210,.91));overflow:visible}
.home-layout{display:grid;grid-template-columns:minmax(300px,.92fr) minmax(390px,1.08fr);align-items:center;gap:clamp(24px,4vw,55px);min-height:600px}
.home-visual{position:relative;align-self:stretch;min-height:530px;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#64d5ed,#28b7ca 55%,#f9d678 55%);box-shadow:0 20px 45px rgba(0,73,90,.28),inset 0 0 0 3px rgba(255,255,255,.8);isolation:isolate}
.home-visual:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 55%,rgba(0,58,68,.14)),radial-gradient(circle at 70% 15%,rgba(255,249,175,.55),transparent 26%);pointer-events:none}
.home-visual img{width:100%;height:100%;object-fit:cover;object-position:53% center;transform:scale(1.04);animation:home-camera 9s ease-in-out infinite;will-change:transform}
.home-visual:after{content:"";position:absolute;z-index:4;inset:0;border-radius:30px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.82),inset 0 -25px 35px rgba(0,62,69,.18);pointer-events:none}
.home-content{text-align:left;padding-right:clamp(5px,2vw,20px)}.home-content .logo{font-size:clamp(48px,6vw,78px);line-height:.92}.home-content .subtitle{max-width:570px;font-size:clamp(20px,2.2vw,29px);line-height:1.25;margin:22px 0}
.home-kicker{display:inline-block;padding:9px 15px;margin-bottom:18px;border-radius:99px;background:linear-gradient(180deg,#fff8bd,#ffd85b);box-shadow:0 5px 0 #d69219,0 10px 18px rgba(133,83,4,.18);font-weight:900;color:#7b4612;text-transform:uppercase;letter-spacing:.04em}
.home-badges{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 27px}.home-badges span{padding:8px 12px;border-radius:12px;background:rgba(231,248,244,.92);border:1px solid #fff;box-shadow:0 4px 10px rgba(20,76,76,.12);font-weight:800;font-size:15px}
.home-actions{justify-content:flex-start}.home-actions .btn.primary{font-size:26px;padding:15px 32px}.home-tools{justify-content:flex-start;margin-top:22px}.home-tools .btn{font-size:16px;padding:10px 14px}
.home-sun{position:absolute;z-index:1;width:120px;height:120px;border-radius:50%;right:-20px;top:-20px;background:#fff4a3;box-shadow:0 0 55px 22px rgba(255,224,88,.68);animation:sun-pulse 3.5s ease-in-out infinite}
.home-coin{position:absolute;z-index:5;font-size:36px;filter:drop-shadow(0 8px 6px rgba(50,42,7,.28));animation:coin-float 3s ease-in-out infinite}.coin-one{left:7%;top:11%}.coin-two{right:8%;top:39%;animation-delay:-1s}.coin-three{left:12%;bottom:9%;animation-delay:-2s}
.home-wave{position:absolute;z-index:3;left:-5%;right:-5%;bottom:0;height:20px;background:radial-gradient(ellipse at 50% 0,#e9ffff 0 8px,transparent 9px) 0 0/44px 20px repeat-x;animation:wave-slide 4s linear infinite}
@keyframes home-camera{0%,100%{transform:scale(1.04) translate3d(0,0,0)}50%{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
@keyframes coin-float{50%{transform:translateY(-12px) rotate(10deg) scale(1.08)}}
@keyframes sun-pulse{50%{transform:scale(1.12);opacity:.82}}
@keyframes wave-slide{to{background-position:44px 0}}
@media(max-width:850px){.home-layout{grid-template-columns:1fr;min-height:0}.home-visual{min-height:300px;max-height:360px}.home-content{text-align:center;padding:0}.home-actions,.home-tools{justify-content:center}.home-badges{justify-content:center}.home-kicker{margin-top:3px}}
@media(max-width:480px){.home-visual{min-height:235px}.home-layout{gap:18px}.home-content .logo{font-size:43px}.home-content .subtitle{font-size:18px;margin:15px 0}.home-badges{margin-bottom:18px}.home-actions .btn.primary{font-size:22px}.home-tools .btn{font-size:14px}}

/* Cinematic grade selection */
.grade-panel{width:min(1240px,100%);padding:clamp(18px,3vw,38px)}
.grade-panel .topbar{margin-bottom:4px}.grade-lead{margin:0 auto 22px;max-width:720px;font-size:clamp(17px,2vw,22px);color:#536d78}
.grade-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:10px 0 0}
.grade-card{padding:0;min-height:390px;border-radius:26px;display:flex;flex-direction:column;background:linear-gradient(155deg,#fffaf0,#eaf8f3);box-shadow:0 11px 0 #7aaea5,0 20px 31px rgba(9,59,67,.25),inset 0 2px 0 #fff;isolation:isolate}
.grade-art-wrap{position:relative;display:block;width:100%;height:235px;overflow:hidden;border-radius:23px 23px 38% 38%;background:#4ec2d1}
.grade-art{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.03);animation:grade-camera 7s ease-in-out infinite;will-change:transform}
.grade-card:nth-child(2) .grade-art{animation-delay:-1.5s}.grade-card:nth-child(3) .grade-art{animation-delay:-3s}.grade-card:nth-child(4) .grade-art{animation-delay:-4.5s}
.grade-art-wrap:after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(4,54,65,.34));pointer-events:none}
.grade-number{position:absolute;z-index:4;left:14px;top:14px;width:70px;height:70px;display:flex;flex-direction:column;justify-content:center;border-radius:22px;background:linear-gradient(145deg,#fff9b8,#ffc62f);border:2px solid #fff;box-shadow:0 7px 0 #c67c0c,0 12px 18px rgba(82,44,1,.29),inset 0 2px 0 #fff;color:#713b0b;text-shadow:0 1px 0 #fff}
.grade-number b{font-size:34px;line-height:.86}.grade-number small{font-size:10px;font-weight:900;margin-top:5px;letter-spacing:.06em}
.grade-symbol{position:absolute;z-index:4;right:13px;bottom:11px;width:51px;height:51px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);font-size:28px;box-shadow:0 6px 14px rgba(2,48,58,.27);animation:symbol-float 2.7s ease-in-out infinite}
.grade-shine{position:absolute;z-index:3;width:70px;height:170%;left:-120px;top:-35%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);animation:grade-shimmer 6.5s ease-in-out infinite}
.grade-copy{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;padding:18px 18px 16px;width:100%}.grade-copy h2{font-size:25px;margin:0 0 8px}.grade-copy p{font-size:17px;line-height:1.25;margin:0;max-width:230px}.grade-arrow{margin-top:auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#35c9b3,#129782);color:#fff;font-size:24px;font-weight:900;box-shadow:0 5px 0 #087363,0 8px 12px rgba(0,78,70,.2);transition:transform .2s}
.grade-card:hover .grade-art{animation-play-state:paused;transform:scale(1.14) translateY(-2%)}.grade-card:hover .grade-arrow{transform:translateX(6px) scale(1.08)}
.grade-1 .grade-number{background:linear-gradient(145deg,#fff1a7,#ffba32)}.grade-2 .grade-number{background:linear-gradient(145deg,#bdfaff,#42cfe1);color:#07576d;box-shadow:0 7px 0 #168aa2,0 12px 18px rgba(3,75,90,.25)}.grade-3 .grade-number{background:linear-gradient(145deg,#c7ffd5,#52cf75);color:#145a2b;box-shadow:0 7px 0 #259347,0 12px 18px rgba(8,82,31,.25)}.grade-4 .grade-number{background:linear-gradient(145deg,#ffd3ae,#ff7749);color:#7c2410;box-shadow:0 7px 0 #b43a1d,0 12px 18px rgba(94,28,8,.26)}
@keyframes grade-camera{0%,100%{transform:scale(1.045) translate3d(0,0,0)}50%{transform:scale(1.1) translate3d(-1%,-1%,0)}}
@keyframes grade-shimmer{0%,65%{left:-120px}88%,100%{left:130%}}
@keyframes symbol-float{50%{transform:translateY(-7px) rotate(6deg)}}
@media(max-width:1000px){.grade-cards{grid-template-columns:repeat(2,1fr)}.grade-card{min-height:355px}.grade-art-wrap{height:215px}}
@media(max-width:580px){.grade-cards{grid-template-columns:1fr}.grade-card{min-height:330px}.grade-art-wrap{height:200px}.grade-lead{font-size:16px}.grade-panel .topbar h1{font-size:27px}}

/* 3D treasure collection */
.collection-panel{width:min(1280px,100%)}.collection-panel .topbar{margin-bottom:2px}.collection-lead{font-size:clamp(16px,2vw,21px);color:#557079;margin:0 auto 15px}
.collection-grid{grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.treasure-card{padding:0;min-height:330px;border-radius:26px;display:flex;flex-direction:column;background:linear-gradient(145deg,#fffdf1,#e7f6ef);opacity:1;filter:none;box-shadow:0 10px 0 #7daaa2,0 19px 29px rgba(10,60,66,.23),inset 0 2px 0 #fff}
.treasure-scene{position:relative;display:block;width:100%;height:190px;border-radius:23px 23px 35% 35%;overflow:hidden;background:#52c3d2}
.treasure-scene img{display:block;width:100%;height:100%;object-fit:cover;animation:treasure-camera 7.5s ease-in-out infinite;filter:saturate(1.08);will-change:transform}
.treasure-card:nth-child(2) img{animation-delay:-1.2s}.treasure-card:nth-child(3) img{animation-delay:-2.4s}.treasure-card:nth-child(4) img{animation-delay:-3.6s}.treasure-card:nth-child(5) img{animation-delay:-4.8s}.treasure-card:nth-child(6) img{animation-delay:-6s}
.treasure-scene:after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(2,47,58,.32));pointer-events:none}
.treasure-badge{position:absolute;z-index:4;right:14px;bottom:12px;width:68px;height:68px;display:grid;place-items:center;border-radius:50%;font-size:39px;background:linear-gradient(145deg,#fffbd2,#ffc839);border:3px solid #fff;box-shadow:0 7px 0 #bd7607,0 12px 19px rgba(66,38,0,.3);animation:treasure-badge-float 3s ease-in-out infinite}
.scene-shine{position:absolute;z-index:3;left:-100px;top:-40%;width:65px;height:190%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);animation:collection-shimmer 7s ease-in-out infinite}
.treasure-info{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;padding:17px 15px}.treasure-info h3{font-size:22px;margin:1px 0 5px}.treasure-info p{font-size:17px;margin:2px 0}.treasure-info small{margin-top:auto;padding-top:8px;color:#567078;font-weight:700;line-height:1.3}
.treasure-index{position:absolute;left:14px;top:14px;font-size:13px;font-weight:900;color:#fff;background:#168c82;border-radius:8px;padding:4px 7px;box-shadow:0 3px 0 #086158}
.treasure-card.found{outline:4px solid rgba(255,206,62,.7);outline-offset:2px}.treasure-card.found:hover .treasure-scene img{animation-play-state:paused;transform:scale(1.13)}
.treasure-card.locked-treasure{opacity:.72;filter:none}.treasure-card.locked-treasure .treasure-scene img{filter:grayscale(.9) brightness(.62);animation-play-state:running}.treasure-card.locked-treasure .treasure-badge{background:linear-gradient(145deg,#fff,#ccd7d5);box-shadow:0 7px 0 #7f9390,0 12px 19px rgba(30,50,48,.25);font-size:32px}.treasure-card.locked-treasure .treasure-info{filter:grayscale(1)}
.map-btn{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:16px;padding:9px 14px}
@keyframes treasure-camera{0%,100%{transform:scale(1.045) translate3d(0,0,0)}50%{transform:scale(1.105) translate3d(-1%,-1%,0)}}
@keyframes treasure-badge-float{50%{transform:translateY(-7px) rotate(5deg) scale(1.05)}}
@keyframes collection-shimmer{0%,67%{left:-100px}90%,100%{left:130%}}
@media(max-width:900px){.collection-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:570px){.collection-grid{grid-template-columns:1fr}.treasure-card{min-height:300px}.treasure-scene{height:175px}.map-btn span{display:none}.map-btn{padding:9px;min-width:48px;justify-content:center}}

/* 3D header mascot and game navigation */
.nav-mascot{position:relative;width:76px;height:76px;display:block;border-radius:24px;overflow:hidden;border:3px solid #fff;background:#65cad7;box-shadow:0 7px 0 #80aaa3,0 13px 22px rgba(7,59,67,.25);transform:rotate(2deg);animation:mascot-perch 3.6s ease-in-out infinite;flex:0 0 auto}
.nav-mascot img{display:block;width:100%;height:100%;object-fit:cover;object-position:51% 47%;transform:scale(1.08);transition:transform .25s}.nav-mascot:hover img{transform:scale(1.17)}
.game-nav{flex-wrap:wrap}.game-text-btn{font-size:15px;padding:9px 13px;white-space:nowrap}.game-text-btn:first-child{background:linear-gradient(180deg,#fff9d9,#f3e9b8);box-shadow:0 5px 0 #b8a766,0 9px 15px rgba(69,58,15,.15),inset 0 2px 0 #fff}.game-text-btn:nth-child(2){background:linear-gradient(180deg,#ddfbf4,#aee4d8);box-shadow:0 5px 0 #70aa9e,0 9px 15px rgba(19,73,68,.16),inset 0 2px 0 #fff}
@keyframes mascot-perch{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-4px) rotate(-1deg)}}
@media(max-width:900px){.game-head{align-items:flex-start}.game-head .button-row{justify-content:flex-end}.game-text-btn{font-size:14px;padding:8px 10px}}
@media(max-width:650px){.nav-mascot{width:54px;height:54px;border-radius:17px}.game-head{display:block}.game-head h1{margin-bottom:10px}.game-head .button-row{justify-content:center;flex-wrap:wrap}.game-text-btn{flex:1 1 42%;min-width:110px}.topbar{align-items:center}.topbar>span.nav-mascot{display:block}}

/* Premium tutorial */
.tutorial-modal{width:min(980px,96vw);padding:0;overflow:hidden;max-height:92vh}.tutorial-modal:before{height:7px}
.tutorial-layout{display:grid;grid-template-columns:.86fr 1.14fr;min-height:590px}
.tutorial-visual{position:relative;min-height:590px;overflow:hidden;background:linear-gradient(180deg,#62d2e4,#1aa5b9);isolation:isolate}
.tutorial-visual>img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;animation:tutorial-camera 8s ease-in-out infinite;filter:saturate(1.08)}
.tutorial-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(1,44,56,.62));z-index:2;pointer-events:none}
.tutorial-caption{position:absolute;z-index:4;left:22px;right:22px;bottom:27px;padding:13px 16px;border-radius:15px;background:rgba(255,255,255,.91);box-shadow:0 7px 0 rgba(77,125,117,.75),0 14px 25px rgba(0,44,52,.25);font-weight:900;font-size:18px;color:#173f50;text-align:center}
.tutorial-path{position:absolute;z-index:4;left:22px;top:24px;display:flex;gap:8px;align-items:center;padding:9px 12px;border-radius:99px;background:rgba(255,255,255,.88);box-shadow:0 7px 16px rgba(0,49,58,.2)}
.tutorial-path i{display:block;width:12px;height:12px;border-radius:50%;background:#ffc83d;box-shadow:0 2px 0 #b6790b;animation:path-dot 1.8s ease-in-out infinite}.tutorial-path i:nth-child(2){animation-delay:.15s}.tutorial-path i:nth-child(3){animation-delay:.3s}.tutorial-path i:nth-child(4){animation-delay:.45s}.tutorial-path i:nth-child(5){animation-delay:.6s}
.tutorial-content{display:flex;flex-direction:column;padding:clamp(25px,4vw,48px);text-align:left;background:linear-gradient(145deg,#fffef8,#edf8f1)}
.tutorial-kicker{align-self:flex-start;padding:8px 13px;border-radius:99px;background:linear-gradient(180deg,#fff3a5,#ffd04b);box-shadow:0 4px 0 #c98712;color:#75430c;font-size:12px;font-weight:900;letter-spacing:.09em;margin-bottom:16px}
.tutorial-content h2{font-size:clamp(29px,4vw,43px);line-height:1.03;margin:0 0 21px;color:#173b55;text-wrap:balance}
.tutorial-steps{display:flex;flex-direction:column;gap:10px}.tutorial-step{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:13px;padding:10px 13px;border-radius:16px;background:linear-gradient(145deg,#fff,#e7f5f0);border:1px solid #fff;box-shadow:0 5px 12px rgba(24,75,72,.12),inset 0 1px 0 #fff;transition:transform .18s,box-shadow .18s}.tutorial-step:hover{transform:translateX(5px);box-shadow:0 8px 17px rgba(24,75,72,.17),inset 0 1px 0 #fff}
.step-number{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#3fd0bd,#128b80);box-shadow:0 5px 0 #08685f;color:#fff;font-size:23px;font-weight:900;text-shadow:0 2px 1px rgba(0,0,0,.18)}
.tutorial-step:nth-child(2) .step-number{background:linear-gradient(145deg,#62d5ed,#208fae);box-shadow:0 5px 0 #13667d}.tutorial-step:nth-child(3) .step-number{background:linear-gradient(145deg,#9b83db,#6349a9);box-shadow:0 5px 0 #44327b}.tutorial-step:nth-child(4) .step-number{background:linear-gradient(145deg,#ffcb59,#e89422);box-shadow:0 5px 0 #a75e10}.tutorial-step:nth-child(5) .step-number{background:linear-gradient(145deg,#ff9362,#df512f);box-shadow:0 5px 0 #9a331e}
.step-copy{display:block}.step-copy b{display:block;font-size:13px;letter-spacing:.06em;color:#278477;margin-bottom:2px}.step-copy small{display:block;font-size:16px;line-height:1.18;color:#173b55}
.tutorial-ready{align-self:flex-start;margin-top:auto;padding:13px 24px;font-size:19px}
@keyframes tutorial-camera{0%,100%{transform:scale(1.03) translate3d(0,0,0)}50%{transform:scale(1.1) translate3d(-1%,-1%,0)}}
@keyframes path-dot{50%{transform:translateY(-4px);background:#ff8d42}}
@media(max-width:720px){.tutorial-modal{overflow:auto}.tutorial-layout{grid-template-columns:1fr;min-height:0}.tutorial-visual{min-height:230px;max-height:260px}.tutorial-content{padding:24px}.tutorial-content h2{font-size:30px}.tutorial-ready{margin-top:22px;align-self:stretch}.tutorial-caption{bottom:17px}.tutorial-path{top:15px}}