:root{
    --teal:#17a2b8; --teal-d:#0e8296; --navy:#123a5c; --cream:#fdf6e3;
    --yellow:#ffc94a; --orange:#ff5b37; --green:#5cba47; --purple:#a97fd6;
    --ink:#123a5c; --muted:#6b8aa3; --line:#e6eef3;
    --r:22px; --shadow:0 10px 0 rgba(18,58,92,.08), 0 18px 40px rgba(18,58,92,.10);
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--cream);color:var(--ink);font:600 16px/1.6 Quicksand,system-ui,sans-serif;
       background-image:radial-gradient(circle at 12% 8%,rgba(23,162,184,.10),transparent 40%),
                        radial-gradient(circle at 88% 22%,rgba(255,201,74,.16),transparent 45%);}
  h1,h2,h3,.brand{font-family:'Baloo 2',Quicksand,system-ui,sans-serif;line-height:1.15;margin:0}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
  :focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:8px}

  /* ---------- nav ---------- */
  header{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
         background:rgba(253,246,227,.86);border-bottom:2px solid rgba(23,162,184,.15)}
  .nav{display:flex;align-items:center;gap:18px;height:76px}
  .brand{display:flex;align-items:center;gap:10px;font-size:26px;color:var(--teal)}
  .brand img{width:48px;height:48px;border-radius:50%;box-shadow:0 4px 12px rgba(18,58,92,.15)}
  .brand span i{font-style:normal;color:var(--orange)}
  .nav .links{display:flex;gap:22px;margin-left:auto;font-size:15px;color:var(--muted)}
  .nav .links a:hover{color:var(--teal)}

  /* ---------- buttons ---------- */
  .btn{display:inline-block;border:0;cursor:pointer;font:700 16px Quicksand,sans-serif;padding:14px 26px;
       border-radius:999px;background:var(--teal);color:#fff;box-shadow:0 5px 0 var(--teal-d);transition:.15s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--teal-d)}
  .btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--teal-d)}
  .btn.orange{background:var(--orange);box-shadow:0 5px 0 #d43f1f}
  .btn.orange:hover{box-shadow:0 7px 0 #d43f1f}
  .btn.ghost{background:#fff;color:var(--teal);box-shadow:0 5px 0 #cfe6ea}

  /* ---------- hero ---------- */
  .hero{padding:34px 0 10px}
  .hero-banner{border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:4px solid #fff}
  .hero-copy{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:46px 0 10px}
  .hero-copy h1{font-size:clamp(34px,5vw,58px);text-wrap:balance}
  .hero-copy h1 em{font-style:normal;color:var(--teal)}
  .hero-copy .lead{color:var(--muted);font-size:18px;max-width:48ch}
  .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
  .traits{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
  .trait{background:#fff;border-radius:999px;padding:8px 16px;font-size:14px;box-shadow:0 4px 0 rgba(18,58,92,.06)}
  .hero-fig{background:#fff;border-radius:28px;padding:18px;box-shadow:var(--shadow)}

  /* ---------- section ---------- */
  section[id]{scroll-margin-top:92px}   /* header dính cao 76px, không chừa thì tiêu đề bị che */
  .sec{margin:64px auto}   /* auto chứ không phải 0: .sec khai sau .wrap, margin:64px 0 sẽ nuốt mất canh giữa */
  .sec-head{margin-bottom:24px;max-width:60ch}
  .sec-head h2{font-size:clamp(26px,3.4vw,38px);text-wrap:balance}
  .sec-head p{margin:8px 0 0;color:var(--muted)}
  .pill{display:inline-block;background:var(--teal);color:#fff;font:700 13px Quicksand;padding:6px 14px;
        border-radius:999px;margin-bottom:10px;letter-spacing:.4px;text-transform:uppercase}

  /* ---------- crop tiles ---------- */
  .tiles{display:grid;gap:20px}
  .c4{grid-template-columns:repeat(4,1fr)}
  .c5{grid-template-columns:repeat(5,1fr)}
  .tile{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;text-align:center;
        transition:.18s;margin:0}
  .tile:hover{transform:translateY(-6px) rotate(-1deg)}
  .thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f2fbfd}
  .thumb img{position:absolute;max-width:none}
  .thumb img.whole{position:static;width:100%;height:100%;object-fit:contain;padding:6%}
  .hero-fig .thumb img.whole,.profile .thumb img.whole{padding:2%}   /* 2 ảnh lớn: bớt lề cho đỡ hụt */
  .tile .cap{padding:12px 12px 16px}
  .tile h3{font-size:18px}
  .tile p{margin:2px 0 0;font-size:13px;color:var(--muted)}

  /* ---------- profile ---------- */
  .profile{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:center;background:#fff;
           border-radius:28px;padding:30px;box-shadow:var(--shadow)}
  .profile .thumb{border-radius:20px;background:#eef9fb}
  dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:16px}
  dt{color:var(--muted);font-size:14px}
  dd{margin:0;font-family:'Baloo 2';font-size:19px}
  blockquote{margin:24px 0 0;padding:16px 20px;background:#f2fbfd;border-radius:16px;
             font-family:'Baloo 2';font-size:20px;color:var(--teal-d)}

  /* ---------- chọn nhân vật ---------- */
  .picker{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
  .picker button{border:3px solid transparent;background:#f2fbfd;border-radius:999px;cursor:pointer;
        display:flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;font:700 15px Quicksand;color:var(--ink);
        transition:.15s}
  .picker img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff}
  .picker button:hover{transform:translateY(-2px)}
  .picker button[aria-pressed="true"]{border-color:var(--teal);background:#fff;box-shadow:0 5px 0 #cfe6ea}
  .tile button{all:unset;display:block;cursor:pointer;width:100%}

  /* ---------- popover hồ sơ (dialog gốc: ESC + backdrop + focus trap sẵn) ---------- */
  dialog{border:0;padding:0;background:transparent;max-width:min(920px,94%);width:100%;
         max-height:92dvh;overflow:visible;color:var(--ink)}
  dialog::backdrop{background:rgba(18,58,92,.55);backdrop-filter:blur(4px)}
  dialog[open]{animation:pop .18s ease-out}
  @keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}}
  .modal-card{position:relative;max-height:92dvh;overflow:auto;-webkit-overflow-scrolling:touch}
  .modal-close{position:absolute;top:12px;right:12px;z-index:2;width:42px;height:42px;border:0;cursor:pointer;
        border-radius:50%;background:var(--orange);color:#fff;font:700 20px/1 Quicksand;box-shadow:0 4px 0 #d43f1f}
  .modal-close:hover{transform:translateY(-2px)}

  /* ---------- outro ---------- */
  .outro{background:var(--teal);color:#fff;border-radius:28px;padding:44px;text-align:center;
         box-shadow:0 12px 0 var(--teal-d)}
  .outro h2{font-size:clamp(26px,4vw,40px)}
  .outro p{color:#d9f4f9;max-width:52ch;margin:10px auto 0}
  .outro .btn{margin-top:24px}

  footer{margin-top:60px;background:var(--navy);color:#a9ccd9;padding:34px 0;font-size:14px}
  footer .cols{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
  footer .social{display:flex;align-items:center;gap:12px}
  footer .social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
        background:rgba(255,255,255,.10);color:#fff;transition:.15s}
  footer .social a:hover{transform:translateY(-3px);color:#fff}
  footer .social a.fb:hover{background:#1877f2}
  footer .social a.yt:hover{background:#ff0000}
  footer .social svg{width:22px;height:22px;fill:currentColor}

  /* ---------- game: tìm điểm khác nhau ---------- */
  .game{position:relative;background:#fff;border-radius:28px;padding:20px;box-shadow:var(--shadow)}
  .hud{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .hud .lv{font:800 19px 'Baloo 2';color:var(--teal)}
  .hud .btn{padding:9px 18px;font-size:14px}
  .dots{display:flex;gap:6px;margin-right:auto}
  .dots i{width:15px;height:15px;border-radius:50%;background:#e6eef3;transition:.15s}
  .dots i.on{background:var(--orange);transform:scale(1.15)}
  .clock{font:800 20px 'Baloo 2';background:#f2fbfd;border-radius:999px;padding:5px 16px;min-width:88px;text-align:center}
  .clock.low{background:#ffe6e0;color:var(--orange)}
  .panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .panel{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:18px;border:4px solid #fff;
         background:#cdeffb center/cover;box-shadow:0 6px 0 rgba(18,58,92,.08);cursor:crosshair;touch-action:manipulation}
  .prop{position:absolute;transform:translate(-50%,-50%);pointer-events:none;-webkit-user-drag:none}
  /* bóng tiếp đất: bầu dục dẹt, mờ, nằm ngay dưới chân vật. Nhờ nó vật mới "đứng trên"
     nền chứ không "dán lên" nền. aspect-ratio tính bằng px nên bóng luôn dẹt đúng tỉ lệ. */
  .sh{position:absolute;transform:translate(-50%,-50%);aspect-ratio:4.5;border-radius:50%;
      background:rgba(18,58,92,.22);filter:blur(4px);pointer-events:none}
  /* KHÔNG đặt cursor cho .hot: con trỏ đổi hình khi lia ngang qua là lộ luôn đáp án.
     Bỏ trống để nó thừa kế crosshair của .panel -> rê khắp khung con trỏ vẫn y nguyên. */
  .hot{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1;border-radius:50%}
  .hot.found{border:4px solid var(--orange);background:rgba(255,91,55,.14)}
  .ping{position:absolute;pointer-events:none;font:800 32px 'Baloo 2';color:#e23c1a;animation:ping .6s ease-out forwards}
  @keyframes ping{from{opacity:1;transform:translate(-50%,-50%) scale(.5)}to{opacity:0;transform:translate(-50%,-110%) scale(1.3)}}
  .panel.miss{animation:shake .3s}
  @keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
  .cover{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;padding:24px;
         border-radius:28px;background:rgba(253,246,227,.95);backdrop-filter:blur(3px)}
  .cover[hidden]{display:none}   /* [hidden] thua display:grid nếu không ghi đè */
  .cover h3{font-size:clamp(23px,3.6vw,32px);color:var(--teal)}
  .cover p{margin:8px auto 0;color:var(--muted);max-width:46ch}
  .cover img{width:clamp(90px,14vw,130px);margin:0 auto 10px;border-radius:50%;box-shadow:0 6px 0 rgba(18,58,92,.08)}
  .cover .btn{margin-top:20px}

  @media(max-width:900px){
    .hero-copy,.profile{grid-template-columns:1fr}
    .modal-card .thumb{max-width:240px;margin:0 auto}
    .modal-card{padding:24px 20px}
    .c4{grid-template-columns:repeat(2,1fr)}
    .c5{grid-template-columns:repeat(3,1fr)}
    .nav .links{display:none}
    .panels{grid-template-columns:1fr}
    .panel{width:min(100%,calc(32dvh * 4 / 3));margin:0 auto}   /* xếp dọc: 2 khung phải cùng lọt màn hình */
  }
  @media(max-width:560px){
    .c5,.c4{grid-template-columns:repeat(2,1fr)}
    .hud .btn{margin-left:auto}
    dialog{max-width:100%;width:100%;margin:auto 0 0;max-height:90dvh}   /* điện thoại: kéo lên từ đáy */
    .modal-card{border-radius:24px 24px 0 0;max-height:90dvh}
    .modal-card .thumb{max-width:180px}
    dl{grid-template-columns:1fr;gap:2px 0}
    dl dd{margin-bottom:10px}
    blockquote{font-size:17px}
  }
  @media(prefers-reduced-motion:reduce){ *{transition:none!important} }