:root{font-family:Inter,"Helvetica Neue","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#252e2a;background:#eeede6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid #768844;outline-offset:4px}.shell{max-width:620px;margin:auto;padding:24px 24px 16px}header{display:flex;align-items:center;gap:20px;height:52px}.logo{font-size:45px;letter-spacing:-4px;font-weight:800;text-decoration:none;color:inherit;line-height:1}.logo span{font-size:10px;letter-spacing:0;color:#e37e62;margin-left:7px}.tagline{font-size:11px;letter-spacing:.1em;flex:1;color:#6c746c}.icon-button{border:1px solid #c9ccc0;border-radius:50%;background:transparent;width:34px;height:34px;color:#465244;font-weight:700}.stats{display:flex;align-items:flex-end;padding:29px 4px 20px;gap:45px}.label{display:block;font-size:9px;font-weight:700;letter-spacing:.2em;color:#7a8277;margin-bottom:5px}.stats strong{font-size:35px;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}.stats .time strong,.stats .best strong{font-size:24px}.best{margin-left:auto;text-align:right}.arena{position:relative;width:100%;height:min(62vh,570px);min-height:320px;background:#dce0d0;border:1px solid #cbd0bd;border-radius:12px;overflow:hidden;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}.arena-label{position:absolute;left:21px;top:19px;display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.18em;color:#6a765d;pointer-events:none}.live-dot{width:5px;height:5px;background:#6d8253;border-radius:50%}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#dce0d0ed;text-align:center;padding:30px 20px}.overlay[hidden]{display:none}.intro-mark{color:#61764c;font-size:70px;line-height:1;margin-bottom:14px}.eyebrow{font-size:8px;font-weight:700;letter-spacing:.18em;color:#758265}h1{font-size:clamp(32px,7vw,46px);letter-spacing:.04em;line-height:1.4;margin:12px 0 16px}#message{font-size:12px;line-height:2.1;color:#68745f;margin:0 0 25px}.primary{border:0;border-radius:40px;background:#293c2b;color:#f5f5dc;padding:15px 26px;min-width:190px;display:flex;align-items:center;justify-content:space-between;font-size:13px}.primary span{font-size:22px;color:#cadb91}.text-button{border:0;background:none;color:#65765a;font-size:11px;padding:15px}footer{padding:20px 4px 0}.hint{display:flex;align-items:center;gap:14px}.finger{font-size:30px;color:#7a8962}.hint p{font-size:11px;line-height:1.9;flex:1;margin:0}.hint b{font-weight:600}.hint p span{font-size:10px;color:#7b8275}.legend{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #d9dbd1;padding-top:16px;margin-top:20px;font-size:9px;color:#7b8275}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;display:inline-block}.star-dot{background:#a1aa48;transform:rotate(45deg)}.hole-dot{background:#596553;border-radius:50%}.enemy-dot{background:#ce765c;border-radius:50%}dialog{border:1px solid #cbd0bd;border-radius:18px;background:#f2f1e9;color:#303c2c;padding:32px;max-width:440px;width:calc(100% - 32px)}dialog::backdrop{background:#1e2c2488;backdrop-filter:blur(4px)}dialog p{font-size:12px;line-height:1.9;color:#68745f}dialog h2{font-size:23px}dialog .close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:25px;color:#68745f}dialog label{display:block;font-size:12px;margin-top:20px}output{float:right}input[type=range]{width:100%;accent-color:#61764c;margin-top:12px}.check{display:flex;align-items:center;gap:8px}.small{font-size:10px!important}@media(min-width:900px){.shell{max-width:650px;padding-top:30px}.arena{height:570px}}@media(max-height:740px){.shell{padding-top:12px}.stats{padding-top:16px;padding-bottom:12px}.arena{height:57vh}footer{padding-top:12px}.legend{margin-top:12px;padding-top:12px}.intro-mark{font-size:45px;margin-bottom:0}h1{margin:5px 0 10px}#message{margin-bottom:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* The arena surrounds the solid board with the space seen through holes. */
.arena{background:#0a1018;border-color:#283342}.arena-label{color:#a8b8c8}.live-dot{background:#b6c795}

.loop-count{position:absolute;right:20px;top:19px;color:#c7d5dc;font-size:9px;letter-spacing:.12em;pointer-events:none}dialog{max-height:85svh;overflow:auto}dialog h3{font-size:14px;margin-top:24px} .icon-button:disabled{opacity:.45;cursor:default}

/* Prevent a steering tap in page margins from starting a pan or text selection. */
body:has(.overlay[hidden]):not(:has(dialog[open])){touch-action:none;user-select:none;-webkit-user-select:none}

.records{display:grid;gap:6px;line-height:1.1;white-space:nowrap}.records .label{font-size:8px;letter-spacing:.14em;margin-bottom:3px}.records b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}.records small{font-size:10px;color:#788272;font-variant-numeric:tabular-nums}header{gap:12px}#sound{font-size:16px;flex-shrink:0}#pause{flex-shrink:0}@media(max-width:420px){.stats{gap:22px}.tagline{font-size:9px;letter-spacing:.04em}.records b{font-size:14px}.records small{font-size:9px}}

.records [role="button"]{cursor:pointer;border-radius:4px;outline:1px dashed #9ba68d;outline-offset:4px}.records [role="button"]:hover{background:#dfe4d5}.records [role="button"]:focus-visible{outline:2px solid #768844}

/* A quiet ending: leave a hint of the board visible, with gentle type and controls. */
.overlay[data-mode="over"]{background:rgba(232,235,222,.88);animation:quiet-ending .9s ease-out both}
.overlay[data-mode="over"] .intro-mark{display:none}
.overlay[data-mode="over"] .eyebrow{font-size:10px;letter-spacing:.14em;color:#7a8473;margin-bottom:8px;font-weight:400}
.overlay[data-mode="over"] h1{font-size:clamp(21px,5vw,26px);font-weight:400;letter-spacing:.07em;line-height:1.7;color:#56634e;margin:4px 0 16px}
.overlay[data-mode="over"] #message{font-size:11px;color:#77816f;line-height:2.2;white-space:pre-line;margin-bottom:25px}
.overlay[data-mode="over"] .primary{background:transparent;color:#5f6e55;border:1px solid #aab59f;min-width:150px;justify-content:center;padding:11px 22px;font-size:11px}
.overlay[data-mode="over"] .primary span{display:none}
.overlay[data-mode="over"] .text-button{font-size:10px;color:#7c8873}
@keyframes quiet-ending{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.overlay[data-mode="over"]{animation:none}}

/* A quiet invitation, matching the softer end screen. */
.overlay[data-mode="intro"]{background:rgba(232,235,222,.94)}
.overlay[data-mode="intro"] .intro-mark,.overlay[data-mode="intro"] .eyebrow{display:none}
.overlay[data-mode="intro"] h1{font-size:clamp(22px,5vw,28px);font-weight:400;letter-spacing:.09em;line-height:1.9;color:#5c6954;margin:0 0 20px}
.overlay[data-mode="intro"] #message{font-size:11px;line-height:2.1;color:#76816f;margin-bottom:25px}
.overlay[data-mode="intro"] .primary{background:transparent;border:1px solid #aab59f;color:#5f6e55;min-width:150px;justify-content:center;padding:11px 22px;font-size:11px}
.overlay[data-mode="intro"] .primary span{display:none}
.overlay[data-mode="intro"] .text-button{font-size:10px;color:#7c8873}

#demo-stop{font-size:10px;white-space:nowrap;padding:8px;color:#65765a}#demo-stop[hidden]{display:none}@media(max-width:420px){header:has(#demo-stop:not([hidden])) .tagline{display:none}}

@media(max-height:740px){.overlay[data-mode="intro"]{padding:18px 16px}.overlay[data-mode="intro"] h1{font-size:21px;line-height:1.6;margin-bottom:12px}.overlay[data-mode="intro"] #message{font-size:10px;line-height:1.8;margin-bottom:14px}.overlay[data-mode="intro"] .text-button{padding:9px 14px}}

/* The board ends 31px above the frame; keep notifications wholly in that space. */
#toast:empty{visibility:hidden}

#toast{position:absolute;bottom:0;left:14px;right:14px;height:30px;min-height:0;margin:0;padding:0 4px;display:block;border:0;border-radius:0;background:transparent;color:#c5d1bd;font-size:10.5px;font-weight:400;line-height:30px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000;pointer-events:none}
.arena:has(.overlay:not([hidden])) #toast{visibility:hidden}