@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --ice:#7dd3fc;
  --frost:#38bdf8;
  --crystal:#0284c7;
  --bg:#040810;
  --surface:#0a1220;
  --card:#0f1a2e;
  --text:#dbeafe;
  --dim:#7da8c8;
  --glow:rgba(56,189,248,.15);
}

html{scroll-behavior:smooth}
body{font-family:'Kanit',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
a{color:var(--frost);text-decoration:none;transition:.2s}
a:hover{color:var(--ice)}

/* HEADER */
.ice-nav{position:sticky;top:0;z-index:900;background:rgba(4,8,16,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--glow)}
.ice-nav-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 1.5rem}
.ice-brand{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1.4rem;color:var(--ice);letter-spacing:1px}
.ice-brand svg{width:32px;height:32px}
.ice-menu{list-style:none;display:flex;gap:1.5rem}
.ice-menu a{font-weight:500;font-size:.95rem;color:var(--dim)}
.ice-menu a:hover,.ice-menu a.cur{color:var(--ice)}
.ice-ham{display:none;background:none;border:none;cursor:pointer;padding:4px}
.ice-ham span{display:block;width:24px;height:2px;background:var(--ice);margin:5px 0;border-radius:2px;transition:.3s}

/* HERO */
.crystal-hero{
  min-height:520px;display:flex;align-items:center;
  padding:5rem 1.5rem;
  background:linear-gradient(160deg,#040810 30%,#0a1830 70%,#040810 100%);
  position:relative;
}
.crystal-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,50 5,50' fill='none' stroke='%2338bdf8' stroke-width='.3' opacity='.06'/%3E%3C/svg%3E");pointer-events:none}
.hero-cols{max-width:1440px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:2}
.hero-txt h1{font-size:2.8rem;font-weight:700;margin-bottom:1rem;color:var(--ice)}
.hero-txt p{color:var(--dim);font-size:1.05rem;margin-bottom:2rem;max-width:520px}
.btn-ice{display:inline-block;padding:.85rem 2.4rem;background:var(--crystal);color:#fff;font-weight:600;font-size:1rem;border:none;border-radius:6px;cursor:pointer;transition:.25s;box-shadow:0 4px 20px var(--glow)}
.btn-ice:hover{background:var(--frost);transform:translateY(-2px);color:#fff}
.hero-embed{border-radius:12px;overflow:hidden;border:2px solid var(--glow);background:#000}
.hero-embed iframe{display:block;width:100%;height:460px;border:none}

/* NOTICES */
.cryo-notices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1440px;margin:3rem auto;padding:0 1.5rem}
.cryo-note{background:var(--card);padding:1.6rem 1.3rem;border-radius:8px;border-top:3px solid var(--frost);text-align:center}
.cryo-note h3{font-size:1rem;color:var(--ice);margin-bottom:.3rem}
.cryo-note p{font-size:.9rem;color:var(--dim)}

/* ABOUT */
.about-ice{background:var(--surface);padding:4rem 1.5rem}
.about-ice-inner{max-width:1440px;margin:0 auto}
.about-ice-inner h2{font-size:1.8rem;color:var(--ice);margin-bottom:1rem;text-align:center}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2rem}
.about-grid p{color:var(--dim);font-size:1rem;margin-bottom:.8rem}
.stat-strip{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.stat-chip{background:var(--card);border-radius:8px;padding:1rem 1.4rem;flex:1;min-width:130px;text-align:center;border:1px solid var(--glow)}
.stat-chip .v{font-size:1.5rem;font-weight:700;color:var(--frost)}
.stat-chip .l{font-size:.78rem;color:var(--dim)}

/* GAME */
.game-rink{max-width:1440px;margin:4rem auto;padding:0 1.5rem}
.game-rink h2{text-align:center;font-size:1.7rem;color:var(--ice);margin-bottom:1.2rem}
.rink-frame{border-radius:12px;overflow:hidden;border:2px solid var(--glow);background:#000}
.rink-frame iframe{display:block;width:100%;height:600px;border:none}

/* CARDS */
.card-sec{max-width:1440px;margin:4rem auto;padding:0 1.5rem}
.card-sec h2{text-align:center;font-size:1.7rem;color:var(--ice);margin-bottom:2rem}
.card-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tri-card{background:var(--card);border-radius:10px;padding:2rem 1.5rem;border-left:4px solid var(--frost);transition:.2s}
.tri-card:hover{transform:translateY(-3px)}
.tri-card .em{font-size:1.8rem;margin-bottom:.5rem}
.tri-card h3{font-size:1.05rem;color:var(--ice);margin-bottom:.4rem}
.tri-card p{font-size:.9rem;color:var(--dim)}

/* PAGE */
.pg{max-width:920px;margin:3rem auto;padding:0 1.5rem}
.pg h1{font-size:2.2rem;color:var(--ice);margin-bottom:1rem}
.pg h2{font-size:1.35rem;color:var(--frost);margin:2rem 0 .7rem}
.pg p,.pg li{color:var(--dim);font-size:1rem;margin-bottom:.7rem}
.pg ul{padding-left:1.4rem;margin-bottom:1rem}

/* PLAY */
.play-top{padding:3rem 1.5rem 1rem;text-align:center}
.play-top h1{font-size:2.2rem;color:var(--ice);margin-bottom:.4rem}
.play-top p{color:var(--dim);max-width:640px;margin:0 auto}
.play-area{max-width:1440px;margin:2rem auto 3rem;padding:0 1.5rem}
.play-info{max-width:800px;margin:0 auto 3rem;padding:0 1.5rem}
.play-info h2{font-size:1.2rem;color:var(--frost);margin-bottom:.5rem}
.play-info p{color:var(--dim);font-size:.95rem}

/* FOOTER */
.ice-foot{background:var(--surface);border-top:1px solid var(--glow);padding:2.5rem 1.5rem;text-align:center}
.ice-foot p{color:var(--dim);font-size:.9rem;margin-bottom:.5rem}
.rg-lk{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-bottom:.6rem}
.rg-lk a{color:var(--frost);font-size:.9rem}

/* AGE */
.age-frost{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:flex;align-items:center;justify-content:center}
.age-shard{background:var(--card);border:2px solid var(--frost);border-radius:12px;padding:2.5rem 2rem;text-align:center;max-width:420px;width:90%}
.age-shard h2{color:var(--ice);font-size:1.4rem;margin-bottom:.7rem}
.age-shard p{color:var(--dim);margin-bottom:1.4rem}
.age-duo{display:flex;gap:1rem;justify-content:center}
.age-duo button{padding:.7rem 2.2rem;font-family:inherit;font-weight:600;font-size:1rem;border:none;border-radius:6px;cursor:pointer;transition:.2s}
.btn-go{background:var(--crystal);color:#fff}
.btn-go:hover{background:var(--frost)}
.btn-stop{background:#152030;color:var(--dim)}
.btn-stop:hover{background:#253040}
.deny{color:#f87171;font-weight:600;margin-top:.7rem;display:none}

@media(max-width:768px){
  .ice-ham{display:block}
  .ice-menu{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(4,8,16,.98);flex-direction:column;padding:1.2rem;gap:.8rem;border-bottom:1px solid var(--glow)}
  .ice-menu.open{display:flex}
  .hero-cols{grid-template-columns:1fr}
  .hero-txt h1{font-size:2rem}
  .hero-embed iframe{height:360px}
  .cryo-notices{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .card-tri{grid-template-columns:1fr}
  .rink-frame iframe{height:380px}
  .crystal-hero{min-height:auto;padding:3rem 1rem}
}