*{box-sizing:border-box} :root{--ink:#343a32;--paper:#fff1c6;--green:#a9d980;--darkgreen:#526e58;--gold:#e5be72;--orange:#d99462;--line:#39453b}body{margin:0;color:var(--ink);font:14px/1.65 'Microsoft YaHei','PingFang SC',sans-serif;background-color:#d79c70;background-image:conic-gradient(#e8b78b 25%,transparent 0 50%,#e8b78b 0 75%,transparent 0);background-size:100px 100px}button,input{font:inherit}button{color:#53472f;background:#ead08e;border:3px solid #40473a;padding:8px 14px;cursor:pointer;box-shadow:inset 0 3px #fff2bc,inset 0 -4px #c39658,3px 4px 0 #735b43;transition:filter .12s,transform .12s}button:hover{filter:brightness(1.09)}button:active{transform:translate(2px,2px);box-shadow:inset 0 2px #c39658,1px 2px #735b43}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #286b85;outline-offset:4px}button small{display:block;font-size:11px;letter-spacing:1px;opacity:.75;font-weight:normal;margin-top:2px}h1,h2,h3,p{margin-top:0}h1{line-height:1.3}small{font-size:11px}img,canvas{image-rendering:pixelated}[hidden]{display:none!important}.screen{display:none}.screen.active{display:block}.journal{position:relative;background:#a6d983;border:4px solid #35463b;box-shadow:inset 0 0 0 5px #d1eea3,inset 12px 0 #80b980,8px 9px 0 #8b684d;padding:32px 36px 26px}.journal:after{content:'';position:absolute;bottom:-12px;left:8px;right:8px;height:8px;background:repeating-linear-gradient(#eef5cd 0 2px,#7dacab 2px 3px);border:2px solid #3d5144;z-index:-1}.ribbon{background:#567e77;color:#f7ffde;text-align:center;border:3px solid #364b40;box-shadow:inset 0 3px #96c6ae,0 4px #7ca96d;padding:9px 14px;font-weight:bold;letter-spacing:4px;font-size:17px;text-shadow:2px 2px #3c5a54}.home{max-width:1500px;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,.85fr);align-items:center;gap:36px;margin:auto;padding:50px}.cover-frame{position:relative;border:5px solid #364339;box-shadow:inset 0 0 0 3px #f5e4a1,8px 9px #916847;background:#3a4c3a;padding:5px;transform:rotate(-1deg)}#cover{display:block;width:100%;height:auto}.cover-stamp{position:absolute;left:24px;bottom:26px;background:#344b3dd9;color:#fff1c6;font-size:11px;letter-spacing:4px;padding:8px 14px;border:2px solid #c7d096}.home-journal{padding:28px 25px 20px}.binding{position:absolute;left:-16px;top:100px;bottom:40px;width:28px;background:repeating-linear-gradient(transparent 0 40px,#35483b 40px 44px,#e4f3df 44px 52px,#7cabac 52px 56px,#35483b 56px 59px,transparent 59px 75px)}.menu-title{font-size:44px;letter-spacing:5px;text-align:center;color:#3d5648;text-shadow:2px 3px #e3f1ad;margin:22px 0 14px;font-weight:900}.title-ornament{text-align:center;margin-top:25px;color:#607d53;font-size:11px;letter-spacing:3px}.home-journal .menu-title{margin-top:8px}.menu-sub{text-align:center;font-size:13px;line-height:1.9;color:#536c4a;margin:0 0 12px}.menu-nav{display:flex;flex-direction:column;gap:15px;width:100%;max-width:390px;margin:22px auto 0}.menu-nav button{display:flex;justify-content:center;align-items:center;gap:16px;font-weight:bold;font-size:19px;letter-spacing:2px;min-height:68px;background-color:#d7ab71;background-image:conic-gradient(#ddb980 25%,transparent 0 50%,#ddb980 0 75%,transparent 0);background-size:18px 18px;border:3px solid #45503d;box-shadow:inset 0 0 0 4px #f7e6a2,inset 0 -7px #b38350,4px 5px #62895e;color:#fff8d9;text-shadow:2px 2px #9f744c;padding:12px}.menu-nav .icon{flex:0 0 48px;background:#f5e7a2;border:2px solid #9b7c45;padding:3px;color:#4b6a55;font-size:29px;text-shadow:1px 2px #fff4cf}.menu-nav .back{background:#779d71;color:#f1f5cc;text-shadow:none;min-height:42px;font-size:13px;box-shadow:inset 0 2px #b7dc92,3px 4px #65825b}.asset-status{display:block;text-align:center;margin-top:20px;color:#526c4f;font-size:10px;letter-spacing:2px}.menu-wrap{max-width:520px;margin:6vh auto;padding:30px 38px}.menu-wrap.wide{max-width:700px}.rules-text{background:#fff2cc;border:3px solid #8c9a65;padding:20px 24px;max-height:53vh;overflow:auto;text-align:left;font-size:13px;box-shadow:inset 0 0 0 3px #f4dca6}.rules-text h3{font-size:16px;margin:18px 0 5px;color:#765430}.rules-text h3:first-child{margin-top:0}.settings-content{width:100%}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#eff0b9;border:2px solid #7e9d6b;padding:12px 16px;margin:10px 0}.setting-row button{min-width:75px}.setting-row input{width:54%;accent-color:#527d66}.music-library{background:#fff0c5;border:3px solid #8d9f6b;padding:16px;margin:12px 0}.music-library h3{margin:0 0 5px;font-size:16px}.music-library p{font-size:12px;margin:6px 0}.music-library small{color:#6f775c}.button-row{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}.button-row button{font-size:12px;padding:7px 10px}#music-status{padding:8px;background:#e7e5af;overflow-wrap:anywhere}.previews{justify-content:center}.previews button{flex:1}
main{max-width:1430px;margin:auto;padding:26px 32px 20px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px;padding:14px 18px;background:#a9d983;border:4px solid #384a3d;box-shadow:inset 0 0 0 3px #d4efa5,5px 5px #a47750}.brand{display:flex;align-items:center;gap:14px}.mark{background:#f0d893;border:3px solid #4e5f43;box-shadow:inset 0 0 0 3px #fff0bc;color:#775333;font-size:27px;font-weight:bold;line-height:1;padding:12px}.brand small{font-size:10px;letter-spacing:4px;color:#58724d}.brand h1{font-size:28px;letter-spacing:4px;margin:2px 0 0;color:#3b5544;text-shadow:2px 2px #e2f0aa}.brand h1 span{display:block;font-size:11px;font-weight:normal;letter-spacing:2px;margin-top:5px;text-shadow:none}.edition{display:flex;align-items:center;gap:10px;font-size:12px;color:#486644}.edition b{font-size:10px;background:#eef2b5;padding:3px 7px;border:2px solid #78965e}.edition button{background:#b96051;color:#fff2cf;box-shadow:inset 0 3px #e58b74,inset 0 -3px #914b43,3px 3px #718557;font-size:12px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:22px}.arena{border:4px solid #35473b;background:#f3e2b2;box-shadow:6px 7px #926b49}.arena-top{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#587d70;color:#f9f6ce;border-bottom:4px solid #394f42;padding:11px 15px;font-size:12px;box-shadow:inset 0 3px #95b894}.arena-top>span:first-child{letter-spacing:2px;font-weight:bold}.quiet{background:transparent;box-shadow:none;border-color:transparent;font-size:11px;padding:3px 6px}.arena-top .quiet{color:#f9f6ce}.stage{position:relative;background:#a7b862}#board{display:block;width:100%;height:auto;cursor:pointer;touch-action:manipulation}.message{display:flex;align-items:center;gap:16px;padding:14px 19px;border-top:4px solid #526c46;background:#f8ebc0;min-height:83px}.message strong{font-size:16px;letter-spacing:1px;color:#4d6245}.message p{font-size:12px;margin:3px 0 0;color:#7b785a}#message-icon{color:#b08c44;font-size:27px}.bottom-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:#d6db99;border-top:2px solid #bdc689}.bottom-bar>span{font-size:10px;color:#667550}.bottom-bar button{font-size:12px;padding:5px 9px;margin-left:6px}.field-journal{background:#a9d984;border:4px solid #394a3c;padding:12px;box-shadow:inset 0 0 0 3px #d6efa9,5px 6px #936d4a;display:grid;gap:13px}.field-journal>.ribbon{font-size:15px;padding:6px}.panel{background:#fff1c9;border:3px solid #80916a;padding:15px;box-shadow:inset 0 0 0 2px #f9dda2,2px 3px #7ca76a}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:3px;color:#73815f;border-bottom:2px dashed #d7cf9d;padding-bottom:7px}.turn-title{display:flex;align-items:center;gap:6px;margin:9px 0 0;position:relative}.turn-title canvas{width:76px;height:76px;margin-left:-8px}.turn-title h2{font-size:21px;letter-spacing:2px;color:#755b34;margin:0}.turn-title span{font-size:10px;color:#8c8865}#side-symbol{position:absolute;right:-3px;top:0;background:#8cab77;border:2px solid #617951;padding:0 4px;color:#fff4c6;font-size:10px}#human-controls{margin-top:10px;border-top:2px dashed #d9d09c;padding-top:10px;font-size:12px}.segmented{display:flex;gap:9px;margin:7px 0}.segmented button{flex:1;padding:4px}.segmented button.active{background:#82ac80;color:#fffcd5;box-shadow:inset 0 2px #b6d99b,2px 3px #6c8555}#cooldown{font-size:10px;color:#817857}.stat{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.stat>span{font-size:12px;color:#67704e}.stat strong{font-size:26px;color:#986a35;line-height:1.2}.stat em{font-size:12px;font-style:normal;color:#92916b;font-weight:normal}.stat.compact strong{font-size:19px}.fangs{display:flex;gap:7px;margin:12px 0 15px}.fangs i{height:19px;flex:1;background:#e0d7a9;border:2px solid #a7a27b;clip-path:polygon(0 0,100% 0,100% 60%,65% 100%,0 100%)}.fangs i.on{background:#cc9151;border-color:#936437}.divider{height:2px;background:#e0d7ad;margin:13px 0}.hunger-bar{display:flex;gap:3px;margin:10px 0 3px}.hunger-bar i{height:10px;flex:1;background:#ddd9b0;border-bottom:2px solid #bbb891}.hunger-bar i.on{background:#83a975;border-color:#658459}.hunger-bar.danger i.on{background:#c67a4f}.muted{font-size:10px;color:#92916c}.last-move{font-size:11px;color:#78815e;background:#ece6b9;padding:7px 9px;margin:12px 0 0;border-left:3px solid #9fb17c}.rules p{font-size:11px;line-height:1.9;color:#7d7b59;margin:9px 0}.rules b{color:#647a51}.win-rule{background:#ece4b6;padding:8px;font-size:11px;line-height:2;color:#787354}.win-rule b{margin-right:8px}summary{font-size:11px;color:#7d835f;cursor:pointer;margin-top:8px}footer{display:flex;justify-content:space-between;gap:20px;color:#805f45;font-size:10px;letter-spacing:1px;padding-top:19px}#outcome{position:absolute;inset:0;background:#2b483e94;display:flex;align-items:center;justify-content:center;padding:20px}.result{max-width:430px;text-align:center;background:#fff0c6;border:5px solid #3c5340;box-shadow:inset 0 0 0 5px #d8c18a,8px 8px #294b3e;padding:30px;color:#6b5f3d}.result-medal{font-size:45px;line-height:1.3;color:#b58a38;text-shadow:3px 3px #efd894}.result small{color:#9a854d;letter-spacing:4px}.result h2{font-size:28px;letter-spacing:3px;margin:8px 0}.result p{font-size:13px}.result button{margin:8px 4px 0}.result .quiet{color:#7e744d}
@media(min-width:1500px){main{padding-top:34px}.home{gap:50px}}@media(max-width:1100px){.home{padding:30px;gap:25px;grid-template-columns:1.15fr 1fr}.home-journal{padding:20px}.menu-title{font-size:35px}.layout{grid-template-columns:minmax(0,1fr) 285px;gap:16px}main{padding:18px}.panel{padding:12px}.bottom-bar{flex-wrap:wrap}.edition{flex-wrap:wrap;justify-content:flex-end}.menu-nav button{font-size:16px}}@media(max-width:760px){.home{display:flex;flex-direction:column;padding:24px 20px;gap:23px}.cover-frame{width:100%;max-width:560px;transform:none}.home-journal{width:100%;max-width:560px;padding:22px 30px}.menu-title{font-size:35px}.menu-nav{gap:12px;margin-top:18px}.menu-nav button{min-height:58px}.cover-stamp{font-size:9px;bottom:17px;left:15px}.menu-wrap{margin:22px 18px;max-width:none;padding:22px}.menu-wrap.wide{max-width:none}.ribbon{font-size:14px;letter-spacing:2px}main{padding:12px 10px}.layout{grid-template-columns:1fr}.brand h1{font-size:22px}.brand{gap:9px}.brand small{font-size:8px;letter-spacing:2px}.mark{font-size:22px;padding:8px}header{padding:12px;gap:10px;margin-bottom:17px}.edition{max-width:135px;gap:6px}.edition b{display:none}.edition button{padding:4px 7px;font-size:10px}.edition>span{font-size:10px}.field-journal{grid-template-columns:1fr 1fr;gap:10px;padding:10px}.field-journal>.ribbon,.field-journal>.rules{grid-column:1/-1}.panel{padding:10px}.turn-title{flex-wrap:wrap}.turn-title h2{font-size:18px}.turn-title canvas{width:64px;height:64px}.turn-title span{font-size:9px}.arena-top{font-size:10px;padding:7px 10px}.arena-top .quiet{font-size:10px}.message{padding:10px 12px;gap:10px;min-height:76px}.message strong{font-size:14px}.message p{font-size:11px}.bottom-bar{padding:10px}.bottom-bar button{font-size:11px}.bottom-bar>span{font-size:9px}.rules p{font-size:12px}.result{padding:23px 16px}.result h2{font-size:23px}.rules-text{padding:17px;max-height:none}footer{font-size:8px}.settings-content .button-row button{flex:1}.music-library small{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(min-width:1101px){main{max-width:min(1430px,calc((100vh - 315px)*1.142857 + 402px));padding-top:18px;padding-bottom:10px}header{padding:10px 14px;margin-bottom:16px}.layout{grid-template-columns:minmax(0,1fr) 285px;gap:18px}.panel{padding:12px}.field-journal{gap:10px;padding:10px}.message{min-height:73px;padding:10px 14px}.bottom-bar{padding:9px 12px}.bottom-bar>span{display:none}.bottom-bar>div{margin-left:auto}.rules p{font-size:11px}.arena-top{padding:8px 10px}}

/* Full-screen illustrated title screen. Scoped to the home screen only. */
#screen-menu{background:#243c32}
#screen-menu .home{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%;max-width:none;min-height:100svh;gap:24px;padding:clamp(24px,5vh,64px) 24px 16px;overflow:hidden}
#screen-menu .cover-frame{position:absolute;inset:0;z-index:-2;width:100%;max-width:none;height:100%;padding:0;border:0;box-shadow:none;transform:none;background:#243c32}
#screen-menu #cover{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
#screen-menu .home:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(19,42,32,.28),transparent 30%,transparent 52%,rgba(18,38,29,.38) 76%,rgba(18,38,29,.91))}
#screen-menu .home:after{content:'';position:absolute;inset:10px;pointer-events:none;border:1px solid #f3e6ac70;box-shadow:0 0 0 3px #253d3440;z-index:-1}
#screen-menu .home-heading{text-align:center;flex:none}
#screen-menu .title-ornament{margin:0 0 8px;font-size:11px;color:#fff1c4;letter-spacing:5px;text-shadow:1px 2px #294136}
#screen-menu .menu-title{margin:0;font-size:clamp(48px,6vw,86px);line-height:1.15;font-weight:900;letter-spacing:clamp(6px,1vw,16px);padding-left:16px;color:#fff0b8;text-shadow:3px 0 #344c35,-3px 0 #344c35,0 -3px #344c35,0 3px #344c35,5px 6px #344c35,7px 8px #152f2c60}
#screen-menu .home-english{font-size:clamp(10px,1vw,14px);letter-spacing:6px;color:#fff1c6;text-shadow:1px 2px #213d31;margin:16px 0 0}
#screen-menu .home-journal{width:min(660px,100%);max-width:none;padding:0;margin-top:clamp(180px,28vh,430px);flex:none}
#screen-menu .menu-nav{display:grid;grid-template-columns:1fr 1fr;max-width:none;gap:12px 18px;margin:0}
#screen-menu .menu-nav button{justify-content:flex-start;min-height:78px;padding:9px 16px;gap:15px;font-size:20px;letter-spacing:2px;border:2px solid #394a35;box-shadow:inset 0 0 0 3px #f4dfa0,inset 0 -6px #ad8050,3px 4px #172e2ac9;text-align:left}
#screen-menu .menu-nav .icon{display:grid;place-items:center;flex:0 0 46px;height:48px;font-size:28px;line-height:1}
#screen-menu .menu-nav small{letter-spacing:1px;font-size:11px;color:#fff6d1;opacity:.9}
#screen-menu #btn-start{background-color:#e3bd79;background-image:conic-gradient(#edcc8d 25%,transparent 0 50%,#edcc8d 0 75%,transparent 0);color:#374c37;text-shadow:1px 1px #fff0bd}
#screen-menu #btn-start small{color:#5d633d}
#screen-menu #btn-exit{background:#63836b;box-shadow:inset 0 0 0 3px #91a880,inset 0 -6px #405f50,3px 4px #172e2ac9;color:#f9edc4;text-shadow:1px 2px #405f50}
#screen-menu #btn-exit .icon{background:#9bab7c;border-color:#405f50;color:#f9edc4;text-shadow:none}
#screen-menu .menu-nav button:hover{filter:brightness(1.12);transform:translateY(-2px)}
#screen-menu .menu-nav button:active{transform:translate(2px,2px)}
#screen-menu .menu-nav button:focus-visible{outline:3px solid #fff2ae;outline-offset:5px}
#screen-menu .asset-status{color:#dce6bb;margin:14px 0 0;font-size:10px;letter-spacing:2px}
@media(max-width:600px){#screen-menu .home{padding:36px 22px 18px;gap:18px}#screen-menu #cover{object-position:57% center}#screen-menu .home-heading .menu-title{font-size:48px;letter-spacing:8px;padding-left:8px}#screen-menu .title-ornament{font-size:9px;letter-spacing:3px}#screen-menu .home-english{font-size:9px;letter-spacing:4px}#screen-menu .home-journal{margin-top:250px}#screen-menu .menu-nav{gap:10px}#screen-menu .menu-nav button{min-height:72px;padding:8px;gap:7px;font-size:16px;letter-spacing:0}#screen-menu .menu-nav .icon{flex-basis:30px;height:38px;font-size:23px}#screen-menu .menu-nav small{font-size:9px;letter-spacing:0}}
@media(max-height:650px) and (min-width:601px){#screen-menu .home{padding-top:20px;gap:18px}#screen-menu .menu-title{font-size:52px}#screen-menu .home-english{margin-top:8px}#screen-menu .home-journal{margin-top:140px;width:600px}#screen-menu .menu-nav button{min-height:62px;font-size:18px;padding:6px 12px}#screen-menu .menu-nav .icon{height:40px;flex-basis:40px}}
#screen-menu .cover-idle{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 52%;opacity:0;pointer-events:none;image-rendering:pixelated}
#screen-menu .cover-idle.ready{opacity:1}
@media(max-width:600px){#screen-menu .cover-idle{object-position:57% center}}

/* Exhibit adaptation: fit the whole playable board and its controls inside short desktop frames. */
.audio-actions{display:flex;align-items:center;gap:4px;flex:none}
.audio-actions .quiet{white-space:nowrap;font-size:10px}
.mobile-human-controls{display:none}
#board:focus-visible{outline:3px solid #286b85;outline-offset:-4px}
@media(min-width:761px){
  #screen-game main{width:min(100%,calc((100dvh - 255px)*1.142857 + 292px));max-width:1250px;padding:10px 12px 8px}
  #screen-game header{padding:7px 10px;margin-bottom:8px;gap:10px}
  #screen-game .brand{gap:9px}
  #screen-game .brand .mark{font-size:22px;padding:7px}
  #screen-game .brand small{font-size:8px;letter-spacing:2px}
  #screen-game .brand h1{font-size:22px;letter-spacing:2px}
  #screen-game .brand h1 span{display:none}
  #screen-game .edition{gap:7px;font-size:10px;max-width:145px}
  #screen-game .edition b{display:none}
  #screen-game .edition button{font-size:10px;padding:5px 7px}
  #screen-game .layout{grid-template-columns:minmax(0,1fr) 258px;gap:12px}
  #screen-game .arena-top{padding:5px 8px;font-size:10px;gap:6px}
  #screen-game .arena-top>span:first-child{display:none}
  #screen-game .message{padding:6px 9px;min-height:50px;gap:8px}
  #screen-game .message strong{font-size:12px;letter-spacing:0}
  #screen-game .message p{font-size:10px;line-height:1.4}
  #screen-game #message-icon{font-size:20px}
  #screen-game .bottom-bar{padding:6px 8px;gap:5px}
  #screen-game .bottom-bar>span{display:none}
  #screen-game .bottom-bar>div{margin-left:auto}
  #screen-game .bottom-bar button{font-size:10px;padding:4px 7px}
  #screen-game .field-journal{max-height:calc(100dvh - 105px);overflow-y:auto;overscroll-behavior:contain;padding:8px;gap:8px}
  #screen-game .field-journal>.ribbon{font-size:12px;padding:4px;letter-spacing:2px}
  #screen-game .field-journal .panel{padding:9px}
  #screen-game .field-journal .turn-title canvas{width:58px;height:58px}
  #screen-game .field-journal .turn-title h2{font-size:18px}
  #screen-game .field-journal .eyebrow{font-size:10px;letter-spacing:2px}
  #screen-game footer{font-size:8px;padding-top:7px;gap:10px}
}
@media(max-width:760px){
  #screen-game header{padding:8px;gap:7px;margin-bottom:10px}
  #screen-game .brand h1{font-size:20px;letter-spacing:2px}
  #screen-game .brand h1 span{display:none}
  #screen-game .arena-top{gap:5px}
  #screen-game .arena-top>span:first-child{display:none}
  #screen-game .arena-top #round{flex:1}
  #screen-game .bottom-bar{padding:8px;gap:7px;align-items:center}
  #screen-game .bottom-bar>span{display:none}
  #screen-game .bottom-bar>div:last-child{margin-left:auto;display:flex;gap:5px}
  #screen-game .bottom-bar button{padding:5px 7px;margin-left:0;min-height:34px}
  #screen-game .mobile-human-controls{display:flex;align-items:center;gap:5px;font-size:10px}
  #screen-game .mobile-human-controls button.active{background:#82ac80;color:#fffcd5}
  #screen-game .message{min-height:62px;padding:8px 10px}
  #screen-game .message strong{font-size:13px}
  #screen-game .field-journal{margin-top:0}
  #screen-game .field-journal .turn-title h2{font-size:16px}
  .settings-content .setting-row{gap:10px;padding:10px}
  .settings-content .setting-row input{min-width:0}
  .music-library{padding:12px}
}
@media(min-width:761px) and (max-height:650px){#screen-game footer{display:none}#screen-game .field-journal{max-height:calc(100dvh - 120px)}}