/* Edo colour study: actual HOUND street, parchment signs, ink edges, amber lamps. */
:root{--ink:#eee2b8;--muted:#ccc7b6;--jade:#b6d694;--gold:#d5aa62;--night:#171c30;--edge:#d5bc804f}
.world{background-image:url('./assets/edo-street.webp');background-position:center 62%;opacity:1;transform:none;transition:none}
/* Independent scrims preserve the saturated street rather than tinting it green. */
.atmosphere{background:linear-gradient(90deg,#101322dd 0%,#1116298a 29%,#15192826 53%,#1115237a 100%),linear-gradient(0deg,#111523eb,transparent 43%,#11152388)}
body[data-state=playing] .world{opacity:1}
header{border-bottom-color:#d6ba7355}.brand{filter:sepia(.65) brightness(1.5)}
.event-name,.tools button{font-family:Hound,Georgia,serif;font-size:13px;letter-spacing:1px}.tools button{background:#181c2bc2;border:1px solid #b0a18588;box-shadow:inset 0 0 0 2px #0b0d18aa;min-width:70px}.tools button:hover{background:#323242}
h1{color:var(--ink);text-shadow:3px 4px 0 #12141fe8,0 0 30px #111523}h1 em{color:#e5c581}.eyebrow{color:#e2c588}.eyebrow>span{background:#e2c588}.story{color:#eee2c4;text-shadow:1px 2px 3px #101323}.rules p{color:#e1dbcb;text-shadow:1px 2px 3px #101323}.rules{border-color:#d6ba7366}.rule-number{color:#e5c581}.edition{color:#d3c5a7}
.score-block>strong{font-family:Hound,Georgia,serif;font-size:68px;text-shadow:3px 4px 0 #141624}.scoreboard{text-shadow:1px 2px 3px #11131d}.personal,.milestone{color:#e0d7c1}.time-block>strong{font-family:Hound,Georgia,serif}.time-track,#goal-fill{background:#e5c581}#time-fill{background:#e5c581}.milestone>div{background:#e5c58133}.milestone i{background:var(--jade)}
/* The old base :hover shorthand erased the brush image. Define every layer in both states. */
/* The cream backing stays inside the stroke so the brush's own dry edge is the silhouette,
   not a soft ellipse of glow. Text still sits on solid paper. */
.primary,body[data-state=playing] #action,.primary:hover,body[data-state=playing] #action:hover{background-color:transparent;background-image:radial-gradient(ellipse closest-side,#f2efdd 58%,#f2efddf5 80%,transparent 96%),url('./assets/brush-stroke.webp');background-position:center,center;background-size:72% 58%,110% 300%;background-repeat:no-repeat}
.primary,body[data-state=playing] #action{color:#191923;border:0;box-shadow:none;font-family:Hound,Georgia,serif;font-size:19px;letter-spacing:.6px;line-height:1.3;min-height:60px;min-width:282px;padding:15px 32px;text-shadow:none;filter:drop-shadow(2px 4px 1px #11131ccc);transition:filter .12s,transform .12s}
.primary:hover,body[data-state=playing] #action:hover{filter:brightness(1.06) drop-shadow(2px 5px 2px #11131ccc)}
.primary:active,body[data-state=playing] #action:active{filter:brightness(.96) drop-shadow(1px 2px 1px #11131ccc)}
.primary:focus-visible{outline:2px solid #f1d98d;outline-offset:4px}
#hint{color:#f0e4c4;text-shadow:2px 2px 0 #141526,0 0 15px #11131d}.action-dock #controls{color:#e0d7c1;text-shadow:1px 2px 3px #11131d}#feedback{color:#cfef9f;text-shadow:2px 3px 0 #141827,0 0 18px #465d29}
.result{background:transparent url('./assets/ink-panel.webp') center/106% 104% no-repeat;border:0;box-shadow:0 20px 70px #0a0b16cc;padding:40px}.result:before{inset:8%;border:0;background:#121421a8;z-index:-1}.result:after{display:none}.result h2{color:#eee2b8;text-shadow:2px 3px 0 #141523}.result-numbers{border-color:#d6ba7355}.result-numbers strong{font-family:Hound,Georgia,serif;color:#e6cf98}.result .primary{min-width:0}.prototype-note{color:#ddd5c2}footer{color:#d7ccb2;border-color:#d6ba7355}
@media(max-width:760px){.world{background-position:49% center}.atmosphere{background:linear-gradient(180deg,#101526cd 0%,#161b3277 28%,#161b321f 50%,#121629c9 83%,#111523f5),linear-gradient(90deg,#11152344,transparent,#11152344)}.event-name{font-size:9px;letter-spacing:.6px}.tools button{font-size:10px;min-width:0;letter-spacing:0}.score-block>strong{font-size:44px}.intro h1{font-size:47px}.primary,body[data-state=playing] #action{min-height:56px;min-width:266px;font-size:16px}.result{padding:34px 30px}.result-numbers strong{font-size:44px}.result .primary{min-width:0}.result h2{font-size:29px}}
@media(max-height:650px) and (max-width:760px){.intro h1{font-size:37px}.score-block>strong{font-size:36px}.primary,body[data-state=playing] #action{min-height:48px}.result{padding:24px}.result-numbers strong{font-size:36px}}
@media(orientation:landscape) and (max-height:550px){.intro h1{font-size:45px}.score-block>strong{font-size:42px}.primary,body[data-state=playing] #action{min-height:40px;min-width:210px;font-size:14px}.result{padding:22px 30px}.result h2{font-size:25px}.result .primary{min-width:0}.result-numbers strong{font-size:30px}.tools button{font-size:10px}.event-name{font-size:10px}}
