:root{
    --bg:#0a0a0b;
    --surface:#141416;
    --grid-bg:#1e1e21;
    --grid-line:#3f3f43;
    --grid-line-strong:#78787d;
    --key-digit:#3a3a3d;
    --key-digit-text:#ffffff;
    --key-func:#a5a5a5;
    --key-func-text:#0a0a0a;
    --accent:#ff9f0a;
    --accent-text:#0a0a0a;
    --accent-ink:#ff9f0a;
    --given:#f5f5f5;
    --entered:#ffb340;
    --note:#a1a1a6;
    --error:#ff6961;
    --cage-line:#7ab3ff;
    --diag:#3d2c11;
    --peer:#232326;
    --same-num:#332a12;
    --selected:#453612;
    --text:#f5f5f5;
    --sub:#a1a1a6;
    --hairline:#2f2f32;
    --radius:14px;
    color-scheme:dark;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  [hidden]{display:none !important;}
  html,body{height:100%;}
  html{scroll-padding-top:72px;}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    transition:background .25s ease, color .25s ease;
  }
  a{color:inherit;}
  a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--accent-ink); outline-offset:2px;
  }
  .skip-link{position:absolute; left:12px; top:-56px; z-index:100; background:var(--accent); color:var(--accent-text);
    padding:10px 16px; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none;}
  .skip-link:focus{top:12px;}
  img,svg{display:block; max-width:100%;}

  /* ===== nav ===== */
  header.site-nav{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--hairline);
  }
  .nav-inner{
    max-width:960px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; text-decoration:none;}
  .brand-mark{
    width:26px; height:26px; border-radius:7px; background:#000;
    display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:4px; flex:none;
  }
  .brand-mark span{background:var(--accent); border-radius:1px;}
  .nav-links{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0;}
  .nav-links a{font-size:14px; font-weight:600; color:var(--sub); text-decoration:none;}
  .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text);}
  .nav-play-btn{
    background:var(--accent); color:var(--accent-text); border:none; border-radius:20px;
    padding:8px 16px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none;
  }
  .nav-right{display:flex; align-items:center; gap:14px;}
  .nav-support-btn{
    background:transparent; color:var(--accent-ink); border:1.5px solid var(--accent); border-radius:20px;
    padding:6.5px 14px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap;
    transition:background .15s, color .15s;
  }
  .nav-support-btn:hover{background:var(--accent); color:var(--accent-text);}
  .nav-menu-btn{display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer;}

  @media (max-width:640px){
    .nav-links{display:none;}
    .nav-menu-btn{display:block;}
    .nav-right{gap:8px;}
    .nav-support-btn{padding:5.5px 11px; font-size:13px;}
    .nav-play-btn{padding:7px 13px; font-size:13px;}
    .nav-links.open{
      display:flex; flex-direction:column; position:absolute; top:56px; left:0; right:0;
      background:var(--surface); padding:16px 20px; gap:16px; border-bottom:1px solid var(--hairline);
    }
  }

  main{max-width:960px; margin:0 auto; padding:0 20px;}

  /* ===== hero ===== */
  .hero{padding:56px 0 36px; text-align:center;}
  .hero h1{
    font-size:clamp(28px,6vw,42px); font-weight:700; margin:0 0 12px; line-height:1.15; letter-spacing:-.5px;
  }
  .hero p{font-size:16px; color:var(--sub); max-width:520px; margin:0 auto 24px; line-height:1.6;}
  .hero-cta{
    display:inline-block; background:var(--accent); color:var(--accent-text);
    padding:14px 30px; border-radius:26px; font-weight:700; font-size:15px; text-decoration:none;
  }

  /* ===== game section ===== */
  section#play{padding:20px 0 48px;}
  .game-card{
    background:var(--surface); border-radius:20px; padding:18px; max-width:480px; margin:0 auto;
    border:1px solid var(--hairline);
  }
  .game-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .game-topbar h2{font-size:17px; font-weight:700; margin:0;}
  .icon-btn{
    width:34px; height:34px; border-radius:50%; border:none; background:var(--key-func);
    color:var(--key-func-text); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .icon-btn-group{display:flex; gap:8px;}

  .tabs{display:flex; background:var(--grid-bg); border-radius:12px; padding:4px; gap:4px; margin-bottom:10px;}
  .tab{
    flex:1; text-align:center; padding:9px 4px; border-radius:9px; border:none;
    background:transparent; color:var(--sub); font-size:13px; font-weight:600;
    cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .tab.active{background:var(--accent); color:var(--accent-text);}

  .meta{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--sub); padding:0 2px; margin-bottom:10px;}
  .meta select{
    background:var(--grid-bg); color:var(--text); border:none; border-radius:8px;
    padding:6px 10px; font-size:13px; font-weight:600;
  }
  .meta .stat{display:flex; gap:14px;}

  .board-wrap{background:var(--grid-bg); border-radius:14px; padding:8px; position:relative;}
  .note-banner{
    position:absolute; left:50%; top:-17px; transform:translateX(-50%); z-index:6;
    background:var(--accent); color:var(--accent-text); font-size:11px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:20px;
    white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.5); pointer-events:none;
  }
  .board{
    display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr);
    aspect-ratio:1/1; width:100%; border-radius:8px; overflow:hidden;
  }
  .cell{
    position:relative; display:flex; align-items:center; justify-content:center;
    font-size:clamp(16px,4.6vw,22px); font-weight:500; color:var(--given);
    background:var(--grid-bg); border:0.5px solid var(--grid-line); cursor:pointer; user-select:none;
  }
  .cell.entered{color:var(--entered); font-weight:600;}
  .cell.error{color:var(--error);}
  .cell.peer{background:var(--peer);}
  .cell.same-num{background:var(--same-num);}
  .cell.selected{background:var(--selected);}
  .cell.diag::before{content:""; position:absolute; inset:0; background:var(--diag); opacity:.55; z-index:0;}
  .cell > span{position:relative; z-index:1;}
  .cell:focus-visible{outline:2px solid var(--accent-ink); outline-offset:-2px; z-index:3;}
  .board-row{display:contents;}
  .cell.border-r{border-right:2px solid var(--grid-line-strong);}
  .cell.border-b{border-bottom:2px solid var(--grid-line-strong);}

  .cage-sum{position:absolute; top:4px; left:5px; font-size:10px; font-weight:700; line-height:1; color:var(--cage-line); z-index:2;}
  /* Cage outlines are drawn inset with a pseudo-element, so they never replace the thick 3x3 box lines. */
  .cell[class*="cage-"]::after{
    content:""; position:absolute; z-index:2; pointer-events:none;
    top:var(--cage-t,0px); right:var(--cage-r,0px); bottom:var(--cage-b,0px); left:var(--cage-l,0px);
    border:0 dashed var(--cage-line);
  }
  .cell.cage-top{--cage-t:2px;}    .cell.cage-top::after{border-top-width:1.5px;}
  .cell.cage-right{--cage-r:2px;}  .cell.cage-right::after{border-right-width:1.5px;}
  .cell.cage-bottom{--cage-b:2px;} .cell.cage-bottom::after{border-bottom-width:1.5px;}
  .cell.cage-left{--cage-l:2px;}   .cell.cage-left::after{border-left-width:1.5px;}

  .notes{position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); z-index:1; pointer-events:none;}
  .notes span{display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--note); font-weight:600;}

  .killer-helper{
    background:var(--grid-bg); border-radius:12px; padding:10px 12px; margin-top:10px;
    font-size:12px; color:var(--sub); display:none; gap:6px; flex-direction:column;
  }
  .killer-helper.show{display:flex;}
  .killer-helper .row{display:flex; justify-content:space-between; align-items:center;}
  .cage-label-wrap{position:relative; display:flex; align-items:center; gap:6px; min-width:0;}
  .cage-info{width:17px; height:17px; border:1px solid var(--sub); border-radius:50%; background:transparent; color:var(--sub);
    display:inline-flex; align-items:center; justify-content:center; padding:0; font-size:11px; font-weight:700; line-height:1; cursor:pointer; flex:none;}
  .cage-info:hover,.cage-info:focus-visible{color:var(--text); border-color:var(--text); outline:none;}
  .cage-info-popover{position:absolute; z-index:20; top:calc(100% + 8px); left:0; width:min(250px, calc(100vw - 56px));
    background:var(--surface); border:1px solid var(--grid-line-strong); border-radius:10px; padding:10px 12px;
    box-shadow:0 8px 24px rgba(0,0,0,.28); color:var(--text); font-size:11.5px; line-height:1.45;}
  .cage-info-popover::before{content:""; position:absolute; top:-5px; left:7px; width:9px; height:9px;
    background:var(--surface); border-left:1px solid var(--grid-line-strong); border-top:1px solid var(--grid-line-strong); transform:rotate(45deg);}
  .cage-info-popover strong{display:block; margin-bottom:3px; font-size:12px;}
  .cage-info-popover p{margin:0; color:var(--sub);}
  .killer-helper .combos{display:flex; flex-wrap:wrap; gap:6px;}
  .killer-helper .combo{background:var(--surface); padding:3px 8px; border-radius:8px; font-weight:600; color:var(--text);}

  /* hint popup: a floating window in the centre of the screen, always in view (also in fullscreen and on phones) */
  .hint-panel{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:150;
    width:min(400px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; box-sizing:border-box;
    background:var(--surface); border:1px solid var(--grid-line-strong); border-top:4px solid var(--accent);
    border-radius:18px; padding:18px 20px 20px; box-shadow:0 0 0 100vmax rgba(0,0,0,.55), 0 24px 70px rgba(0,0,0,.6);
    display:none; flex-direction:column; gap:10px;
  }
  .hint-panel.show{display:flex; animation:hintPop .22s cubic-bezier(.2,.9,.3,1.2);}
  @keyframes hintPop{from{opacity:0; transform:translate(-50%,-46%) scale(.94);} to{opacity:1; transform:translate(-50%,-50%) scale(1);}}
  @media (prefers-reduced-motion:reduce){.hint-panel.show{animation:none;}}
  .hint-panel p{font-size:15px !important; color:var(--text) !important;}
  .hint-panel strong{font-size:12px !important;}
  .hint-panel .hint-apply{align-self:stretch; padding:12px 14px; font-size:15px; border-radius:10px;}
  .hint-dismiss{padding:2px 6px; font-size:16px !important;}
  .hint-panel .row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .hint-panel strong{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-ink);}
  .hint-panel p{font-size:13px; line-height:1.5; color:var(--sub); margin:0;}
  .hint-dismiss{background:none; border:none; color:var(--sub); cursor:pointer; font-size:12px; flex:none;}
  .hint-apply{
    align-self:flex-start; background:var(--accent); color:var(--accent-text); border:none;
    border-radius:8px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer;
  }

  .actions{display:flex; justify-content:space-between; gap:8px; margin-top:14px;}
  .action-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; color:var(--sub); cursor:pointer; padding:6px 0; font-size:11px; font-weight:600;
  }
  .action-btn .icon{font-size:18px;}
  .action-btn.active-toggle{color:var(--accent-ink);}

  .pad{display:grid; grid-template-columns:repeat(9,1fr); gap:8px; margin-top:14px;}
  .key{
    aspect-ratio:1/1; border-radius:50%; border:none; background:var(--key-digit); color:var(--key-digit-text);
    font-size:clamp(15px,4vw,19px); font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:filter .1s ease;
  }
  .key:active{filter:brightness(1.3);}

  .rules-note{font-size:11.5px; color:var(--sub); text-align:center; line-height:1.5; padding:10px 6px 0;}

  /* fullscreen state: game card fills viewport, hide chrome */
  .game-card:fullscreen{
    max-width:100%; width:100%; height:100dvh; min-height:0; overflow:auto;
    display:flex; flex-direction:column; justify-content:flex-start;
    border-radius:0; padding:24px;
  }
  .game-card:fullscreen .board-wrap{max-width:520px; margin:0 auto; width:100%;}
  .game-card:fullscreen .pad,
  .game-card:fullscreen .actions,
  .game-card:fullscreen .killer-helper{max-width:520px; margin-left:auto; margin-right:auto; width:100%;}

  /* ===== settings-style list sections (modes / features / faq) ===== */
  .list-section{padding:44px 0;}
  .list-section h2{font-size:22px; font-weight:700; margin:0 0 6px;}
  .list-section .section-sub{color:var(--sub); font-size:14px; margin:0 0 20px;}
  .list-rows{border-top:1px solid var(--hairline);}
  .list-row{
    display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--hairline); align-items:flex-start;
  }
  .list-row .badge{
    width:34px; height:34px; border-radius:9px; background:var(--surface); border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent-ink); flex:none; font-size:14px;
  }
  .list-row h3{font-size:15px; font-weight:700; margin:0 0 4px;}
  .list-row p{font-size:14px; color:var(--sub); margin:0; line-height:1.55;}

  details.faq-row{border-bottom:1px solid var(--hairline); padding:16px 0;}
  details.faq-row summary{font-size:15px; font-weight:600; cursor:pointer; list-style:none;}
  details.faq-row summary::-webkit-details-marker{display:none;}
  details.faq-row summary::after{content:"+"; float:right; color:var(--sub); font-weight:400;}
  details.faq-row[open] summary::after{content:"−";}
  details.faq-row p{font-size:14px; color:var(--sub); margin:10px 0 0; line-height:1.6;}

  footer{border-top:1px solid var(--hairline); margin-top:20px;}
  .footer-inner{max-width:960px; margin:0 auto; padding:28px 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
  .footer-inner p{font-size:13px; color:var(--sub); margin:0;}
  .footer-links{display:flex; flex-wrap:wrap; gap:8px 16px; list-style:none; margin:0; padding:0;}
  .footer-links a{font-size:13px; color:var(--sub); text-decoration:none;}

  .page-hero{padding:52px 0 28px;max-width:760px}
  .page-hero h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:0 0 12px;letter-spacing:-.5px}
  .page-hero p{font-size:16px;color:var(--sub);line-height:1.7;margin:0}
  .content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:20px 0 52px}
  .content-card{background:var(--surface);border:1px solid var(--hairline);border-radius:16px;padding:22px}
  .content-card h2,.content-card h3{margin:0 0 9px;line-height:1.3}
  .content-card h2{font-size:20px}.content-card h3{font-size:16px}
  .content-card p,.content-card li{font-size:14px;color:var(--sub);line-height:1.7}
  .content-card p{margin:0 0 12px}.content-card p:last-child{margin-bottom:0}
  .content-card ul,.content-card ol{padding-left:20px;margin:8px 0 0}.wide{grid-column:1/-1}
  .breadcrumbs{font-size:12px;color:var(--sub);padding-top:22px}.breadcrumbs a{text-decoration:none;color:var(--sub)}
  .breadcrumbs a:hover{color:var(--text)}
  .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
  .secondary-cta{display:inline-block;border:1px solid var(--hairline);background:var(--surface);color:var(--text);padding:12px 20px;border-radius:24px;font-weight:700;font-size:14px;text-decoration:none}
  .legal-copy{padding:10px 0 52px;max-width:780px}.legal-copy section{padding:18px 0;border-bottom:1px solid var(--hairline)}
  .legal-copy h2{font-size:19px;margin:0 0 8px}.legal-copy p,.legal-copy li{font-size:14px;color:var(--sub);line-height:1.75}
  .contact-box{max-width:680px;margin:10px 0 52px}.contact-box a{color:var(--accent-ink);font-weight:700;text-decoration:none}
  @media(max-width:640px){.content-grid{grid-template-columns:1fr}.wide{grid-column:auto}.page-hero{padding-top:40px}}

  /* ===== added: loading state, confirm dialog, small helpers ===== */
  .board-wrap.loading::after{
    content:"Building puzzle…"; position:absolute; inset:8px; z-index:5; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--grid-bg) 85%, transparent); color:var(--sub); font-size:14px; font-weight:600;
  }
  .confirm-dialog{
    border:1px solid var(--grid-line-strong); border-radius:16px; background:var(--surface); color:var(--text);
    padding:20px; width:min(360px, calc(100vw - 32px));
  }
  .confirm-dialog::backdrop{background:rgba(0,0,0,.55);}
  .confirm-dialog h3{margin:0 0 6px; font-size:17px;}
  .confirm-dialog p{margin:0 0 18px; color:var(--sub); font-size:14px; line-height:1.5;}
  .confirm-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
  .secondary-btn{
    background:var(--grid-bg); color:var(--text); border:1px solid var(--hairline); border-radius:8px;
    padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer;
  }
  .last-updated{font-size:13px !important; margin-top:10px !important;}
  .noscript-note{max-width:480px; margin:0 auto 12px; padding:12px 14px; border-radius:12px; background:var(--surface);
    border:1px solid var(--hairline); color:var(--sub); font-size:14px; text-align:center;}

  /* ===== added: small screens — roomier board, bigger number keys ===== */
  @media (max-width:480px){
    main{padding:0 12px;}
    .game-card{padding:12px; border-radius:16px;}
    .pad{gap:5px;}
    .key{aspect-ratio:auto; height:46px; border-radius:12px;}
    .cage-sum{font-size:9px; top:3px; left:4px;}
    .nav-inner{padding:12px 14px; gap:8px;}
    .nav-right{gap:8px;}
    .nav-play-btn{padding:8px 12px;}
  }

