:root { color-scheme: light; font-family: Arial, "Noto Sans TC", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #173d32; color: #21342b; }
button, select { font: inherit; }
.word-trails { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; background: #f6efd8; }
.screen { min-height: 100vh; padding: 18px; position: relative; }
.hidden { display: none !important; }
.main-screen { text-align: center; background: linear-gradient(#eff9de, #f6efd8); }
.lobby-return, .back { width: 48px; height: 48px; border: 0; border-radius: 12px; background: #fff; color: #274b3c; display: inline-grid; place-items: center; text-decoration: none; font-size: 26px; box-shadow: 0 3px 10px #31462c33; }
.lobby-return { position: absolute; top: 16px; left: 16px; grid-template-columns: 1fr 1fr; font-size: 22px; }
.lobby-return img { width: 24px; height: 24px; object-fit: contain; }
.locale-row { display: flex; justify-content: flex-end; gap: 8px; align-items: center; min-height: 44px; font-weight: 700; }
select { border: 2px solid #527f69; border-radius: 9px; padding: 7px 10px; background: #fff; }
.cover { display: block; width: min(100%, 430px); aspect-ratio: 1; object-fit: cover; border-radius: 18px; margin: 10px auto 16px; box-shadow: 0 8px 24px #3c472b33; }
h1 { margin: 0; font-size: 32px; } .main-screen p { font-size: 17px; line-height: 1.5; }
.primary, .secondary { min-height: 48px; border: 0; border-radius: 12px; padding: 0 22px; font-weight: 800; cursor: pointer; }
.primary { background: #e5a72b; color: #342103; box-shadow: inset 0 -3px #ad671c; }.secondary { background: #fff; color: #254c3b; border: 2px solid #699b79; }
.guide { margin: 20px auto 0; max-width: 500px; padding: 14px; border-radius: 14px; background: #ffffffcc; text-align: left; }.guide h2 { margin: 0; font-size: 18px; }
.stage-screen { display: grid; grid-template-rows: 52px minmax(0, 1fr) 52px; gap: 12px; background: #eef7de; }.stage-screen header { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 58px; border-radius: 12px; background: #173d32e8; color: #fff; font-size: 19px; text-shadow: 0 1px 2px #0008; }.stage-screen .back { position: absolute; top: 18px; left: 18px; }
.stage-rail { display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory; padding: 24px calc(50% - 132px); align-items: center; touch-action: pan-x; }.stage-card { flex: 0 0 264px; height: 190px; scroll-snap-align: center; border: 3px solid #8aaf79; border-radius: 18px; background: #fffdf3; padding: 18px; text-align: left; cursor: pointer; }.stage-card.selected { border-color: #e5a72b; }.stage-card.is-centered { border-color:#ffe16a; box-shadow:0 0 0 4px #fff0a8,0 0 24px 9px #73e5a8cc; }.stage-card.locked { opacity: .55; }.stage-card.locked.is-centered { opacity:.78; }.stage-card strong { display: block; font-size: 24px; }.stage-card span { display: block; margin-top: 18px; }.stage-screen .primary { width: min(100%, 340px); margin: 0 auto; }
.stage-feedback { margin: 0; min-height: 52px; display: grid; place-items: center; padding: 4px 54px; border-radius: 12px; background: #173d32e8; color: #fff; text-align: center; text-shadow: 0 1px 2px #0008; font-weight: 800; }
.battle-shell { position: fixed; inset: 0; display: grid; place-items: end center; overflow: hidden; background: #173d32; padding: 0; color: #fff; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
.battle-canvas { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 52px 64px minmax(0, 1fr) 64px; background: #e8f4d4; color: #263a2f; border-radius: 16px; }
.battle-top { display: grid; grid-template-columns: 52px minmax(0, 1fr) 68px; align-items: center; padding: 0 10px; background: #315a46; color: #fff; }.battle-top .back { width: 38px; height: 38px; border-radius: 10px; font-size: 24px; }.battle-top strong { text-align: center; font-size: 17px; }.battle-top span { text-align: right; font-size: 15px; }
.objective { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #fff8df; font-weight: 800; font-size: 15px; gap: 8px; }.play-scene { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 8px; background-image: url('../../assets/animal-word-trails-forest-bg.webp'); background-size: cover; background-position: center; }.target-row { position:relative; z-index:2; min-height:46px; padding:6px 8px; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:4px 6px; overflow:visible; background:#e8f4d4; border-bottom:2px solid #315a46; }.target { background: #fffdf0; border: 2px solid #896d35; border-radius: 10px; padding: 4px 7px; font-size: 13px; font-weight: 800; line-height:1.15; white-space: nowrap; }.target.done { opacity: .55; text-decoration: line-through; }
.board { position:relative; z-index:1; width: min(100%, 450px); height: auto; max-height:100%; aspect-ratio: 9/10; place-self: center; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows:repeat(4,minmax(0,1fr)); gap: 2px; padding: 5px; border-radius: 16px; background: #315a46e8; touch-action: none; }.tile { position:relative; z-index:0; min-height:0; border: 0; border-radius: 10px; background-color: #315a46; background-image: url('../../assets/animal-word-trails-tile-frames-clean.webp'); background-position: 1.67% center; background-size: 580% auto; background-repeat: no-repeat; color: #203b31; font-size: 32px; font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 2px 0 #fff8d8, 0 0 5px #fff; cursor: pointer; }.tile.selected { z-index:1; background-position: 25.74% center; background-size:569% auto; color: #163a35; }.tile.correct { background-position: 50% center; background-size:540% auto; color: #314115; }.feedback { position:relative; z-index:2; min-height:32px; margin: 0; align-self: center; text-align: center; color: #fff; font-size: 14px; font-weight: 800; text-shadow: 0 1px 2px #122; }.actions { display: grid; grid-template-columns: 72px 72px 72px minmax(0, 1fr); gap: 8px; padding: 8px; background: #315a46; }.icon-action { border: 0; border-radius: 10px; color: #fff; background: #244635; font-size: 12px; font-weight: 800; display: grid; grid-template-columns: 26px 1fr; align-items: center; padding: 4px; }.icon { width: 24px; height: 24px; background-image: url('../../assets/animal-word-trails-ui-icons.webp'); background-size: 300% 200%; background-repeat: no-repeat; }.icon.hint { background-position: left top; }.icon.undo { background-position: 33.333% top; }.icon.clear { background-position: 66.67% top; }.compact { min-width: 0; }
.result-canvas { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; align-content: center; justify-items: center; gap: 12px; padding: 20px; border-radius: 16px; }
.result-screen { text-align: center; background: #eef7de; color: #263a2f; }.leo { width: min(58%, 260px); max-height: 44%; object-fit: contain; align-self: end; }.result-screen h2, .result-screen p { margin: 0; }.skill { font-weight: 800; }.result-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.result-screen button { width:100%; min-width:0; margin:0; white-space:nowrap; }
.tile.blocked{background-position:74.64% center;background-size:531% auto;color:#e8efec;text-shadow:0 1px 2px #101b18;cursor:not-allowed;opacity:.9}
.tile:focus{z-index:3;outline:5px solid #fff176;outline-offset:3px;box-shadow:0 0 0 3px #173d32}.result-screen button:focus{outline:4px solid #25776e;outline-offset:3px;box-shadow:0 0 0 3px #fff}
.word-trails[data-locale="zh-Hant"] .tile { background-image: url('../../assets/animal-word-trails-tile-frames-clean.webp'); }
.board{grid-template-columns:repeat(var(--grid-size,4),1fr);grid-template-rows:repeat(var(--grid-size,4),minmax(0,1fr))}
.play-scene[data-habitat="safari"] { background-image: url('../../assets/animal-word-trails-safari-bg.webp'); }
@media (min-width: 700px) { .word-trails { box-shadow: 0 0 40px #0005; } }
.mini{border:0;border-radius:8px;background:#315a46;color:#fff;padding:7px 9px;font-weight:800}.stage-screen header{padding-right:4px}.stage-screen header span{margin-left:auto}dialog{width:min(92vw,480px);border:0;border-radius:16px;background:#f6efd8;color:#263a2f;padding:18px;box-shadow:0 14px 50px #0008}dialog::backdrop{background:#173d32aa}dialog .back{float:right}#albumList{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}#albumList span{padding:12px;border-radius:10px;background:#fffdf3;font-weight:800}#albumList .locked{opacity:.45}
#albumList .card{min-height:76px;background-image:url('../../assets/animal-word-trails-clue-cards.webp');background-size:400% 300%;color:#fff;text-shadow:0 1px 3px #000;display:flex;align-items:end}
.play-scene { position: relative; }.clue-reveal { position:absolute; inset:8px; z-index:4; display:grid; place-items:center; align-content:center; gap:6px; overflow:hidden; border-radius:16px; background:#173d32ed; color:#fff; font-size:clamp(15px,4.5vmin,20px); text-align:center; pointer-events:none; }.clue-reveal i { width:clamp(56px,20vmin,128px); height:clamp(56px,20vmin,128px); background:url('../../assets/animal-word-trails-word-clear-fx.webp') left center / 400% 100% no-repeat; animation:clear-pop .45s ease-out; }.clue-reveal strong { max-width:100%; padding:7px 10px; border-radius:10px; background:#ffffff20; overflow-wrap:anywhere; }.clue-reveal.hidden { display:none !important; }@keyframes clear-pop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

/* Active play must never use a board's intrinsic width to widen the phone canvas. */
.stage-screen { grid-template-rows: 52px minmax(0, 1fr) 52px; }
.battle-canvas > *, .play-scene, .actions, .target-row { min-width: 0; }
.play-scene { min-width: 0; }
.board { width: min(100%, 450px); max-width: 100%; min-width: 0; height: auto; max-height: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile, .icon-action { min-width: 0; }
.target-row { position:relative; z-index:2; }
.target { flex: 0 0 auto; }
.icon-action { grid-template-columns: 26px minmax(0, 1fr); }
.icon-action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-card.locked { cursor: not-allowed; }
/* Shared Stage/Battle owners apply the one uniform scale; game-local children fill their responsive logical envelope. */
body.word-stage .stage-screen { padding:18px; overflow:hidden; }
.battle-slot { position:relative; width:100%; height:100%; }
body:is(.word-playing,.word-result) .battle-canvas { display:block; border-radius:16px; }
.battle-live { display:grid; grid-template-rows:52px 64px auto minmax(0,1fr) 64px; min-width:0; min-height:0; height:100%; }
.result-overlay { position:absolute; inset:0; z-index:5; box-sizing:border-box; width:100%; height:100%; min-width:0; min-height:0; max-width:none; max-height:none !important; overflow:hidden; display:grid; grid-template-rows:minmax(0,1fr) auto auto auto; align-content:center; justify-items:center; gap:12px; padding:20px; border-radius:16px; }
body.word-playing #resultPanel { height:100% !important; max-height:100% !important; }
.leave-confirm-overlay{position:absolute;inset:0;z-index:6;width:100%;height:100%;display:grid;place-items:center;padding:20px;border-radius:16px;background:#152d3bc2;backdrop-filter:blur(7px)}.leave-confirm-card{width:min(100%,350px);display:grid;gap:16px;padding:24px;border-radius:20px;background:#fff9e8;color:#253b48;text-align:center;box-shadow:0 22px 52px #071d2e80}.leave-confirm-card h2,.leave-confirm-card p{margin:0}.leave-confirm-card h2{font-size:27px}.leave-confirm-card p{font-size:16px;line-height:1.5;font-weight:700}.leave-confirm-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.leave-confirm-actions button{width:100%;min-width:0;padding-inline:10px}.leave-confirm-actions button:focus{outline:4px solid #173d56;outline-offset:3px;box-shadow:0 0 0 3px #fff}
#resultsBack { width:100% !important; max-width:none !important; }
body:is(.word-stage,.word-playing) :is(.sound-toggle,.weightplay-version-badge,.wp-tutorial-button) { display:none !important; }
body:is(.word-stage,.word-playing) .game-page-info { display:none !important; }
.battle-live.hidden, .result-overlay.hidden, .leave-confirm-overlay.hidden { display:none !important; }
body.word-playing .battle-top { grid-template-columns:52px minmax(0,1fr) 68px; padding:0 10px; }
body.word-playing .battle-top .back { width:38px; height:38px; border-radius:10px; font-size:24px; }
body.word-playing .battle-top strong { font-size:17px; }
body.word-playing .objective { min-height:64px; padding:0 14px; font-size:15px; }
body.word-playing .play-scene { grid-template-rows:minmax(0,1fr) auto; padding:8px; }
body.word-playing .target { padding:5px 8px; font-size:13px; }
body.word-playing .board { width:min(100%,450px); gap:2px; padding:5px; border-radius:16px; }
body.word-playing .tile { border-radius:12px; font-size:32px; }
body.word-playing .feedback { font-size:14px; }
body.word-playing .actions { grid-template-columns:72px 72px 72px minmax(0,1fr); gap:8px; padding:8px; }
body.word-playing .icon-action { font-size:12px; grid-template-columns:26px minmax(0,1fr); }
body.word-playing .icon { width:24px; height:24px; }
body.word-playing .compact { min-height:48px; padding:0 22px; font-size:inherit; }
@media (max-height:760px){body.word-playing .board{width:min(100%,390px)}}
@media (max-height:560px) and (orientation:landscape){body.word-playing .target-row{min-height:34px}.clue-reveal{inset:4px;gap:3px}.clue-reveal i{width:54px;height:54px}.feedback{min-height:24px;font-size:12px!important;line-height:1.15}body.word-playing .board{width:min(100%,243px)}}