* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #14100c; color: #fff8e8;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

#hud { position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
  padding-top: max(6px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px;
  background: linear-gradient(#000a, #0000); z-index: 5; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hbtn { width: 42px; height: 42px; border-radius: 12px; border: 2px solid #fff3; background: #0008; color: #fff; font-size: 22px; cursor: pointer; }
.hinfo { flex: 1; min-width: 0; line-height: 1.1; }
#hHole { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
#hName { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hstat { text-align: center; min-width: 46px; line-height: 1.05; }
.hstat span { display: block; font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.hstat b { font-size: 20px; }

#banner { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.6); opacity: 0; z-index: 6; pointer-events: none;
  font-size: clamp(28px, 7vw, 64px); font-weight: 900; letter-spacing: .03em; text-align: center; white-space: nowrap;
  color: #ffd23f; text-shadow: 0 4px 0 #0008, 0 0 24px #000; transition: transform .25s cubic-bezier(.2,1.6,.4,1), opacity .25s; }
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner small { display: block; font-size: .38em; color: #fff; font-weight: 700; }
#hint { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none;
  background: #000a; padding: 8px 16px; border-radius: 99px; font-size: 14px; opacity: .9; white-space: nowrap; }

.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; overflow-y: auto; background: radial-gradient(ellipse at 50% 40%, #1e7a40ee, #0b2614f2 70%); touch-action: pan-y; }
.screen.glass { background: #000b; backdrop-filter: blur(4px); }
.logo { display: flex; flex-direction: column; align-items: center; line-height: .85; transform: rotate(-4deg); margin-bottom: 6px; }
.logo .l1 { font-size: clamp(48px, 13vw, 120px); font-weight: 900; color: #fff8e8; text-shadow: 0 6px 0 #7a4220, 0 12px 30px #000; letter-spacing: .02em; }
.logo .l2 { font-size: clamp(30px, 8vw, 72px); font-weight: 900; color: #ffd23f; text-shadow: 0 5px 0 #7a4220; letter-spacing: .3em; padding-left: .3em; }
.sub { margin: 0; font-size: 18px; opacity: .9; }
.foot { opacity: .6; font-size: 13px; margin-top: 18px; text-align: center; }
#iosHint { max-width: 320px; text-align: center; font-size: 14px; background: #0006; padding: 10px; border-radius: 10px; }
h2 { margin: 0 0 6px; font-size: 30px; }
button { font-family: inherit; }
.big { font-size: 22px; font-weight: 800; padding: 14px 44px; border-radius: 16px; border: 0; cursor: pointer; color: #2a1606;
  background: linear-gradient(#ffe27a, #f2a51a); box-shadow: 0 5px 0 #8a5300, 0 10px 20px #0006; }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a5300; }
.small { font-size: 16px; padding: 10px 20px; border-radius: 12px; border: 2px solid #fff4; background: #0006; color: #fff; cursor: pointer; }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }

#courseList { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.course { width: 250px; padding: 18px; border-radius: 18px; cursor: pointer; border: 3px solid #fff3; text-align: left; color: #fff; box-shadow: 0 10px 24px #0007; }
.course h3 { margin: 0 0 4px; font-size: 22px; }
.course p { margin: 0 0 10px; font-size: 14px; opacity: .85; }
.course .meta { font-size: 13px; opacity: .9; display: flex; justify-content: space-between; }
#holeGrid { display: grid; grid-template-columns: repeat(3, minmax(90px, 140px)); gap: 10px; }
.hcell { padding: 10px; border-radius: 12px; background: #0006; border: 2px solid #fff3; color: #fff; cursor: pointer; text-align: left; }
.hcell b { display: block; font-size: 13px; }
.hcell span { font-size: 12px; opacity: .8; }
.hcell .gem { color: #3df2ff; }
.result { font-size: clamp(40px, 10vw, 72px); font-weight: 900; color: #ffd23f; text-shadow: 0 5px 0 #0008; text-align: center; }
#cardDetail { font-size: 18px; text-align: center; line-height: 1.5; }
table { border-collapse: collapse; font-size: 15px; background: #0006; border-radius: 10px; overflow: hidden; }
td, th { padding: 6px 9px; text-align: center; border-bottom: 1px solid #fff2; }
th { font-size: 12px; opacity: .8; }
td.under { color: #7dff9a; font-weight: 700; } td.over { color: #ff9a7d; }
@media (max-width: 520px) { .hstat { min-width: 38px; } .hstat b { font-size: 17px; } #hName { font-size: 15px; } .hbtn { width: 38px; height: 38px; } }