:root{--paper:#faf5ed;--ink:#594e43;--muted:#9b8d7e;--peach:#d58c73;--green:#748963;--line:#e9dfd1;--cream:#fffdf8;--header-h:60px}
*{box-sizing:border-box}
html{height:100%;background:var(--paper)}
body{margin:0;height:100%;height:var(--app-height,100vh);overflow:hidden;color:var(--ink);font-family:"PingFang SC","Hiragino Sans GB",sans-serif;background:radial-gradient(ellipse at 50% 42%,#fffdf8 0,var(--paper) 74%);overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus,canvas:focus{outline:none}html.keyboard-navigation button:focus{outline:2px solid var(--green);outline-offset:3px}
button:disabled{cursor:progress;opacity:.55}
[hidden]{display:none!important}
header{height:calc(var(--header-h) + var(--safe-area-inset-top,0px));max-width:560px;margin:auto;padding:8px 18px;display:flex;justify-content:space-between;align-items:center;padding-top:calc(8px + var(--safe-area-inset-top,0px))}
.brand{display:flex;align-items:center;font-size:17px;font-weight:650;letter-spacing:1px;padding:0;text-align:left;min-height:44px}
.brand svg{width:29px;height:29px;border-radius:9px;overflow:hidden}
#rules{width:44px;height:44px;font-size:14px;color:var(--muted)}
main{height:calc(100% - var(--header-h) - var(--safe-area-inset-top,0px));max-width:560px;margin:0 auto;padding:0 12px;display:flex;flex-direction:column;}
.play-area{min-height:0;min-width:0;flex:1;display:flex;flex-direction:column}
#animal-dialogue,#companion-dialogue{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}
#speech-tail,#companion-dialogue svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}
#speech-tail-path,#companion-dialogue path{fill:var(--cream);stroke:#ddcdbb;stroke-width:1.1;stroke-linejoin:round}
.speech-bubble{position:absolute;width:220px;max-width:calc(100% - 12px);background:var(--cream);border:1px solid #ddcdbb;border-radius:16px;padding:11px 13px;box-shadow:0 4px 12px rgba(112,88,65,0.051)}
.choice-line .speech-bubble{width:128px}
#animal-dialogue.help .speech-bubble{pointer-events:auto}
#stage-label{font-size:10px;color:var(--muted);margin-right:12px}
#status,#companion-status{margin:0;font-size:13px;line-height:1.55;color:var(--ink)}
#status.success{color:#5f764c}
#status.error{color:#a4624b}
#animal-dialogue[data-tone=error] .speech-bubble{border-color:#dcc1b2}
#speech-actions{display:flex;margin-top:8px}
#speech-actions button{flex:1;min-width:44px;min-height:44px;font-size:11px;border:1px solid var(--line);border-radius:10px}
#speech-actions button:active{background:#f0e7da}
.tray{position:relative;flex:1;min-height:0;max-height:760px}
#scene-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:28px;text-align:center;font-size:12px;color:var(--muted);pointer-events:none}
#board{display:block;width:100%;height:100%;background:none;touch-action:none;cursor:grab}
#board:active{cursor:grabbing}
#bank{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
.bank-card{position:absolute;pointer-events:auto;border-radius:19px;min-width:44px;min-height:44px;padding:0;outline-offset:2px}
.bank-card.chosen{border:1.5px solid #8b9c78;background:rgba(232,238,222,0.133)}
.bank-card:active{background:rgba(221,208,178,0.110)}
#side-cover{position:absolute;top:8px;right:8px;z-index:4;width:24vw;min-width:80px;max-width:112px;padding:5px;border:1px solid #decdb6;border-radius:14px;background:#fff7e7;box-shadow:0 3px 8px rgba(112,88,65,0.055)}
#side-cover-pattern{display:block;width:100%;height:auto;;border-radius:8px}
#side-cover>span{display:flex;align-items:center;justify-content:center;font-size:10px;line-height:20px;color:#8a765f}
#side-cover b{font-size:14px;font-weight:400}
#side-cover:active{transform:translateY(1px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dock{flex:0 0 calc(132px + var(--safe-area-inset-bottom,0px));padding:8px 6px calc(12px + var(--safe-area-inset-bottom,0px));position:relative}
.primary{display:flex;align-items:center;justify-content:center;background:var(--peach);color:#fffdf8;border-radius:16px;padding:12px 24px;font-size:14px;font-weight:600;min-height:48px;box-shadow:0 3px 0 rgba(185,121,98,0.251);transition:transform .15s,background .15s}
.primary:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(185,121,98,0.251);background:#c78169}
#landing-actions{display:flex;flex-direction:column;align-items:center;padding-top:4px;}
#start{width:100%;max-width:270px;font-size:16px;height:54px;letter-spacing:2px}
#resume{min-height:44px;font-size:12px;color:var(--green)}
#opening-actions{height:100%;display:flex;justify-content:center;align-items:flex-start}
#skip{min-width:80px;min-height:44px;color:var(--muted);font-size:12px}
.controls{display:flex;}
.controls button{flex:1;min-width:44px;min-height:52px;background:rgba(255,253,246,0.702);border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px}
.controls button>span:first-child{font-size:21px;line-height:20px;font-weight:400}
#sound[aria-pressed=true]{color:var(--green);background:#edf2e5}
.controls button:active{background:#f0e7da}
.progress-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:45px;padding:2px 5px 0;font-size:11px;color:var(--muted)}
.progress-info{display:flex;align-items:baseline;justify-content:space-between;flex:1 0 220px;min-width:0}
.progress-count{white-space:nowrap}
.progress-row>button{margin-left:auto}
.progress-row b{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
#next{min-height:44px;font-size:12px;padding:8px 18px;border-radius:11px}
#ending-skip{min-height:44px;padding:6px 12px;font-size:12px;color:var(--muted)}
#stuck-notice{font-size:10px;line-height:18px;color:var(--muted);white-space:nowrap}
body.ending #board{cursor:default}
#win-dialog{border:1px solid #e4d6c3;border-radius:26px;background:var(--cream);color:var(--ink);padding:24px;width:358px;max-width:calc(100vw - 24px);max-height:calc(var(--app-height,100vh) - 24px);overflow:auto;box-shadow:0 20px 80px rgba(73,59,46,0.141)}
#win-dialog::backdrop{background:rgba(69,60,48,0.349);backdrop-filter:blur(5px)}
#win-dialog[open]{animation:win-appear .32s ease-out}
#win-close{position:absolute;right:7px;top:7px;min-width:44px;min-height:44px;border-radius:50%;color:var(--muted);font-size:13px;z-index:1}
.win-content{display:flex;flex-direction:column;align-items:center;}
.report-picture{width:100%;max-width:216px;flex:none;border-radius:13px;overflow:hidden;box-shadow:0 3px 16px rgba(102,81,59,0.071)}
#war-report{display:block;width:100%;height:auto;}
.win-details{width:100%;text-align:center}
.win-eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}
#win-title{font-size:25px;letter-spacing:2px;font-weight:650;margin:8px 0}
#win-description{font-size:13px;color:var(--muted);margin:0 0 17px}
#win-moves{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--green);margin:0 4px}
#share-report{width:100%;min-height:48px;font-size:14px}
#save-report,#win-replay{min-height:44px;font-size:12px;padding:6px 12px}
#save-report{color:var(--green);width:100%;margin-top:4px}
#win-replay{color:var(--muted)}
#secret-start{width:100%;min-height:44px;border:1px solid #c9d4bb;border-radius:12px;background:#edf2e5;color:#63784f;font-size:12px;margin:8px 0 3px}
#secret-tools{margin-top:5px}
.secret-info{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}
.secret-info button{min-height:44px;font-size:10px;color:var(--green);padding:2px 6px}
.secret-selection{display:flex;align-items:center}
#secret-name{flex:1;min-width:0;font-size:11px;color:var(--ink)}
.secret-selection button{min-height:44px;min-width:44px;padding:6px 10px;border:1px solid var(--line);background:var(--cream);border-radius:10px;font-size:11px}
#secret-remove{color:#a76f58}
body.secret-mode:not(.holding) .dock{flex-basis:calc(224px + var(--safe-area-inset-bottom,0px))}
body.secret-mode.holding #secret-tools .secret-selection{display:none}
body.secret-mode.holding .controls{display:flex}
body.secret-mode.holding .dock{flex-basis:calc(240px + var(--safe-area-inset-bottom,0px))}
body.secret-mode .progress-row{min-height:36px}
body.secret-mode #stage-label{margin-right:7px}
body.secret-mode #secret-score{font-variant-numeric:tabular-nums}
#cover-dialog{position:relative;border:1px solid var(--line);border-radius:24px;background:var(--cream);padding:24px;width:380px;max-width:calc(100vw - 24px);max-height:calc(var(--app-height,100vh) - 24px);overflow:auto;color:var(--ink);text-align:center}
#cover-dialog::backdrop{background:rgba(69,60,48,0.349);backdrop-filter:blur(5px)}
#cover-close{position:absolute;right:5px;top:5px;min-height:44px;min-width:44px;color:var(--muted)}
#cover-title{font-size:19px;font-weight:600;margin:10px 0 18px}
#cover-pattern{display:block;width:100%;max-width:280px;height:auto;;margin:auto;border-radius:14px}
#cover-dialog p{font-size:12px;line-height:1.7;color:var(--muted)}
#cover-done{width:100%;font-size:13px}
#share-status{font-size:11px;line-height:1.5;color:var(--muted);margin:0;min-height:0}
#share-status:not(:empty){margin:2px 0 4px}
@keyframes win-appear{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.rotate-row{display:flex;align-items:center;height:73px;padding:0 4px}
#piece-preview{width:78px;height:72px;flex:0 0 78px;display:block;touch-action:none}
.hand-controls{flex:1;min-width:0}
.rotate-head{display:flex;justify-content:space-between;font-size:11px;align-items:center;margin-bottom:5px}
.rotate-head strong{font-weight:500}
.rotate-head span{font-size:10px;color:var(--muted)}
.rotate-buttons{display:flex;}
.rotate-buttons button{flex:1;min-width:44px;min-height:44px;background:var(--cream);border:1px solid var(--line);border-radius:11px;font-size:12px;white-space:nowrap}
.rotate-buttons #cancel-placement{flex:0 0 44px;color:var(--muted)}
.rotate-buttons #placement-hint{flex:0 0 44px;color:var(--green)}
body.holding .controls{display:none}
body.holding .progress-row{min-height:32px}
body[data-screen=landing] .game-tools,body[data-screen=opening] .game-tools,body[data-screen=game] #landing-actions,body[data-screen=game] #opening-actions,body[data-screen=landing] #opening-actions,body[data-screen=opening] #landing-actions{display:none}
body:not([data-screen=game]) #bank{visibility:hidden}
body:not([data-screen=game]) #animal-dialogue,body:not([data-screen=game]) #companion-dialogue,body:not([data-screen=game]) #rules{visibility:hidden}
@media(min-width:600px) and (min-height:600px){body{--header-h:68px}header{padding:12px 22px;padding-top:calc(12px + var(--safe-area-inset-top,0px))}main{padding:0 18px}.dock{flex-basis:calc(140px + var(--safe-area-inset-bottom,0px));padding-left:28px;padding-right:28px}}
@media(max-width:360px), (max-height:680px){body{--header-h:52px}header{padding:4px 14px;padding-top:calc(4px + var(--safe-area-inset-top,0px))}.brand{font-size:15px}.brand svg{width:27px;height:27px}main{padding:0 10px}.speech-bubble{width:204px;padding:9px 11px}#status,#companion-status{font-size:12px}.dock{flex-basis:calc(122px + var(--safe-area-inset-bottom,0px));padding-top:4px;padding-bottom:calc(8px + var(--safe-area-inset-bottom,0px))}.controls button{min-height:46px}.progress-row{min-height:44px}#start{height:50px}}
@media(max-height:500px) and (min-width:600px){body{--header-h:44px}header{max-width:780px;padding:0 20px;padding-top:var(--safe-area-inset-top,0px)}.brand{font-size:15px}.brand svg{width:25px;height:25px}main{max-width:780px;display:grid;grid-template-columns:minmax(0,1fr) 244px;align-items:center;padding:0 calc(18px + var(--safe-area-inset-right,0px)) calc(6px + var(--safe-area-inset-bottom,0px)) calc(18px + var(--safe-area-inset-left,0px))}.play-area{height:100%}.dock{padding:8px 0;height:132px}.dock{height:auto}.controls{}.controls button{min-height:48px}.progress-row{min-height:44px}}
@media(max-height:500px) and (min-width:600px){body.holding .dock{height:156px}.rotate-row{display:grid;grid-template-columns:64px 1fr;height:108px;padding:0}#piece-preview{width:64px;height:60px;grid-row:1}.hand-controls{display:block}.rotate-head{grid-column:2;grid-row:1;margin-bottom:0}.rotate-buttons{grid-column:1/-1}}
@media(max-height:720px) and (max-width:599px){#win-dialog{padding:20px}.win-content{}.report-picture{width:140px}#win-description{margin-bottom:12px}#win-title{font-size:23px;margin:6px 0}}
@media(max-height:500px) and (min-width:600px){#win-dialog{width:580px;padding:20px 24px}.win-content{flex-direction:row;}.report-picture{width:198px}.win-details{flex:1}#win-title{font-size:27px;margin:10px 0}#win-description{margin-bottom:18px}}
@media(max-height:500px) and (min-width:600px){body.secret-mode .dock{height:228px}body.secret-mode.holding .dock{height:264px}.secret-selection button{padding:4px 7px}.secret-info button{padding:2px 3px}#cover-dialog{width:540px;display:none}#cover-dialog[open]{display:grid;grid-template-columns:220px 1fr;grid-column-gap:22px;align-items:center}#cover-title{grid-column:2;grid-row:1;margin:0;font-size:17px}#cover-pattern{grid-column:1;grid-row:1/4;width:220px}#cover-dialog p{grid-column:2;grid-row:2}#cover-done{grid-column:2;grid-row:3}}
@media(min-width:900px) and (min-height:600px){body.secret-mode main,body.secret-mode header{max-width:1040px}body.secret-mode .dock{width:100%;max-width:560px;align-self:center}#side-cover{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.brand>*+*{margin-left:9px}
#speech-actions>*+*{margin-left:6px}
#side-cover>span>*+*{margin-left:7px}
#landing-actions>*+*{margin-top:8px}
.controls>*+*{margin-left:6px}
.controls button>*+*{margin-top:4px}
.progress-info>*+*{margin-left:10px}
.win-content>*+*{margin-top:17px}
.secret-info>*+*{margin-left:4px}
.secret-selection>*+*{margin-left:5px}
.rotate-row>*+*{margin-left:8px}
.rotate-buttons>*+*{margin-left:5px}
body{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.bank-card{touch-action:none}
header{height:calc(var(--header-h) + var(--native-top,var(--safe-area-inset-top,0px)));padding-top:calc(8px + var(--native-top,var(--safe-area-inset-top,0px)))}
main{height:calc(100% - var(--header-h) - var(--native-top,var(--safe-area-inset-top,0px)))}
.header-actions{display:flex;align-items:center}.header-actions button{min-width:44px;min-height:44px}
.header-actions{flex-shrink:0}.header-actions button+button{margin-left:8px}
.progress-row{margin-top:8px}.progress-row>button{margin-left:12px}
body.has-next .progress-info{flex:1 1 auto}
body.secret-mode #stuck-notice{font-size:10px}
#rank-entry{font-size:12px;color:var(--green)}
dialog{display:none}dialog[open]{display:block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;z-index:100}
body.modal-open:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(69,60,48,.35);z-index:99}
#rank-dialog{width:370px;max-width:calc(100vw - 24px);max-height:calc(100vh - 36px);overflow:auto;border:1px solid var(--line);border-radius:24px;padding:22px;background:var(--cream);color:var(--ink)}
#rank-close{position:absolute;right:6px;top:6px;width:44px;height:44px}#rank-dialog h2{font-size:22px;margin:5px 0 20px}
.rank-tabs{display:flex}.rank-tabs button{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--line)}
.rank-tabs button+button{margin-left:8px}.rank-tabs button[aria-pressed=true]{background:#edf2e5;color:var(--green)}
#rank-caption,#rank-status,#rank-mine{font-size:12px;line-height:1.6}#rank-mine{background:#f3ecdf;padding:12px;border-radius:12px}
#rank-list{list-style:none;padding:0;margin:0;max-height:42vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
#rank-list li{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--line);font-size:13px}
#rank-list b{width:32px;flex:none;color:var(--muted)}#rank-list span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rank-list strong{margin-left:8px;font-size:13px;color:var(--green)}#rank-retry,#result-rank{min-height:44px;color:var(--green);font-size:12px}
#rank-submit-status,#rank-save-status{font-size:10px;color:var(--muted)}
#hint-gate-dialog{width:330px;max-width:calc(100vw - 24px);border:1px solid var(--line);border-radius:24px;padding:24px;background:var(--cream);color:var(--ink);text-align:center}
#hint-gate-text{font-size:15px;line-height:1.8;margin:12px 0 22px}#hint-gate-action{width:100%}#hint-gate-cancel{min-height:44px;margin-top:8px;font-size:12px;color:var(--muted)}
@media(max-height:500px) and (min-width:600px){.win-content>*+*{margin-top:0;margin-left:28px}.rotate-row{display:flex}.hand-controls{display:block}.rotate-buttons{margin-top:6px}main{grid-gap:22px}header{padding-top:var(--native-top,0px)}}

@supports(padding:env(safe-area-inset-top)){
:root{--safe-area-inset-top:env(safe-area-inset-top,0px);--safe-area-inset-bottom:env(safe-area-inset-bottom,0px);--safe-area-inset-left:env(safe-area-inset-left,0px);--safe-area-inset-right:env(safe-area-inset-right,0px)}
}
@keyframes win-appear{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}

#toy-share-dialog{width:320px;max-width:calc(100vw - 24px);padding:22px;border:1px solid var(--line);border-radius:24px;background:var(--cream);color:var(--ink);text-align:center}
#toy-share-dialog h2{font-size:18px}#toy-share-dialog p,#toy-challenge{font-size:12px;line-height:1.8;color:var(--muted)}
#toy-share-qr{display:block;margin:14px auto;max-width:100%;height:auto}#toy-share-close{width:100%}