/* Night-forest UI: filled charcoal ink, mist-grey edges and restrained candlelight. */
.material-icon{display:block;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:contain;pointer-events:none;filter:drop-shadow(0 3px 2px #0009)}
.material-icon[data-art="help"]{background-image:var(--ui-help)}
.material-icon[data-art="pause"]{background-image:var(--ui-pause)}
.material-icon[data-art="flame"]{background-image:var(--ui-flame)}

.material-icon[data-art="back"]{background-image:var(--ui-back)}
.material-icon[data-art="sound"]{background-image:var(--ui-sound)}
.material-icon[data-art="muted"]{background-image:var(--ui-muted)}
.material-icon[data-art="joy"]{background-image:var(--ui-joy)}
#help-btn,#pause-btn,#sound-home,#levels-back{background:none;border:0;box-shadow:none;padding:0;filter:none}
#help-btn,#pause-btn,#sound-home,#levels-back{width:54px;height:54px}

#help-btn:hover,#pause-btn:hover{filter:brightness(1.08)}
#help-btn:active,#pause-btn:active,#sound-home:active,#levels-back:active{transform:translateY(2px) scale(.95);filter:brightness(.83)}
button:focus-visible{outline:2px solid #e2d4af;outline-offset:3px}
#help-btn:focus-visible .material-icon,#pause-btn:focus-visible .material-icon,#interact-btn:focus-visible .material-icon{filter:drop-shadow(0 0 3px #ead7a5)}
#joystick{width:112px;height:112px;left:16px;bottom:12px;border:0;border-radius:0;background:none;box-shadow:none}
.joystick-ring{inset:0;background:none;border:0}
#joy-knob{width:46px;height:46px;top:calc(50% - 23px);left:calc(50% - 23px);background:var(--ui-knob) center/contain no-repeat;border:0;border-radius:50%;box-shadow:none;filter:drop-shadow(1px 3px 2px #000a)}
#interact-btn{width:90px;height:90px;opacity:1;background:none;border:0;box-shadow:none;filter:none}
#interact-btn .action-symbol{inset:0;transform:none}
#interact-btn small{display:none}
#interact-btn:hover{filter:none}
#interact-btn:active{transform:translateY(2px) scale(.95);filter:brightness(.82)}
.actions{bottom:12px;right:16px;gap:14px}
#jump-btn{position:relative;width:76px;height:76px;min-width:44px;min-height:44px;flex-shrink:0;margin:0 3px 3px 0;padding:7px 10px 18px;color:#d9ceb0;background:var(--ui-knob) center/100% 100% no-repeat;border:0;clip-path:polygon(48% 6%,69% 10%,85% 24%,94% 46%,89% 70%,71% 88%,48% 95%,24% 86%,9% 69%,5% 46%,14% 23%,30% 10%);filter:drop-shadow(0 3px 3px #0009);touch-action:none;user-select:none}
#jump-btn svg{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 1px 1px #000)}
#jump-btn span{position:absolute;bottom:9px;left:0;right:0;font-size:12px;text-shadow:0 1px 3px #000;pointer-events:none}
#jump-btn:active{transform:translateY(2px) scale(.95);filter:brightness(.85)}
#jump-btn.in-air{color:#9d9e89;filter:brightness(.8)}
@container(max-height:550px){#jump-btn{width:72px;height:72px}}
.teaching:after{display:none}
#joystick.teaching .material-icon,#interact-btn.teaching .material-icon{filter:drop-shadow(0 0 5px #e1b567aa)}

/* Filled ink patches keep every label live, readable and localizable. */
.paper,.modal-secondary,.text-button,.chapter-tabs button,#coach-skip{
  position:relative;min-height:48px;padding:2px 18px;border:12px solid transparent;
  border-image-source:var(--ui-secondary);border-image-slice:30 64 fill;border-image-width:12px 24px;border-image-repeat:stretch;
  background:none;box-shadow:none;clip-path:none;border-radius:0;color:#d7d9c9;text-shadow:0 1px 2px #080c08;
  font-family:LanternSerif,"Songti SC",serif;font-size:16px;line-height:1.35;letter-spacing:.08em;
  filter:drop-shadow(0 3px 2px #0008);transition:transform .12s,filter .12s;
}
.paper.primary,.chapter-tabs button.active{border-image-source:var(--ui-primary);background:none;box-shadow:none;color:#e7d8b5;font-weight:600;text-shadow:0 1px 3px #000}
.paper:hover,.modal-secondary:hover,.text-button:hover,.chapter-tabs button:hover{filter:brightness(1.08) drop-shadow(0 3px 2px #0008)}
.paper:active,.modal-secondary:active,.text-button:active,.chapter-tabs button:active{transform:translateY(2px) scale(.98);filter:brightness(.85)}
.paper:focus-visible,.modal-secondary:focus-visible,.text-button:focus-visible,.chapter-tabs button:focus-visible,.level-card:focus-visible,#coach-skip:focus-visible{outline:none;filter:brightness(1.12) drop-shadow(0 0 3px #ead7a5)}
.home-copy .paper{min-width:220px}.home-copy .text-button{width:190px;margin:10px auto 0}
#skip-prologue{min-width:94px;min-height:44px;padding:1px 10px;border-width:8px;border-image-width:8px 17px}
.chapter-tabs{gap:8px}.chapter-tabs button{padding:1px 8px;min-height:44px;font-size:12px;border-width:8px;border-image-width:8px 18px}
.level-card{border:12px solid transparent;border-image:var(--ui-secondary) 30 64 fill / 12px 24px stretch;background:none;box-shadow:none;padding:5px 8px;color:#ddd0b0}
.level-card:before{display:none}.level-card:hover:not(:disabled){background:none;filter:brightness(1.12)}
.level-card:disabled{opacity:.4;filter:grayscale(.7)}.level-card .state{right:6px;top:6px}.level-card .coin{right:6px;bottom:4px}
#light-count,#timer-status,.hud-right #coin-status{border:7px solid transparent;border-image:var(--ui-secondary) 30 64 fill / 7px 16px stretch;background:none;box-shadow:none;color:#ecd7ab;text-shadow:0 1px 2px #000;border-radius:0;padding:0 8px}
#light-count{bottom:calc(100% - 1px);font-size:16px;line-height:1.1;min-width:110px;text-align:center}
#light-count:before{color:#d0b98f}#light-count.empty{color:#dfaa91}
.hud-right{gap:7px}.hud-right #coin-status{padding:2px 7px}

/* Nine-slice ink panels preserve hand-painted edges at every content height. */
.modal{padding:8px;background:#0407059c;backdrop-filter:blur(1.5px)}
.modal-card{
  width:min(560px,94%);max-height:100%;padding:3px 14px 8px;border:28px solid transparent;
  border-image:var(--ui-panel) 65 fill / 28px stretch;background:none;box-shadow:none;border-radius:0;
  filter:drop-shadow(0 12px 15px #000b);display:flex;flex-direction:column;overflow:visible;color:#d7d9ca;
}
.modal-card h2{font-size:26px;line-height:1.3;color:#e1d7bd;text-shadow:0 2px 5px #000;margin:0 0 10px;flex-shrink:0;letter-spacing:.08em}
#modal-eyebrow{color:#a8b09b}
#modal-body{color:#c2c9bc;font:15px/1.8 system-ui,sans-serif;overflow:auto;min-height:0;max-height:44cqh;touch-action:pan-y;scrollbar-color:#6d7560 #1a201b}
#modal-body p+p{margin-top:8px}#modal-body .highlight{color:#d4ba84;font-weight:600}
#modal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:14px;flex-shrink:0;align-items:stretch}
#modal-actions>button{width:100%;min-width:0;max-width:100%;margin:0;min-height:48px;padding:1px 12px}
#modal-actions .paper{width:100%}
#modal-actions>:first-child,#modal-actions>:last-child:nth-child(even){grid-column:1/-1}
#modal[data-kind="failed"] .modal-card h2{color:#c99b85}
#toast{
  background:none;box-shadow:none;border:15px solid transparent;border-image:var(--ui-secondary) 30 64 fill / 15px 30px stretch;
  color:#ede0c2;padding:4px 16px;font:14px/1.6 system-ui,sans-serif;max-width:66%;bottom:35%;
  filter:drop-shadow(0 5px 4px #0009);text-shadow:0 1px 2px #000;
}
#coach{border:18px solid transparent;border-image:var(--ui-panel) 65 fill / 18px stretch;background:none;box-shadow:none;color:#d0d5c3;padding:0 5px;width:min(380px,56%);gap:8px;filter:drop-shadow(0 4px 5px #0009);font-size:14px;top:66px}
#coach-skip{min-width:62px;min-height:44px;padding:0 3px;border-width:8px;border-image-width:8px 13px;font-size:12px}
#coach-text{flex:1}#coach-skip{flex-shrink:0}
@container(max-height:550px){
  #help-btn,#pause-btn,#sound-home,#levels-back{width:50px;height:50px}
  #joystick{width:106px;height:106px;bottom:12px;left:14px}#interact-btn{width:84px;height:84px}
  .actions{right:14px;bottom:12px}.home-copy .paper{min-width:210px}.home-copy .text-button{min-height:44px;margin-top:6px}
  .modal-card{border-width:24px;border-image-width:24px;padding:2px 12px 5px;width:min(550px,94%)}
  .modal-card h2{font-size:23px;margin-bottom:7px}#modal-body{font-size:14px;line-height:1.7;max-height:36cqh}
  #modal-actions{margin-top:10px;gap:5px}#modal-actions>button{min-height:44px;border-width:9px;border-image-width:9px 22px}
  #coach{top:61px;border-width:15px;border-image-width:15px;font-size:13px;padding:0 3px}
  .level-card{min-height:57px;border-width:9px;border-image-width:9px 20px;padding:3px 5px}.level-card .num{font-size:19px}.level-card .name{margin-top:2px}
  .chapter-tabs{margin:2px 0 5px;gap:4px}.chapter-tabs button{font-size:11px;padding:0 4px}
}
@media(prefers-reduced-motion:reduce){.paper,.modal-secondary,.text-button,.material-icon{transition:none;animation:none}}
.home-copy h1{margin-bottom:0}
.home-copy .title-rule h2{font-family:Georgia,serif;font-size:clamp(17px,2.1vw,24px);letter-spacing:.08em}
#modal[data-size="compact"] .modal-card{width:min(380px,92%)}
#modal[data-kind="tutorial"] #modal-body p{text-wrap:balance}

/* The same ink panel and painted buttons carry the story and account forms. */
#modal[data-kind^="story-"] .modal-card{width:min(540px,95%)}
#modal[data-kind^="story-"]{height:var(--story-visible-height,100%);bottom:auto}
#modal.story-keyboard[data-kind^="story-"] .modal-card{overflow-y:auto;touch-action:pan-y}
#modal.story-keyboard[data-kind^="story-"] #modal-body{flex:none;overflow:visible}
#modal[data-kind="story-question"] .modal-card,#modal[data-kind="story-failed"] .modal-card{width:min(420px,94%)}
#modal[data-kind^="story-"] #modal-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
#modal[data-kind="story-question"] #modal-actions>button{grid-column:auto}
#modal[data-kind="story-answer"] #modal-body,#modal[data-kind="story-login"] #modal-body{max-height:none;flex:1;overflow-y:auto;padding:0 3px}
#modal[data-kind^="story-"] label{display:block;font-size:13px;color:#d8caaa;margin:4px 0}
#modal[data-kind^="story-"] input,#modal[data-kind^="story-"] textarea{display:block;width:100%;border:1px solid #717961;border-radius:5px;background:#0b120ed9;box-shadow:inset 0 2px 9px #0008;color:#e4dcc5;font:16px/1.5 system-ui,sans-serif;padding:8px 10px;touch-action:pan-y;user-select:text;-webkit-user-select:text;outline:none}
#modal[data-kind^="story-"] textarea{resize:vertical;min-height:68px;max-height:160px}
#modal[data-kind^="story-"] input:focus,#modal[data-kind^="story-"] textarea:focus{border-color:#baa576;box-shadow:0 0 0 2px #d2c49122}
#modal[data-kind^="story-"] input::placeholder,#modal[data-kind^="story-"] textarea::placeholder{color:#92988a;font-size:13px}
#modal[data-kind^="story-"] button:disabled{opacity:.5;cursor:wait}
.story-note{font:12px/1.5 system-ui,sans-serif;color:#a8b09c;margin-bottom:8px}
#story-conversation{max-height:130px;overflow:auto;touch-action:pan-y;margin:6px 0;font-size:13px;line-height:1.7}
#story-conversation:empty{display:none}.story-said{color:#aab5a3}.story-hint{color:#ddc68e}
#story-form-status,#story-answer-status{color:#dbc197;font-size:13px;line-height:1.5;min-height:0;margin-top:6px}
#modal[data-kind="story-thanks"] h2{font-size:clamp(19px,2.4vw,26px);line-height:1.6;text-wrap:balance}
@container(max-height:360px){
  #modal[data-kind="story-answer"] .modal-card,#modal[data-kind="story-login"] .modal-card{width:min(620px,97%);border-width:17px;border-image-width:17px;padding:0 10px;max-height:98%}
  #modal[data-kind^="story-"] .modal-card h2{font-size:19px;margin-bottom:4px}
  #modal[data-kind^="story-"] #modal-actions{margin-top:5px;gap:4px}
  #modal[data-kind="story-answer"] #modal-actions,#modal[data-kind="story-login"] #modal-actions{grid-template-columns:1.5fr 1fr 1fr}
  #modal[data-kind="story-answer"] #modal-actions>button,#modal[data-kind="story-login"] #modal-actions>button{grid-column:auto;font-size:14px;min-height:44px;padding:0 5px}
  #modal[data-kind^="story-"] textarea{min-height:64px;height:66px}
  #story-conversation{max-height:56px}.story-note{margin-bottom:3px}
  #story-login-form{display:grid;grid-template-columns:44px minmax(0,1fr);gap:5px;align-items:center}#story-form-status{grid-column:1/-1}
}