*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --void:#000B14;--deep:#00121F;
      --c1:#00D4FF;--c2:#7B2FFF;--c3:#00FFB3;
      --pearl:#D0F0FF;--fade:rgba(180,230,255,0.50);
      --glass:rgba(0,212,255,0.04);--rim:rgba(0,212,255,0.20);
    }
    html,body{height:100%;background:var(--void);color:var(--pearl);font-family:'Crimson Text',sans-serif;overflow-x:hidden}
    body{display:flex;flex-direction:column;min-height:100vh}
    header{text-align:center;padding:2rem 1rem 1rem;position:relative;z-index:2}
    header h1{
      font-family:'Cinzel',sans-serif;font-size:clamp(2rem,6vw,3.4rem);
      letter-spacing:0.04em;
      background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 55%,var(--c3) 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;
    }
    header p{margin-top:.4rem;color:var(--fade);font-size:.88rem;letter-spacing:.05em}
    .scoreboard{display:flex;justify-content:center;gap:1rem;padding:.6rem 1rem;flex-wrap:wrap;z-index:2;position:relative}
    .stat-chip{
      background:var(--glass);border:1px solid var(--rim);border-radius:22px;
      padding:.35rem 1.1rem;display:flex;align-items:center;gap:.5rem;
      font-family:'Cinzel',sans-serif;font-size:1rem;backdrop-filter:blur(6px);
    }
    .stat-chip .lbl{font-family:'Crimson Text',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fade)}
    .stat-chip .val{color:var(--c3)}
    .stat-chip.chain2 .val{color:var(--c1)}
    .stat-chip.best2 .val{color:var(--c2)}
    .game-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:.5rem 1rem 1rem}
    #seaCanvas{
      width:100%;max-width:540px;aspect-ratio:9/14;border-radius:22px;
      border:1px solid var(--rim);box-shadow:0 0 60px rgba(0,0,0,0.3);
      background:var(--deep);display:block;cursor:crosshair;touch-action:none;
    }
    .controls{margin-top:1rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}
    .btn{font-family:'Cinzel',sans-serif;font-size:.9rem;letter-spacing:.04em;border:none;border-radius:22px;padding:.55rem 1.6rem;cursor:pointer;transition:transform .12s,box-shadow .12s}
    .btn:active{transform:scale(.96)}
    .btn-primary{background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--void);box-shadow:0 4px 20px rgba(0,0,0,0.4)}
    .btn-primary:hover{filter:brightness(1.1)}
    .btn-secondary{background:var(--glass);border:1px solid var(--rim);color:var(--pearl);backdrop-filter:blur(6px)}
    .btn-secondary:hover{background:rgba(255,255,255,0.07)}
    .how-to{max-width:540px;width:100%;margin:1.2rem auto 0;padding:1rem 1.3rem;background:var(--glass);border:1px solid var(--rim);border-radius:22px;backdrop-filter:blur(6px)}
    .how-to h2{font-family:'Cinzel',sans-serif;font-size:.95rem;color:var(--c2);margin-bottom:.5rem;letter-spacing:.04em}
    .how-to ul{list-style:none;display:flex;flex-direction:column;gap:.3rem}
    .how-to li{font-size:.82rem;color:var(--fade);display:flex;align-items:center;gap:.5rem}
    .how-to li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c1);flex-shrink:0}
    footer{padding:1.2rem 1rem;text-align:center;border-top:1px solid var(--rim);margin-top:auto}
    footer nav{display:flex;justify-content:center;align-items:center;gap:.5rem 1.5rem;flex-wrap:wrap;margin-bottom:.5rem}
    footer nav a{color:var(--fade);text-decoration:none;font-size:.8rem;letter-spacing:.04em;transition:color .2s}
    footer nav a:hover{color:var(--c1)}
    footer nav .sep{width:3px;height:3px;border-radius:50%;background:var(--rim)}
    .footer-copy{font-size:.72rem;color:rgba(255,255,255,0.18)}
    .overlay{position:absolute;inset:0;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,0.82);backdrop-filter:blur(4px);pointer-events:none;opacity:0;transition:opacity .3s}
    .overlay.visible{opacity:1;pointer-events:auto}
    .overlay-title{font-family:'Cinzel',sans-serif;font-size:clamp(1.5rem,5vw,2.3rem);background:linear-gradient(135deg,var(--c1),var(--c2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.4rem}
    .overlay-sub{font-size:.86rem;color:var(--fade);margin-bottom:1.4rem;text-align:center;padding:0 1rem;max-width:280px}
    .canvas-wrap{position:relative;width:100%;max-width:540px}
    @media (prefers-reduced-motion:reduce){.btn{transition:none}}