.tbl-wrap{overflow-x:auto}.combo{width:100%;border-collapse:collapse;font-size:14px}.combo th,.combo td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--hairline);color:var(--sub)}.combo th{color:var(--text);font-weight:600}.content-card h3 a,.list-row h3 a{color:inherit}

  /* ===== support popup ===== */
  .support-overlay{
    position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
    padding:20px; background:rgba(0,0,0,.62); backdrop-filter:blur(4px);
  }
  .support-overlay.open{display:flex;}
  .support-modal{
    position:relative; width:100%; max-width:380px; text-align:center;
    background:var(--surface); border:1px solid var(--hairline); border-radius:20px;
    padding:30px 26px 24px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
  .support-close{
    position:absolute; top:10px; right:12px; width:34px; height:34px; border:none; border-radius:50%;
    background:transparent; color:var(--sub); font-size:22px; line-height:1; cursor:pointer;
  }
  .support-close:hover{color:var(--text); background:var(--grid-bg);}
  .support-icon{font-size:34px; line-height:1; margin-bottom:10px;}
  .support-modal h2{margin:0 0 8px; font-size:20px; line-height:1.3;}
  .support-modal p{margin:0 0 20px; font-size:14.5px; line-height:1.6; color:var(--sub);}
  .support-go{
    display:block; background:var(--accent); color:var(--accent-text); border-radius:24px;
    padding:12px 18px; font-size:15px; font-weight:700; text-decoration:none;
  }
  .support-go:hover{filter:brightness(1.08);}
  .support-later{
    margin-top:12px; background:none; border:none; color:var(--sub); font-size:13px; font-weight:600; cursor:pointer;
  }
  .support-later:hover{color:var(--text);}

  /* ===== win popup ===== */
  .win-dialog{
    border:1px solid var(--grid-line-strong); border-radius:22px; background:var(--surface); color:var(--text);
    padding:30px 24px 22px; width:min(380px, calc(100vw - 32px)); text-align:center;
    box-shadow:0 24px 70px rgba(0,0,0,.55);
    max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto;
  }
  .win-dialog[open]{animation:winPop .28s cubic-bezier(.2,.9,.3,1.2);}
  .win-dialog::backdrop{background:rgba(0,0,0,.66); backdrop-filter:blur(4px);}
  @keyframes winPop{from{opacity:0; transform:translateY(10px) scale(.94);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion:reduce){.win-dialog[open]{animation:none;}}
  .win-x{
    position:absolute; top:10px; right:12px; width:34px; height:34px; border:none; border-radius:50%;
    background:transparent; color:var(--sub); font-size:22px; line-height:1; cursor:pointer;
  }
  .win-x:hover{color:var(--text); background:var(--grid-bg);}
  .win-emoji{font-size:40px; line-height:1; margin-bottom:8px;}
  .win-dialog h3{margin:0 0 4px; font-size:22px;}
  .win-sub{margin:0 0 18px; color:var(--sub); font-size:14px;}
  .win-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;}
  .win-stats div{background:var(--grid-bg); border:1px solid var(--hairline); border-radius:14px; padding:12px 6px;}
  .win-stats strong{display:block; font-size:22px; font-variant-numeric:tabular-nums;}
  .win-stats span{display:block; margin-top:2px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--sub);}
  .win-best{min-height:20px; margin:0 0 18px; font-size:13.5px; font-weight:600; color:var(--accent-ink);}
  .win-best:empty{display:none;}
  .win-play{
    display:block; width:100%; border:none; border-radius:26px; background:var(--accent); color:var(--accent-text);
    padding:13px 18px; font-size:16px; font-weight:800; cursor:pointer;
  }
  .win-play:hover{filter:brightness(1.08);}
  .win-support{
    display:block; margin-top:10px; border:1.5px solid var(--accent); border-radius:26px; color:var(--accent-ink);
    padding:11.5px 18px; font-size:15px; font-weight:700; text-decoration:none;
  }
  .win-support:hover{background:var(--accent); color:var(--accent-text);}
  .win-note{margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--sub);}


  /* ===== printing ===== */
  .win-link{
    display:block; margin:12px auto 0; background:none; border:none; color:var(--sub);
    font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  }
  .win-link:hover{color:var(--text);}
  .print-check{display:flex; align-items:center; gap:8px; margin:0 0 18px; font-size:14px; color:var(--text); cursor:pointer;}
  .confirm-dialog p a{color:var(--accent-ink);}

  /* printable puzzles page */
  .print-tool{background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:22px; margin:8px 0 18px;}
  .print-tool h2{margin:0 0 14px; font-size:20px;}
  .print-form{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
  .print-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--sub);}
  .print-form select{
    background:var(--grid-bg); color:var(--text); border:1px solid var(--hairline); border-radius:8px;
    padding:9px 10px; font-size:14px; font-weight:600;
  }
  .print-opts{display:flex; gap:18px; flex-wrap:wrap; margin-top:16px;}
  .print-opts .print-check{margin:0; color:var(--sub);}
  .print-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px;}
  .print-actions button{
    border-radius:26px; padding:11px 22px; font-size:15px; font-weight:700; cursor:pointer; border:1px solid var(--accent);
  }
  .print-actions .primary{background:var(--accent); color:var(--accent-text);}
  .print-actions .ghost{background:none; color:var(--accent-ink);}
  .print-actions button:disabled{opacity:.45; cursor:not-allowed;}
  .print-status{font-size:13px; color:var(--sub);}
  .print-preview{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:18px;}
  .print-preview:empty{display:none;}
  .print-preview figure{margin:0; background:#fff; border-radius:8px; padding:6px;}
  .print-preview figcaption{font-size:11px; font-weight:700; color:#333; text-align:center; padding-top:4px;}
  .print-preview svg{display:block; width:100%; height:auto;}
  @media(max-width:640px){.print-form{grid-template-columns:1fr 1fr;}}

  /* printable sheet: built by print.js, only visible while printing */
  #printSheet{display:none;}
  @media print{
    @page{margin:14mm;}
    html.printing-puzzle body > *:not(#printSheet),
    html.printing-puzzle dialog{display:none !important;}
    html.printing-puzzle, html.printing-puzzle body{background:#fff !important; color:#000 !important; transition:none !important;}
    html.printing-puzzle #printSheet{display:block;}
    #printSheet{font-family:"Segoe UI", system-ui, -apple-system, Arial, sans-serif; color:#000;}
    .print-page{page-break-after:always; break-after:page; text-align:center;}
    .print-page:last-child{page-break-after:auto; break-after:auto;}
    .print-item{break-inside:avoid; page-break-inside:avoid;}
    .print-brand{font-size:11pt; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#444;}
    .print-page h1{margin:4px 0 2px; font-size:24pt;}
    .print-sub{margin:0 0 4px; font-size:12pt; font-weight:700; color:#222;}
    .print-rules{margin:0 auto 14px; max-width:150mm; font-size:11pt; color:#333;}
    .print-page svg{display:block; width:100%; max-width:165mm; height:auto; margin:0 auto;}
    .print-lines{display:flex; justify-content:space-between; max-width:165mm; margin:14px auto 0; font-size:12pt;}
    .print-foot{margin-top:16px; font-size:10pt; color:#555;}
    .print-page.two .print-item{margin-bottom:8mm;}
    .print-page.two h1{font-size:15pt; display:inline;}
    .print-page.two .print-brand{display:inline; margin-right:8px;}
    .print-page.two .print-sub{display:inline; margin-left:8px;}
    .print-page.two .print-rules{display:none;}
    .print-page.two .print-head{margin-bottom:4px;}
    .print-page.two svg{max-width:98mm;}
    .print-page.two .print-lines{margin-top:6px; font-size:10pt; max-width:98mm;}
    .print-page.two .print-foot{margin-top:4px;}
    .print-key-grid{display:grid; grid-template-columns:1fr 1fr; gap:10mm 8mm; margin-top:8mm;}
    .print-key-item h2{margin:0 0 4px; font-size:10pt;}
    .print-key-item svg{max-width:78mm;}
  }