:root{
    --navy:#0a1f33; --navy2:#12294d;
    --green:#2f9e44; --green-d:#1e6b2e; --green-l:#e8f5e9;
    --bg:#f3f6f1; --card:#ffffff; --text:#1c2733; --muted:#5d6b7a;
    --border:#dfe7de; --radius:16px;
    --cream:#fffdf4; --gold:#e8a100; --gold-d:#b97e00;
    --red:#d64545; --red-l:#fdecec;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.5;}
  .site-header{background:var(--navy); color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10;}
  .site-header a.back{color:#fff; text-decoration:none; font-weight:600; font-size:15px;}
  .site-header a.back:hover{text-decoration:underline;}
  .brand{font-weight:800; letter-spacing:.3px;}
  .wrap{max-width:680px; margin:0 auto; padding:16px 16px 32px;}
  .hero{background:linear-gradient(135deg,var(--navy2),var(--navy)); color:#fff; border-radius:var(--radius); padding:26px 22px; margin-bottom:16px; text-align:center;}
  .hero h1{margin:0 0 6px; font-size:30px;}
  .hero p{margin:0; opacity:.94; font-size:15.5px;}
  .card{background:var(--card); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:0 2px 10px rgba(10,31,51,.06); border:1px solid var(--border);}
  .card h2{margin:0 0 12px; font-size:20px; color:var(--navy);}
  .steps3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
  @media(max-width:560px){.steps3{grid-template-columns:1fr}}
  .step3{background:var(--green-l); border:1px solid var(--border); border-radius:12px; padding:12px 14px;}
  .step3 .n{display:inline-block; background:var(--green-d); color:#fff; font-weight:800; border-radius:50%; width:26px; height:26px; line-height:26px; text-align:center; margin-right:8px; font-size:15px;}
  .step3 b{color:var(--navy); font-size:16px;}
  .step3 p{margin:6px 0 0; font-size:14px; color:var(--text);}
  label.nameLab{display:block; font-weight:700; color:var(--navy); margin:12px 0 6px; font-size:15px;}
  input.nameIn{width:100%; font-size:17px; padding:12px 14px; border:2px solid var(--border); border-radius:12px; font-family:inherit;}
  input.nameIn:focus{border-color:var(--green); outline:none;}
  .bigBtn{display:block; width:100%; background:var(--green); color:#fff; font-weight:800; font-size:18px; padding:15px; border:0; border-radius:14px; cursor:pointer; margin-top:18px; font-family:inherit;}
  .bigBtn:hover{background:var(--green-d);}
  .ghostBtn{display:block; width:100%; background:#fff; color:var(--green-d); font-weight:800; font-size:16px; padding:13px; border:2px solid var(--green); border-radius:14px; cursor:pointer; margin-top:10px; font-family:inherit;}
  /* scoreboard */
  .scoreRow{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch; margin-bottom:14px;}
  .pBox{background:var(--card); border:2px solid var(--border); border-radius:14px; padding:10px 12px; text-align:center; transition:all .2s;}
  .pBox .nm{font-weight:800; color:var(--navy); font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .pBox .sc{font-size:30px; font-weight:900; color:var(--navy); line-height:1.1;}
  .pBox .pips{font-size:11px; letter-spacing:3px; color:var(--green); min-height:14px;}
  .pBox .pips .off{color:#d5ddd5;}
  .pBox.turn{border-color:var(--green); box-shadow:0 0 0 3px var(--green-l);}
  .vsBox{align-self:center; font-weight:900; color:var(--muted); font-size:14px; text-align:center;}
  .tbBanner{background:#fff6dd; border:1px solid #e8c95a; color:#7a5b00; font-weight:800; text-align:center; border-radius:12px; padding:9px 12px; margin-bottom:14px; font-size:15px;}
  /* postcard */
  .postcard{position:relative; background:var(--cream); border-radius:10px; padding:8px; margin-bottom:16px; box-shadow:0 4px 16px rgba(10,31,51,.12);
    background-image:repeating-linear-gradient(45deg,#d64545 0 14px,#fff 14px 28px,#3a6bc5 28px 42px,#fff 42px 56px);}
  .postcardIn{background:var(--cream); border:1.5px dashed #c9b98a; border-radius:6px; padding:20px 18px 22px; position:relative; min-height:270px;}
  .stamp{position:absolute; top:12px; right:12px; width:104px; background:#fff; border:2px dashed #b9c6b9; padding:6px 4px 5px; text-align:center; transform:rotate(3deg);}
  .stamp .ball{font-size:22px; line-height:1;}
  .stamp .cat{font-size:10.5px; font-weight:800; letter-spacing:.4px; color:var(--green-d); text-transform:uppercase; margin-top:3px; line-height:1.25;}
  .postmark{position:absolute; top:26px; right:96px; width:74px; height:74px; border:2.5px solid rgba(90,110,140,.45); border-radius:50%; color:rgba(90,110,140,.65); font-size:8.5px; font-weight:700; text-align:center; padding-top:16px; transform:rotate(-12deg); line-height:1.5; pointer-events:none;}
  .pcFrom{font-size:12.5px; color:var(--muted); letter-spacing:.6px; font-weight:700; text-transform:uppercase;}
  .pcTo{font-size:19px; font-weight:800; color:var(--navy); margin:2px 0 10px;}
  .pcDesc{font-size:17.5px; line-height:1.55; margin:0 118px 4px 0; min-height:110px;}
  @media(max-width:520px){.pcDesc{margin-right:0; margin-top:64px; min-height:0;}}
  .pcFooter{margin-top:12px; font-size:12.5px; color:#a08c4f; font-weight:700; letter-spacing:.5px;}
  .ansBtn{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:2px solid var(--border); border-radius:14px; padding:14px; margin-bottom:10px; cursor:pointer; font-family:inherit; font-size:16.5px; font-weight:600; color:var(--text); min-height:58px;}
  .ansBtn:hover{border-color:var(--green);}
  .ansBtn:disabled{cursor:default; opacity:.85;}
  .ansBtn .letter{background:var(--navy); color:#fff; font-weight:800; border-radius:50%; width:28px; height:28px; line-height:28px; text-align:center; flex:none; font-size:15px;}
  .ansBtn.right{background:var(--green-l); border-color:var(--green);}
  .ansBtn.right .letter{background:var(--green-d);}
  .ansBtn.wrong{background:var(--red-l); border-color:var(--red);}
  .ansBtn.wrong .letter{background:var(--red);}
  .factBox{border-radius:14px; padding:14px 16px; font-size:15.5px; margin:4px 0 12px; display:none;}
  .factBox.good{background:var(--green-l); border:1px solid var(--green); display:block;}
  .factBox.bad{background:var(--red-l); border:1px solid var(--red); display:block;}
  .factBox .verdict{font-weight:900; font-size:17px; display:block; margin-bottom:3px;}
  .passCard{text-align:center; padding:34px 22px;}
  .passCard .big{font-size:24px; font-weight:900; color:var(--navy); margin:6px 0 4px;}
  .passCard p{color:var(--muted); margin:0 0 6px;}
  /* trophy ceremony */
  .winCard{text-align:center; background:linear-gradient(180deg,#fffbe8,#fff3c4); border:2px solid var(--gold); }
  .winCard h2{color:var(--gold-d); font-size:26px; margin-bottom:2px;}
  .trophySvg{width:210px; max-width:60vw; height:auto; margin:8px auto 2px; display:block;}
  .engrave{background:linear-gradient(180deg,#f7d774,#e8b93b); border:2px solid var(--gold-d); border-radius:10px; display:inline-block; padding:10px 26px; margin:10px 0 4px; box-shadow:inset 0 1px 0 #fff8, 0 3px 8px rgba(0,0,0,.15);}
  .engrave .wName{font-size:24px; font-weight:900; color:#5e4300; letter-spacing:.5px;}
  .engrave .wSub{font-size:11.5px; font-weight:800; color:#7a5b00; letter-spacing:2px; text-transform:uppercase;}
  .trophyName{font-size:18px; font-weight:800; color:var(--navy); margin-top:8px;}
  .trophyNote{color:var(--muted); font-size:14.5px; margin:4px auto 0; max-width:440px;}
  .finalScore{font-size:17px; font-weight:800; color:var(--navy); margin-top:14px;}
  .stars{font-size:20px; letter-spacing:6px; margin-top:6px;}
  [hidden]{display:none !important;}