.moles-experience { max-width: 1080px; color: #e9e8cb; --moles-time: 1; }
.moles-experience * { box-sizing: border-box; }
.moles-experience [hidden] { display: none !important; }
.moles-experience button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.moles-experience button:focus-visible, .moles-arena:focus-visible { outline: 2px solid #f5dc9a; outline-offset: 4px; }
.moles-experience button:disabled { cursor: default; }
.moles-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 23px; }
.moles-eyebrow { color: #bcc998; font-size: 9px; letter-spacing: .17em; }
.moles-eyebrow span { margin-left: 18px; color: #91a891; letter-spacing: .04em; }
.moles-heading h1 { margin: 13px 0 8px; font-size: clamp(30px, 4vw, 44px); font-weight: 500; letter-spacing: .07em; }
.moles-heading h1 > span { color: #dcc68b; }
.moles-heading h1:focus { outline: none; }
.moles-heading > div > p:last-child { font-size: 11px; line-height: 1.9; color: #9ab09f; margin: 0; max-width: 38em; }
.moles-modes { display: flex; flex-shrink: 0; padding: 4px; border-radius: 25px; border: 1px solid #cfdfad26; background: #1028256b; gap: 2px; }
.moles-modes button { min-height: 40px; padding: 9px 16px; border: 0; border-radius: 22px; background: none; color: #9eafa0; font-size: 11px; white-space: nowrap; }
.moles-modes button[aria-pressed="true"] { color: #f2e2b4; background: #d8d6a317; box-shadow: inset 0 0 0 1px #e4d39c2e; }
.moles-character-panel { margin: 0 0 18px; border: 1px solid #d1dbac25; border-radius: 13px; background: #102c251f; }
.moles-character-panel > summary { display: flex; align-items: center; gap: 13px; padding: 14px 17px; list-style: none; cursor: pointer; color: #d4d7b5; font-size: 11px; }
.moles-character-panel > summary::-webkit-details-marker { display: none; }
.moles-character-panel > summary > span { min-width: 0; flex: 1; overflow-wrap: anywhere; color: #90a78e; font-size: 10px; }
.moles-character-panel > summary > i { color: #c3c58d; font-style: normal; }
.moles-character-content { padding: 0 17px 17px; display: grid; gap: 13px; color: #a3b79c; font-size: 11px; line-height: 1.8; }
.moles-character-content p { margin: 0; overflow-wrap: anywhere; }
.moles-character-content b { color: #d4d8b5; font-weight: 500; }
.moles-character-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.moles-character-actions input { flex: 1; min-width: 180px; max-width: 100%; color: #aabd9f; font: 10px system-ui, sans-serif; }
.moles-character-actions input::file-selector-button, .moles-character-actions button { min-height: 40px; padding: 9px 12px; border: 1px solid #cbd4a53d; border-radius: 9px; color: #dce1bd; font: 10px system-ui, sans-serif; background: #d6ddb00a; cursor: pointer; }
.moles-character-actions input::file-selector-button { margin-right: 9px; }
.moles-character-actions button:disabled, .moles-character-actions input:disabled { opacity: .4; }
.moles-character-status { color: #c3c996; font-size: 10px; }
.moles-prompt-help { display: grid; gap: 8px; border-top: 1px solid #c8d5a51c; padding-top: 12px; }
.moles-prompt-help > span { color: #8fa68c; font-size: 10px; }
.moles-prompt-help > p { padding: 11px 13px; border-radius: 9px; background: #142d2873; color: #bac8a7; font: 11px/1.8 Georgia, serif; user-select: text; }
.moles-experience[data-character-preview="true"] .moles-cover { display: none !important; }
.moles-experience[data-character-preview="true"] .moles-life, .moles-experience[data-character-preview="true"] .moles-pop { display: none !important; }
.moles-preview-note { position: absolute; z-index: 2; top: 14px; left: 12px; right: 12px; text-align: center; color: #d6dfb7; font-size: 10px; pointer-events: none; }
.moles-board { overflow: hidden; border: 1px solid #d1d5a532; border-radius: 26px; background: #193d34; box-shadow: 0 22px 65px #051d1c2e; }
.moles-hud { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 15px; padding: 19px 29px 16px; background: #112f29c9; }
.moles-hud > div { display: flex; flex-direction: column; gap: 5px; }
.moles-hud span { color: #a6bba2; font-size: 10px; letter-spacing: .04em; }
.moles-hud strong { color: #f1e3b4; font: 29px Georgia, serif; font-variant-numeric: tabular-nums; line-height: 1.1; }
.moles-hud .moles-score strong { color: #ffdda0; font-size: 34px; }
.moles-hud .moles-clock { text-align: right; }
.moles-clock small { font: 10px system-ui, sans-serif; margin-left: 4px; color: #b7c5a6; }
.moles-progress { height: 3px; background: #0f2d273d; overflow: hidden; }
.moles-progress > i { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(var(--moles-time)); background: linear-gradient(90deg, #9bb77d, #ecd39a); }
.moles-arena { position: relative; isolation: isolate; height: clamp(400px, 51vw, 540px); overflow: hidden; user-select: none; background: radial-gradient(ellipse at 50% 65%, #8ca05e38, transparent 66%), radial-gradient(ellipse at 10% 0%, #d5be8429, transparent 44%), linear-gradient(160deg, #456750, #315744 55%, #24473b); outline-offset: -4px !important; }
.moles-arena::before { content: ""; position: absolute; width: 300px; height: 300px; border: 1px solid #dae0a713; border-radius: 50%; top: -135px; right: -100px; box-shadow: 0 0 0 48px #d2dc9f06, 0 0 0 97px #d2dc9f04; pointer-events: none; }
.moles-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.moles-meadow-mark { position: absolute; inset: auto 26px 20px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; color: #bed0a44f; font-size: 8px; letter-spacing: .22em; }
.moles-meadow-mark > i { font-style: normal; color: #e2d8a14f; font-size: 20px; }
.moles-holes { position: absolute; inset: 0; }
.moles-hole { position: absolute; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 28px; background: transparent; color: #eff1cc; outline-offset: 2px !important; }
.moles-hole:not(:disabled):hover { background: #d4e4ba0c; border-color: #e8ddae2b; }
.moles-hole:not(:disabled):active { background: #ffe1a61b; border-color: #ffe5af6b; }
.moles-hole-label { display: flex; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; gap: 5px; width: max-content; max-width: 110%; white-space: nowrap; pointer-events: none; }
.moles-hole kbd { display: grid; place-items: center; min-width: 24px; height: 22px; border: 1px solid #e1dfb63d; border-radius: 6px; background: #173d31d1; color: #f6e7b5; box-shadow: 0 2px 0 #132d24; font: 11px ui-monospace, monospace; }
.moles-kind { font-size: 10px; color: #d7dfb5; text-shadow: 0 1px 4px #183b29; }
.moles-hole[data-kind="empty"] .moles-kind { opacity: .52; font-size: 9px; }
.moles-hole[data-kind="friend"] .moles-kind { padding: 3px 6px; border-radius: 8px; background: #dce6b5; color: #35573a; text-shadow: none; font-weight: 650; }
.moles-hole[data-kind="shiny"] kbd { border-color: #efd28c; background: #67613be6; }
.moles-life { position: absolute; width: 52%; height: 2px; bottom: -7px; left: 24%; overflow: hidden; border-radius: 3px; background: #08251940; pointer-events: none; }
.moles-life > i { display: block; height: 100%; background: #d8d998; transform-origin: left; transform: scaleX(var(--moles-life, 0)); }
.moles-hole[data-kind="empty"] .moles-life, .moles-hole[data-kind="friend"] .moles-life { opacity: 0; }
.moles-pop { position: absolute; z-index: 2; left: 50%; top: 7%; transform: translate(-50%, -50%); color: #ffdf9a; font: 600 23px Georgia, "Songti SC", serif; text-shadow: 0 2px 6px #16372d; white-space: nowrap; pointer-events: none; }
.moles-pop[data-kind="armour"], .moles-pop[data-kind="friend"], .moles-pop[data-kind="empty"] { padding: 4px 7px; border-radius: 8px; background: #284a38df; font: 10px system-ui, sans-serif; }
.moles-pop[data-kind="friend"], .moles-pop[data-kind="empty"] { color: #f3c6ad; }
.moles-cover { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 24px; background: #183c31ec; backdrop-filter: blur(7px); }
.moles-cover-copy { display: flex; flex-direction: column; align-items: center; gap: 13px; width: min(330px, 100%); text-align: center; }
.moles-kicker { color: #c1c997; font-size: 8px; letter-spacing: .17em; }
.moles-cover h2 { margin: 0; color: #f2e7bf; font: 38px/1.24 "Songti SC", "STSong", Georgia, serif; letter-spacing: .045em; }
.moles-cover h2:focus { outline: none; }
.moles-cover p { margin: 0; color: #becbad; font-size: 11px; line-height: 1.85; max-width: 25em; }
.moles-intro { background: radial-gradient(ellipse at 50% 50%, #183b31d9, #183b317a 65%, #183b311a); backdrop-filter: none; }
.moles-intro .moles-cover-copy { padding: 21px; border-radius: 24px; background: #16382dde; border: 1px solid #d6d4a225; box-shadow: 0 15px 60px #10352433; backdrop-filter: blur(6px); }
.moles-primary { min-height: 46px; width: 100%; padding: 12px 23px; border: 1px solid #f4e1aa; border-radius: 13px; background: linear-gradient(120deg, #ecdfa8, #d5c98e); color: #324d37; font-size: 12px !important; font-weight: 650 !important; box-shadow: 0 4px 0 #8c98603b; }
.moles-primary:hover { filter: brightness(1.06); }
.moles-cover-tip { font-size: 8px; color: #91a88e; letter-spacing: .025em; white-space: nowrap; }
.moles-result h2 { font-size: 28px; }
.moles-result-score { font: 55px/1 Georgia, serif; color: #f5d69a; }
.moles-result-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 15px; padding: 8px 0; }
.moles-result-stats > span { display: flex; flex-direction: column; gap: 8px; color: #a2b997; font-size: 9px; }
.moles-result-stats b { color: #e1dfb2; font: 22px Georgia, serif; }
.moles-board-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 26px; border-top: 1px solid #d2dfa016; background: #123128a8; color: #b0c39f; font-size: 10px; }
.moles-board-foot > span:last-child { font-size: 8px; color: #879f87; letter-spacing: .08em; white-space: nowrap; }
.moles-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 17px 0 8px; }
.moles-legend > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 11px; row-gap: 5px; align-items: center; padding: 13px 14px; border: 1px solid #ced6a51b; border-radius: 12px; background: #bace9704; }
.moles-legend strong { font-size: 11px; font-weight: 500; color: #d6dabe; }
.moles-legend > div > span:last-child { grid-column: 2; color: #91a68c; font-size: 9px; white-space: nowrap; }
.moles-legend-icon { position: relative; grid-row: 1/3; width: 27px; height: 26px; border-radius: 50% 50% 35% 35%; background: linear-gradient(120deg, #d4ad7d, #9f7956); box-shadow: inset -3px -3px 3px #644d3833; }
.moles-legend-icon::before { content: ""; position: absolute; width: 3px; height: 4px; top: 10px; left: 8px; border-radius: 50%; background: #254135; box-shadow: 9px 0 #254135; }
.moles-legend [data-kind="helmet"] .moles-legend-icon::after { content: ""; position: absolute; top: -3px; left: -2px; width: 31px; height: 12px; border-bottom: 3px solid #acc5bc; border-radius: 12px 12px 3px 3px; background: #749d9f; }
.moles-legend [data-kind="shiny"] .moles-legend-icon { background: linear-gradient(120deg, #f1d089, #ce9b56); }
.moles-legend [data-kind="shiny"] .moles-legend-icon::after { content: ""; position: absolute; width: 15px; height: 15px; top: -11px; left: 6px; background: #e9d995; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 62%, 80% 100%, 50% 78%, 20% 100%, 30% 62%, 0 38%, 38% 35%); }
.moles-legend [data-kind="friend"] .moles-legend-icon { background: linear-gradient(120deg, #c0d298, #7da277); }
.moles-legend [data-kind="friend"] .moles-legend-icon::after { content: ""; position: absolute; top: -10px; left: 6px; width: 10px; height: 15px; border-radius: 2px 12px 2px 12px; background: #bdd18f; transform: rotate(-30deg); box-shadow: 9px 4px #91b37a; }
.moles-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 10px; }
.moles-status { flex: 1; min-height: 42px; margin: 0; padding: 11px 0; color: #a9bba0; font-size: 11px; line-height: 1.7; }
.moles-toolbar > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.moles-toolbar button, .moles-footer button { min-height: 42px; padding: 10px 12px; border: 0; border-radius: 9px; color: #c8d2b4; background: transparent; font-size: 11px; white-space: nowrap; }
.moles-toolbar button:hover:not(:disabled) { background: #d1dfaf0c; }
.moles-toolbar button:disabled { opacity: .4; }
.moles-toolbar [aria-pressed="true"] { color: #f1daa0; }
.moles-help { margin-top: 5px; color: #8fa58d; font-size: 11px; }
.moles-help summary { cursor: pointer; display: flex; align-items: center; gap: 30px; padding: 12px 0; width: fit-content; list-style: none; }
.moles-help summary::-webkit-details-marker { display: none; }
.moles-help summary > span { color: #c5c18e; }
.moles-help > div { display: grid; gap: 9px; padding: 7px 0 18px; max-width: 740px; line-height: 1.9; }
.moles-help p { margin: 0; }
.moles-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid #c7d7a817; padding-top: 16px; margin-top: 12px; font-size: 10px; color: #829a83; }
.moles-footer button { padding-right: 0; }
/* A complete native/CSS presentation remains available without a WebGL context. */
.moles-fallback-art { display: none; position: absolute; inset: 0; pointer-events: none; }
.moles-fallback .moles-fallback-art { display: block; }
.moles-css-ground { position: absolute; width: 85%; height: 24%; left: 7.5%; top: 61%; border-radius: 50%; background: radial-gradient(ellipse, #243a29 0 50%, #997855 53% 61%, #8caa6d 64%); box-shadow: 0 6px 0 #536e443b; }
.moles-css-body { position: absolute; width: 58%; height: 60%; left: 21%; bottom: 25%; border-radius: 48% 48% 38% 38%; background: radial-gradient(ellipse at 32% 25%, #dec49a, #b58c61 55%, #896544); box-shadow: inset -4px -4px 8px #4c392233; opacity: 1; }
.moles-hole[data-kind="empty"] .moles-css-body { opacity: 0; }
.moles-css-ear { position: absolute; width: 23%; height: 26%; top: -4%; border: 4px solid #b38d68; border-radius: 50%; background: #e4b7a1; z-index: -1; }
.moles-css-ear.left { left: -4%; }.moles-css-ear.right { right: -4%; }
.moles-css-eyes { position: absolute; width: 8%; height: 12%; left: 29%; top: 37%; border-radius: 50%; background: #233c32; box-shadow: 21px 0 #233c32; }
.moles-css-nose { position: absolute; width: 21%; height: 12%; left: 39.5%; top: 53%; background: #85554a; border-radius: 50%; box-shadow: -4px 6px 0 1px #ebd1ab, 4px 6px 0 1px #ebd1ab; }
.moles-css-teeth { position: absolute; width: 17%; height: 13%; top: 71%; left: 41.5%; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #fff0d1 47%, #bda485 48% 53%, #fff0d1 54%); }
.moles-css-hat, .moles-css-star, .moles-css-leaves { display: none; position: absolute; }
.moles-hole[data-kind="helmet"][data-hp="2"] .moles-css-hat { display: block; width: 120%; height: 37%; left: -10%; top: -9%; border-radius: 40px 40px 7px 7px; border-bottom: 5px solid #abc6c2; background: radial-gradient(ellipse at 35% 15%, #bad4d0, #6f999e); box-shadow: 0 3px 3px #243e3738; }
.moles-hole[data-kind="shiny"] .moles-css-body { background: radial-gradient(ellipse at 32% 25%, #ffe7a6, #d8ad61 60%, #b08247); }
.moles-hole[data-kind="shiny"] .moles-css-star { display: block; width: 41%; height: 42%; top: -33%; left: 30%; background: #ffe7a5; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 62%, 80% 100%, 50% 78%, 20% 100%, 30% 62%, 0 38%, 38% 35%); }
.moles-hole[data-kind="friend"] .moles-css-body { background: radial-gradient(ellipse at 32% 25%, #d4e0b1, #9ab57e 60%, #71925d); }
.moles-hole[data-kind="friend"] .moles-css-leaves { display: block; top: -33%; left: 29%; width: 23%; height: 36%; border-radius: 3px 20px 3px 20px; background: #d1df9b; transform: rotate(-30deg); box-shadow: 12px 5px #98bb76; }
@media (max-width: 760px) {
  .moles-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 17px; }
  .moles-heading h1 { font-size: 34px; }
  .moles-eyebrow span { margin-left: 10px; }
  .moles-hud { padding: 17px 20px; gap: 10px; }
  .moles-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moles-legend > div { padding: 13px; column-gap: 8px; }
  .moles-toolbar { flex-direction: column; gap: 0; }
  .moles-toolbar > div { align-self: flex-end; }
  .moles-status { min-height: 35px; }
  .moles-board-foot { padding: 12px 17px; }
}
@media (max-width: 480px) {
  .moles-eyebrow { font-size: 8px; }.moles-eyebrow span { display: block; margin: 7px 0 0; font-size: 10px; }
  .moles-heading h1 { font-size: 31px; margin-top: 11px; }
  .moles-heading > div > p:last-child { font-size: 10px; }
  .moles-modes { width: 100%; }.moles-modes button { flex: 1; min-height: 39px; padding: 8px 13px; }
  .moles-board { border-radius: 19px; }.moles-arena { height: 400px; }
  .moles-hud { padding: 16px 13px 14px; gap: 8px; }.moles-hud strong { font-size: 23px; }.moles-hud span { font-size: 9px; }
  .moles-hud .moles-score strong { font-size: 28px; }
  .moles-hole { border-radius: 18px; }.moles-hole-label { gap: 3px; }
  .moles-hole kbd { min-width: 19px; height: 19px; font-size: 10px; border-radius: 5px; }
  .moles-kind { font-size: 9px; }.moles-hole[data-kind="empty"] .moles-kind { font-size: 8px; }
  .moles-pop { font-size: 20px; }.moles-cover { padding: 20px; }
  .moles-cover h2 { font-size: 33px; }.moles-result h2 { font-size: 24px; }
  .moles-intro .moles-cover-copy { padding: 20px 16px; }
  .moles-cover-copy { gap: 12px; }.moles-cover p { font-size: 10px; }
  .moles-result-score { font-size: 48px; }.moles-result-stats { gap: 8px; }
  .moles-board-foot { padding: 12px; font-size: 9px; }.moles-board-foot > span:last-child { font-size: 7px; letter-spacing: 0; }
  .moles-meadow-mark { left: 18px; right: 18px; font-size: 7px; }
  .moles-legend > div { padding: 12px 9px; column-gap: 6px; }
  .moles-legend strong { font-size: 10px; }.moles-legend > div > span:last-child { font-size: 9px; }
  .moles-toolbar button { padding: 10px; font-size: 10px; }
  .moles-footer { align-items: flex-start; }.moles-footer > span { max-width: 14em; line-height: 1.8; padding-top: 9px; font-size: 9px; }
  .moles-css-eyes { box-shadow: 15px 0 #233c32; }
  .moles-character-panel > summary { gap: 9px; padding: 12px; }
  .moles-character-content { padding: 0 12px 13px; font-size: 10px; }
  .moles-character-actions input { flex-basis: 100%; min-width: 0; }
  .moles-preview-note { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .moles-experience *, .moles-experience *::before, .moles-experience *::after { animation: none !important; transition: none !important; }
}