:root{
    --snow:#f6fbff; --ice:#bfe6ff;
    --red:#e63946; --red-deep:#c1272d;
    --green:#2e8b57; --green-deep:#176043;
    --gold:#ffce3a; --turq:#18b6b6;
    --wood:#7c5236;
    --wood-dark:#4b2814; --wood-mid:#8b5328; --wood-light:#c48345;
    --night:#0e3b52;
    --ink:#10242e;
    --whimsy:'Chewy', 'Baloo 2', system-ui, sans-serif;
    --display:'Lilita One', 'Baloo 2', system-ui, sans-serif;
    --body:'Fredoka', system-ui, sans-serif;
    --modal-open-dur:250ms;
    --modal-close-dur:150ms;
    --modal-scale:.965;
    --modal-scale-close:.965;
    --modal-ease:cubic-bezier(0.22, 1, 0.36, 1);
    --panel-open-dur:380ms;
    --panel-translate-y:18px;
    --panel-blur:2px;
    --course-bg:url("https://redopage.com/files/bgpkdcs6/ffc-golf/1782526962075-hole-01-porch-blue-flowers-v1.webp");
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{ margin:0; height:100%; }
  body{
    font-family:var(--body); color:var(--snow);
    background:
      radial-gradient(120% 90% at 50% 20%, rgba(11,19,34,.06), rgba(11,19,34,.62)),
      var(--course-bg) center/cover no-repeat,
      #1d120c;
    overflow:hidden; touch-action:none; user-select:none;
  }
  #app{ position:fixed; inset:0; display:flex; flex-direction:column; }

  /* ---------- Top HUD ---------- */
  #hud{
    position:absolute; left:12px; right:12px; top:10px; z-index:6; display:flex; align-items:flex-start; gap:10px; padding:0;
    background:transparent; pointer-events:none;
  }
  .hud-hole{
    position:relative; display:flex; flex-direction:column; line-height:1; min-width:0; max-width:min(510px,48vw);
    padding:12px 19px 13px; border-radius:14px; pointer-events:auto;
    background:
      linear-gradient(180deg,rgba(255,244,202,.18),rgba(35,17,8,.38)),
      linear-gradient(90deg, rgba(82,38,14,.28) 0 8px, transparent 8px 20px),
      var(--course-bg) center 54%/cover no-repeat,
      linear-gradient(180deg,#a76834,#6e391a 62%,#4b2410);
    border:3px solid #2f1609;
    box-shadow:0 10px 20px rgba(0,0,0,.34), inset 0 2px 0 rgba(255,238,184,.32), inset 0 -5px 0 rgba(0,0,0,.26);
  }
  .hud-hole::after{
    content:""; position:absolute; left:16px; right:16px; top:-8px; height:14px; pointer-events:none;
    background:
      radial-gradient(circle, #ff4439 0 3px, transparent 4px) 0 3px/48px 11px repeat-x,
      radial-gradient(circle, #ffce3a 0 3px, transparent 4px) 12px 3px/48px 11px repeat-x,
      radial-gradient(circle, #42d65d 0 3px, transparent 4px) 24px 3px/48px 11px repeat-x,
      radial-gradient(circle, #3bc2ff 0 3px, transparent 4px) 36px 3px/48px 11px repeat-x;
    filter:drop-shadow(0 0 5px rgba(255,227,120,.75));
  }
  .hud-hole .eyebrow{ font-family:var(--display); font-weight:700; letter-spacing:.16em; font-size:10px; text-transform:uppercase; color:var(--gold); }
  .hud-hole .name{ font-family:var(--display); font-weight:800; font-size:clamp(15px,3.4vw,23px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 0 rgba(0,0,0,.45); color:#fff7dc; }
  .hud-stats{ margin-left:auto; display:flex; gap:7px; }
  .chip{
    min-width:74px; font-family:var(--display); font-weight:700;
    background:url("https://redopage.com/files/bgpkdcs6/ffc-golf/1782508694571-button-candy-snow-plate-v2.webp") center/100% 100% no-repeat;
    border:0; border-radius:16px; padding:10px 14px 9px; text-align:center; line-height:1; pointer-events:auto;
    box-shadow:0 8px 13px rgba(45,20,8,.38), 0 2px 0 rgba(255,255,255,.22) inset;
  }
  .chip small{ display:block; font-size:8.5px; letter-spacing:.14em; color:#40200d; font-weight:800; text-transform:uppercase; margin-bottom:3px;}
  .chip b{ font-size:19px; color:#13364a; text-shadow:0 1px 0 rgba(255,255,255,.45); }
  .chip.par b{ color:var(--ice); } .chip.tot b{ color:var(--gold); }
  .chip.keep b{ color:#13364a; }
  .iconbtn{
    width:50px; height:46px; border-radius:13px; border:0;
    background:url("https://redopage.com/files/bgpkdcs6/ffc-golf/1782508694571-button-candy-snow-plate-v2.webp") center/100% 100% no-repeat; color:#14354a; font-family:var(--display); font-size:11px; letter-spacing:.08em; cursor:pointer; display:grid; place-items:center; pointer-events:auto;
    box-shadow:0 8px 13px rgba(45,20,8,.34);
    opacity:.86;
    text-shadow:0 1px 0 rgba(255,255,255,.45);
  }
  .iconbtn:hover{ opacity:1; }
  .iconbtn:active{ transform:translateY(1px); }
  .iconbtn.on{
    background:
      linear-gradient(180deg,rgba(255,206,58,.34),rgba(255,206,58,.10)),
      url("https://redopage.com/files/bgpkdcs6/ffc-golf/1782508694571-button-candy-snow-plate-v2.webp") center/100% 100% no-repeat;
    color:var(--ink); filter:saturate(1.1) brightness(1.05);
  }
  #editBtn{ display:none; }

  /* ---------- Stage ---------- */
  #stage{ position:relative; flex:1; min-height:0; }
  canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  /* ---------- Bottom clue ribbon ---------- */
  #clue{
    position:absolute; left:0; right:0; bottom:0; z-index:5; pointer-events:none;
    display:none;
    min-height:clamp(66px, 10vh, 96px);
    text-align:center; padding:18px 16px 12px; font-family:var(--display); font-weight:700; font-size:13px;
    color:rgba(246,251,255,.95); text-shadow:0 2px 6px rgba(0,0,0,.6);
    background:transparent;
  }
  #clue::before{
    content:none;
  }
  #clue .ribbon-title{
    position:absolute; z-index:1; left:50%; top:0; transform:translateX(-50%);
    font-family:var(--display); font-weight:800; letter-spacing:.16em; font-size:10px;
    color:#ffe9a1; text-transform:uppercase; white-space:nowrap;
    text-shadow:0 2px 6px rgba(0,0,0,.75);
  }
  #clue .clue-copy{
    position:relative; z-index:1; display:inline-block; max-width:min(760px,84vw);
    padding:12px 18px 10px; border-radius:14px;
    color:#fff9df;
    background:
      linear-gradient(90deg, rgba(58,30,12,.22) 0 8px, transparent 8px 20px),
      linear-gradient(180deg, #9b5b2e 0%, #6f3a1c 58%, #4d2814 100%);
    border:3px solid #2d160a;
    box-shadow:0 10px 24px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,226,160,.32), inset 0 -4px 0 rgba(0,0,0,.22);
    text-shadow:0 2px 0 rgba(45,22,10,.65);
    animation:panelReveal var(--panel-open-dur) var(--modal-ease) both;
  }
  #clue .clue-copy::before{
    content:""; position:absolute; left:14px; right:14px; top:-12px; height:18px; pointer-events:none;
    background:
      radial-gradient(circle, #ff4439 0 4px, transparent 5px) 0 4px/64px 14px repeat-x,
      radial-gradient(circle, #ffce3a 0 4px, transparent 5px) 16px 4px/64px 14px repeat-x,
      radial-gradient(circle, #42d65d 0 4px, transparent 5px) 32px 4px/64px 14px repeat-x,
      radial-gradient(circle, #3bc2ff 0 4px, transparent 5px) 48px 4px/64px 14px repeat-x;
    filter:drop-shadow(0 0 6px rgba(255,227,120,.75));
  }
  #clue .tag{ color:var(--gold); font-weight:800; letter-spacing:.08em; }
  #clue b{ color:var(--gold); }

  /* ---------- Overlays ---------- */
  .overlay{ position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:18px;
    background:radial-gradient(120% 120% at 50% 0%, rgba(10,26,44,.74), rgba(3,9,18,.93)); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--modal-close-dur) var(--modal-ease), visibility 0s linear var(--modal-close-dur);
    will-change:opacity; }
  .overlay.show{ opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity var(--modal-open-dur) var(--modal-ease), visibility 0s; }
  .overlay.is-closing{ opacity:0; visibility:visible; pointer-events:none;
    transition:opacity var(--modal-close-dur) var(--modal-ease), visibility 0s linear var(--modal-close-dur); }
  .card{ position:relative; width:min(920px,96vw,calc(95vh * 1.5)); aspect-ratio:3 / 2; overflow:hidden;
    background:url("https://redopage.com/files/bgpkdcs6/ffc-golf/1782508695240-frostys-facade-splash-alpha-v1.webp") center/contain no-repeat;
    border:0; border-radius:18px;
    padding:0;
    filter:drop-shadow(0 30px 46px rgba(0,0,0,.66));
    scrollbar-width:thin;
    container-type:inline-size;
    display:block;
    text-align:center; color:#432512; text-shadow:none;
    transform:translateY(10px) scale(var(--modal-scale));
    opacity:0;
    transition:transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease);
    will-change:transform, opacity; }
  .overlay.show .card{ transform:translateY(0) scale(1); opacity:1;
    transition:transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease); }
  .overlay.is-closing .card{ transform:translateY(8px) scale(var(--modal-scale-close)); opacity:0; }
  .card::before{ content:none; }
  #titleOverlay .card{
    width:min(1060px,96vw,calc(95vh * 4 / 3));
    aspect-ratio:4 / 3;
    background:url("https://redopage.com/files/bgpkdcs6/ffc-golf/1782508696025-frostys-title-sign-blank-v1.webp") center/contain no-repeat;
  }
  .board-content{
    position:absolute; z-index:1; left:13.2%; right:13.2%; top:44.2%; bottom:10.3%;
    display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  }
  .title-content{ top:53%; bottom:12.8%; justify-content:flex-start; padding-top:clamp(6px,1.8cqw,15px); }
  #titleOverlay .title-content{
    left:17.2%; right:17.2%; top:34.5%; bottom:7%;
    align-items:center; justify-content:flex-start; padding:0;
  }
  .result-content{ left:11%; right:11%; top:51.8%; bottom:4.2%; justify-content:flex-start; gap:clamp(7px,1.08cqw,13px); }
  #finalOverlay .card{ overflow:hidden; }
  #finalOverlay .board-content{ justify-content:flex-start; overflow:hidden; padding-right:0; }
  .final-content{ top:47%; bottom:8.5%; gap:0; }
  .title{ font-family:var(--whimsy); font-weight:400; line-height:.88; font-size:clamp(27px,4.05vw,47px); white-space:nowrap;
    width:100%; max-width:100%; overflow:visible;
    color:#c1272d; text-shadow:0 2px 0 #fff7e3, 0 5px 0 #123d78, 0 8px 14px rgba(88,41,12,.20); }
  .title .l1{ color:#c1272d; } .title .l2{ color:#174ea6; display:inline; font-size:1em; margin-left:.13em; text-shadow:0 2px 0 #fff7e3, 0 5px 0 #e0a72d;}
  #titleOverlay .title{
    margin:0 auto;
    width:min(94%, 700px);
    max-width:700px;
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(34px,7.6cqw,84px);
    line-height:.74;
    letter-spacing:0;
    text-transform:none;
    transform:none;
    text-shadow:
      0 2px 0 #fff7e3,
      0 5px 0 #123d78,
      0 8px 0 #09274e,
      0 12px 18px rgba(74,35,12,.28);
  }
  #titleOverlay .title-logo{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 7px 8px rgba(22,21,21,.22));
  }
  #titleOverlay .title .l1{ display:block; color:#d82625; }
  #titleOverlay .title .l2{ display:block; margin:0; color:#1758b7; font-size:.64em; text-shadow:0 2px 0 #fff7e3, 0 4px 0 #e0a72d, 0 7px 0 #09274e; }
  .tagline{ margin:clamp(5px,.9cqw,9px) auto 4px; max-width:620px; font-weight:800; font-size:clamp(12px,1.45cqw,16px); line-height:1.14; color:#4b301a; text-shadow:0 1px 0 rgba(255,255,255,.72); }
  #titleOverlay .tagline{
    max-width:76%;
    margin:clamp(5px,.75cqw,9px) auto 0;
    font-size:clamp(11px,1.5cqw,16px);
    line-height:1.14;
  }
  .rule{ display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0 5px; opacity:.95;
    font-family:var(--display); font-weight:800; letter-spacing:.20em; font-size:10.5px; color:#b3312c; }
  .rule::before,.rule::after{ content:""; height:2px; flex:1; max-width:100px; background:linear-gradient(90deg,transparent,#bd7f26); border-radius:2px;}
  .rule::before{ background:linear-gradient(90deg,#bd7f26,transparent); }
  .howto{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 2px; text-align:left;}
  .howto .row{ background:rgba(255,250,224,.58); border:2px solid rgba(116,72,28,.28); border-radius:10px; padding:8px 11px; font-size:11.5px; line-height:1.25; font-weight:800;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 3px 0 rgba(109,63,21,.16); color:#4a2a13; }
  .howto .row b{ color:#bd2d2e; display:block; font-family:var(--whimsy); font-weight:400; font-size:15px; margin-bottom:1px; text-shadow:0 1px 0 rgba(255,255,255,.75);}
  .play-btn{ position:relative; isolation:isolate; margin-top:11px; font-family:var(--whimsy); font-weight:400; font-size:23px; color:#17364a;
    display:inline-grid; place-items:center; border:0; border-radius:18px; padding:13px 38px; cursor:pointer;
    background:url("https://redopage.com/files/bgpkdcs6/ffc-golf/1782508694571-button-candy-snow-plate-v2.webp") center/100% 100% no-repeat; box-shadow:none; text-shadow:0 1px 0 rgba(255,255,255,.62); white-space:nowrap; }
  .play-btn::before{
    content:none;
  }
  .board-content > .play-btn{ align-self:center; min-width:164px; }
  .title-content .howto{ grid-template-columns:repeat(2,minmax(0,230px)); justify-content:center; margin:6px auto 0; }
  .title-content .howto{ display:none; }
  .title-content .rule{ display:none; }
  .title-content .howto .row{ padding:6px 9px; font-size:10.5px; background:rgba(255,250,224,.42); }
  .title-content .howto .row b{ font-size:14px; }
  .title-content > .play-btn{ margin-top:clamp(5px,.9cqw,9px); padding:8px 40px 9px; min-width:172px; }
  #titleOverlay .title-content > .play-btn{
    width:clamp(280px,45.5cqw,520px);
    aspect-ratio:612 / 190;
    margin-top:auto;
    padding:clamp(10px,2.4cqw,26px) 4.5% 0;
    background:none;
    min-width:0;
    line-height:1;
    text-align:center;
    font-size:clamp(24px,3.8cqw,42px);
  }
  html.redo-sideways #titleOverlay .title-content > .play-btn{
    padding:0 4.5%;
  }
  #titleOverlay .title-content > .play-btn::before{ inset:0; }
  .play-btn:active{ transform:translateY(1px); }
  .play-btn.alt{ color:#17364a; }
  .btnrow{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .result-content .btnrow{ gap:clamp(11px,2cqw,20px); margin-top:auto; }
  .result-content .play-btn{ width:clamp(218px,27cqw,304px); aspect-ratio:612 / 190; margin-top:0; padding:0 7%; font-size:clamp(21px,3.05cqw,31px); border-radius:14px; }

  /* riddle card */
  .riddle-art{ width:86px; height:86px; object-fit:contain; margin:0 auto 4px; display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
  .riddle-q{ font-family:var(--display); font-weight:800; font-size:18px; color:#442715; margin:6px 14px 2px; line-height:1.3; }
  .riddle-sub{ font-size:13px; color:#725035; margin:4px 0 2px; font-weight:800; }

  /* result */
  .result-head{ width:min(700px,91%); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(12px,2.4cqw,26px); }
  .result-copy{ min-width:0; text-align:left; }
  .result-banner{ font-family:var(--display); font-weight:800; font-size:clamp(34px,5.8cqw,56px); line-height:.9; margin:0; color:#c1272d; letter-spacing:.01em; white-space:nowrap; text-shadow:0 2px 0 #fff7e3, 0 4px 0 rgba(86,45,18,.72), 0 8px 12px rgba(86,45,18,.22);}
  .result-sub{ font-weight:800; font-size:clamp(12px,1.75cqw,17px); line-height:1.08; color:#4b301a; text-shadow:0 1px 0 rgba(255,255,255,.75); }
  .strokebig{ font-family:var(--display); font-weight:800; font-size:clamp(52px,7.7cqw,72px); line-height:.82; margin:0; color:#174ea6; text-shadow:0 2px 0 #fff7e3, 0 5px 0 #e0a72d; display:flex; align-items:flex-end; gap:8px; white-space:nowrap;}
  .strokebig small{ font-family:var(--body); font-size:clamp(16px,2cqw,21px); line-height:1.08; color:#523316; font-weight:800; padding-bottom:4px;}
  .found-row{ display:flex; align-items:center; justify-content:center; gap:clamp(15px,2.3cqw,24px); margin:0 auto; width:min(680px,90%); min-height:clamp(78px,10.6cqw,102px); padding:clamp(10px,1.55cqw,16px) clamp(18px,2.8cqw,28px); border-radius:17px;
    background:rgba(255,250,224,.58); border:2px solid rgba(116,72,28,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.36); }
  .found-row.is-open{ animation:panelReveal var(--panel-open-dur) var(--modal-ease) both; }
  .found-row img{ width:clamp(64px,8.4cqw,88px); height:clamp(64px,8.4cqw,88px); object-fit:contain; filter:drop-shadow(0 7px 12px rgba(0,0,0,.48)); }
  .found-row .ftxt{ text-align:left; min-width:0; }
  .found-row .ftxt b{ color:var(--gold); font-family:var(--display); font-size:clamp(26px,3.35cqw,36px); line-height:1; display:block; }
  .found-row .ftxt span{ display:block; font-size:clamp(13px,1.65cqw,17px); line-height:1.12; color:#523316; max-width:560px; font-weight:800; }

  /* tables / collection */
  table{ width:100%; border-collapse:collapse; margin:12px 0 6px; font-weight:600;}
  th,td{ padding:6px 5px; font-size:12.5px; border-bottom:1px solid rgba(255,255,255,.12); }
  th{ font-family:var(--display); color:var(--gold); text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;}
  td.num{ text-align:center; font-family:var(--display); font-weight:700;}
  tr.total td{ border-top:2px solid rgba(255,255,255,.3); border-bottom:none; font-family:var(--display); font-weight:800; font-size:14px; padding-top:9px;}
  .vs-par{ font-family:var(--display); font-weight:800; } .under{ color:#8ef5b0; } .over{ color:#ff9d8a; } .even{ color:var(--ice); }
  .collect{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:12px 0 4px; }
  .collect .slot{ aspect-ratio:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; display:grid; place-items:center; padding:6px; }
  .collect .slot img{ width:100%; height:100%; object-fit:contain; }
  .collect .slot.miss img{ filter:grayscale(1) brightness(.4); opacity:.5; }
  .final-layout{ width:min(760px,94%); margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:clamp(7px,1.15cqw,11px); }
  .final-summary{ max-width:700px; margin:clamp(5px,.9cqw,8px) auto 0; color:#4b301a; font-weight:800; font-size:clamp(12px,1.7cqw,15px); line-height:1.12; text-align:center; text-shadow:0 1px 0 rgba(255,255,255,.75); }
  .final-content .collect{ grid-template-columns:repeat(8,clamp(34px,4.9cqw,48px)); grid-auto-rows:clamp(34px,4.9cqw,48px); justify-content:center; align-items:center; gap:clamp(6px,1cqw,10px); margin:0; }
  .final-content .collect .slot{ width:clamp(32px,4.75cqw,46px); height:clamp(32px,4.75cqw,46px); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; display:grid; place-items:center; overflow:visible; }
  .final-content .collect .slot img{ width:100%; height:100%; object-fit:contain; transform:scale(var(--icon-scale,.96)); filter:drop-shadow(0 5px 7px rgba(70,38,12,.38)); }
  .final-content .collect .slot[data-sprite="norway-flag"]{ --icon-scale:1; }
  .final-content .collect .slot[data-sprite="compass"]{ --icon-scale:.96; }
  .final-content .collect .slot[data-sprite="light-bulb"]{ --icon-scale:1; }
  .final-content .collect .slot[data-sprite="cookie-tin"]{ --icon-scale:1.04; }
  .final-content .collect .slot[data-sprite="painted-ribbon"]{ --icon-scale:.98; }
  .final-content .collect .slot[data-sprite="reindeer-bell"]{ --icon-scale:.98; }
  .final-content .collect .slot[data-sprite="cast-iron-pan"]{ --icon-scale:.98; }
  .final-content .collect .slot[data-sprite="star"]{ --icon-scale:1.02; }
  .final-content .collect .slot.miss img{ filter:grayscale(1) brightness(.65) opacity(.48) drop-shadow(0 3px 5px rgba(70,38,12,.22)); opacity:1; }
  .final-content table{ display:none; }
  .final-content .play-btn{ align-self:center; width:clamp(220px,25cqw,280px); aspect-ratio:612 / 190; margin-top:0; padding:0 7%; font-size:clamp(21px,2.55cqw,27px); }
  .final-content .play-btn::before{ inset:0; }


  /* toast */
  #toast{ position:absolute; left:50%; top:12px; transform:translateX(-50%) translateY(-20px); z-index:8; pointer-events:none; opacity:0; transition:.25s;
    font-family:var(--display); font-weight:800; font-size:16px; color:var(--night);
    background:linear-gradient(180deg,#fff,#ffe9a8); padding:7px 16px; border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,.45); white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis; }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- Editor ---------- */
  #editor{ position:absolute; left:8px; top:8px; z-index:9; width:172px; display:none;
    background:rgba(8,18,30,.92); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:9px; font-size:12px; }
  #editor.show{ display:block; }
  #editor h4{ margin:2px 0 7px; font-family:var(--display); font-size:12px; color:var(--gold); letter-spacing:.04em; }
  .pal{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
  .pal button{ font-family:var(--body); font-weight:600; font-size:10.5px; padding:6px 3px; border-radius:9px; cursor:pointer;
    border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#dff; }
  .pal button.sel{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
  #editor .erow{ display:flex; gap:5px; margin-top:7px; }
  #editor .erow button{ flex:1; font-family:var(--display); font-weight:700; font-size:11px; padding:6px 4px; border-radius:9px; cursor:pointer; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; }
  #editor .ehint{ margin-top:7px; font-size:10px; line-height:1.35; color:#9fc0d6; }
  #editor .spr{ display:none; grid-template-columns:repeat(4,1fr); gap:3px; margin-top:6px; }
  #editor .spr.show{ display:grid; }
  #editor .spr button{ padding:2px; border-radius:7px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); cursor:pointer; }
  #editor .spr button.sel{ border-color:var(--gold); background:rgba(255,206,58,.25); }
  #editor .spr img{ width:100%; height:22px; object-fit:contain; }

  /* loading */
  #loading{ position:absolute; inset:0; z-index:30; display:grid; place-items:center; background:#0b1322; }
  #loading .lt{ font-family:var(--display); font-weight:800; color:var(--gold); font-size:20px; letter-spacing:.04em; }
  #loading .lb{ margin-top:12px; width:180px; height:8px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
  #loading .lb i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),#ffe48a); transition:width .2s; }
  @keyframes panelReveal{
    from{ transform:translateY(var(--panel-translate-y)); opacity:0; filter:blur(var(--panel-blur)); }
    to{ transform:translateY(0); opacity:1; filter:blur(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .overlay,.overlay .card,#clue .clue-copy,.found-row.is-open{ transition:none !important; animation:none !important; }
    .overlay .card{ transform:none !important; opacity:1 !important; }
  }

  @media (max-width:520px){
    #hud{ left:8px; right:8px; top:8px; gap:5px; }
    .hud-hole{ max-width:96px; padding:8px 10px 9px; border-width:2px; border-radius:12px; }
    .hud-hole .eyebrow{ font-size:8px; letter-spacing:.1em; }
    .hud-hole .name{ display:none; }
    .hud-stats{ gap:5px; }
	    .chip{ min-width:48px; padding:6px 6px 5px; border-width:2px; border-radius:12px; box-shadow:0 5px 10px rgba(45,20,8,.34), inset 0 2px 0 rgba(255,255,255,.28); }
    .chip small{ font-size:6.6px; letter-spacing:.09em; }
    .chip b{ font-size:15px; }
	    .iconbtn{ width:40px; height:40px; border-width:2px; border-radius:12px; font-size:16px; box-shadow:0 5px 10px rgba(45,20,8,.34), inset 0 2px 0 rgba(255,255,255,.28); }
    #editBtn{ display:none; }
    .card{ width:min(390px,96vw,calc(78vh * 1.5)); }
    .title-content{ top:53.5%; bottom:9.5%; justify-content:flex-start; padding-top:5px; }
    .title{ font-size:clamp(19px,6.7vw,26px); line-height:.86; }
    .title .l2{ font-size:1em; margin-left:.1em; }
    .title-content .tagline{ display:none; }
    .rule{ font-size:8.5px; letter-spacing:.16em; margin:5px 0 4px; }
    .play-btn{ font-size:18px; padding:7px 22px; border-radius:13px; }
    .title-content > .play-btn{ margin-top:4px; padding:5px 26px; min-width:148px; font-size:18px; border-width:2px; }
    .riddle-art{ width:56px; height:56px; }
    .riddle-q{ font-size:13px; margin:3px 4px 1px; }
    .riddle-sub{ font-size:10.5px; }
    .result-content{ left:10%; right:10%; top:50.2%; bottom:3.3%; gap:4px; }
    .result-head{ width:91%; grid-template-columns:minmax(0,1fr) auto; gap:6px; text-align:left; }
    .result-copy{ text-align:left; }
    .result-banner{ font-size:clamp(19px,5.9cqw,23px); white-space:nowrap; }
    .result-sub{ display:none; }
    .strokebig{ justify-content:flex-end; font-size:clamp(25px,7.6cqw,31px); gap:4px; }
    .strokebig small{ font-size:9px; padding-bottom:1px; }
    .found-row{ width:92%; min-height:40px; gap:8px; padding:5px 9px; border-radius:10px; }
    .found-row img{ width:32px; height:32px; }
    .found-row .ftxt b{ font-size:15px; }
    .found-row .ftxt span{ display:none; }
    .result-content .btnrow{ gap:7px; }
    .result-content .play-btn{ width:clamp(120px,34cqw,150px); font-size:14px; padding:0 12px; border-width:2px; }
    .final-content{ top:46%; bottom:7.5%; gap:4px; }
    .final-layout{ width:90%; gap:4px; }
    .final-summary{ display:block; max-width:100%; font-size:9px; line-height:1.05; }
    .final-content .collect{ grid-template-columns:repeat(8,18px); grid-auto-rows:18px; gap:3px; }
    .final-content .collect .slot{ width:18px; height:18px; }
    .final-content .play-btn{ align-self:center; font-size:15px; padding:5px 18px; border-width:2px; margin-top:0; }
    .collect{ grid-template-columns:repeat(5,1fr);}
  }

  @media (max-height:430px){
    #hud{ left:8px; right:8px; top:8px; gap:6px; }
    .hud-hole{ padding:8px 12px 9px; border-width:2px; border-radius:12px; max-width:260px; }
    .hud-hole .eyebrow{ font-size:8px; letter-spacing:.1em; }
    .hud-hole .name{ font-size:17px; }
    .hud-stats{ gap:5px; }
	    .chip{ min-width:58px; padding:5px 7px 4px; border-width:2px; border-radius:12px; box-shadow:0 5px 10px rgba(45,20,8,.34), inset 0 2px 0 rgba(255,255,255,.28); }
    .chip small{ font-size:6.5px; letter-spacing:.08em; }
    .chip b{ font-size:15px; }
	    .iconbtn{ width:38px; height:38px; border-width:2px; border-radius:11px; font-size:15px; box-shadow:0 5px 10px rgba(45,20,8,.34), inset 0 2px 0 rgba(255,255,255,.28); }
    #clue{ min-height:54px; padding:12px 10px 7px; font-size:11px; }
    #clue .ribbon-title{ font-size:8px; top:-2px; letter-spacing:.13em; }
    #clue .clue-copy{ max-width:min(560px,76vw); padding:8px 13px 7px; border-width:2px; border-radius:11px; }
    #clue .clue-copy::before{ top:-10px; height:14px; }
  }

  @media (max-height:240px){
    #finalOverlay .board-content{ top:42%; bottom:5.5%; }
    #finalOverlay .final-layout{ width:92%; gap:2px; }
    #finalOverlay .final-summary{ margin-top:0; font-size:8px; line-height:1; }
    #finalOverlay .collect{ grid-template-columns:repeat(8,15px); grid-auto-rows:15px; gap:2px; }
    #finalOverlay .collect .slot{ width:15px; height:15px; }
    #finalOverlay .play-btn{ width:150px; min-width:0; padding:0 16px; font-size:13px; line-height:1; }
  }

  @media (max-width:520px), (max-height:430px){
    #hud{
      left:auto; right:6px; top:6px; bottom:6px; width:64px;
      flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:5px;
    }
    .hud-hole{
      width:60px; min-height:56px; max-width:none; padding:8px 6px 7px;
      align-items:center; justify-content:center; text-align:center; border-radius:12px;
    }
    .hud-hole::after{ display:none; }
    .hud-hole .eyebrow{
      max-width:52px; white-space:normal; font-size:7.4px; line-height:1.04; letter-spacing:.04em;
    }
    .hud-hole .name{ display:none; }
    .hud-stats{ margin-left:0; flex-direction:column; align-items:flex-end; gap:5px; }
    .chip{
      width:60px; min-width:60px; min-height:49px; padding:8px 6px 7px;
      border-width:0; border-radius:12px; box-shadow:0 6px 10px rgba(45,20,8,.34);
    }
    .chip small{ font-size:6.7px; line-height:1; letter-spacing:.055em; margin-bottom:2px; white-space:normal; }
    .chip b{ font-size:16px; line-height:.95; }
    .iconbtn{
      width:54px; height:45px; border-width:0; border-radius:11px; font-size:11px;
      box-shadow:0 6px 10px rgba(45,20,8,.34);
    }
  }

  html.redo-sideways #hud{
    left:6px; right:6px; top:6px; bottom:auto; width:auto;
    flex-direction:row; align-items:flex-start; justify-content:flex-start; gap:5px;
  }
  html.redo-sideways .hud-hole{
    width:60px; min-height:49px; max-width:60px; padding:8px 6px 7px;
  }
  html.redo-sideways .hud-stats{ margin-left:auto; flex-direction:row; align-items:flex-start; gap:5px; }
  html.redo-sideways .chip{ width:60px; min-width:60px; min-height:49px; padding:8px 6px 7px; }
  html.redo-sideways .iconbtn{ width:54px; height:45px; }
  html.redo-sideways #finalOverlay .board-content{
    left:18.5%; right:18.5%; top:43%; bottom:13.5%;
    overflow:visible;
  }
  html.redo-sideways #finalOverlay .final-layout{
    width:100%; height:100%; justify-content:center; gap:6px;
  }
  html.redo-sideways #finalOverlay .final-summary{
    display:none;
  }
  html.redo-sideways #finalOverlay .collect{
    grid-template-columns:repeat(8,17px); grid-auto-rows:17px; gap:3px;
  }
  html.redo-sideways #finalOverlay .collect .slot{ width:17px; height:17px; }
  html.redo-sideways #finalOverlay .play-btn{
    width:154px; min-width:0; aspect-ratio:612 / 190;
    padding:0 18px; font-size:13px; line-height:1;
  }

/* Redo export patch: keep image-backed buttons above the overlay backdrop. */
.play-btn {
  background: url("https://redopage.com/files/bgpkdcs6/ffc-golf/1782508694571-button-candy-snow-plate-v2.webp") center/100% 100% no-repeat;
}

.play-btn::before {
  content: none;
}

#titleOverlay #startBtn {
  background: none;
}

#titleOverlay .title-logo {
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 700px) and (orientation: portrait) and (max-aspect-ratio: 4 / 5) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #app {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 100vh;
    height: 100vw;
    width: 100dvh;
    height: 100dvw;
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }
}