/* Muted timber framing: visible at normal brightness, quiet behind text. */
body {
 background-color:#142b21;
 background-image:url('./assets/timber.svg');
 background-size:480px 640px;
}
#site-sidebar {
 border-right:7px solid #78623f;
 background-image:linear-gradient(90deg,#142a2166,#20392b44),url('./assets/timber.svg');
 box-shadow:inset -2px 0 #d5bc7d88,inset -5px 0 #382e22,7px 0 18px #071b1559;
}
#site-footer {
 border-top:7px solid #78623f;
 background-image:linear-gradient(#172e2377,#172e2355),url('./assets/timber.svg');
 box-shadow:inset 0 2px #d5bc7d88,inset 0 5px #382e22,0 -6px 18px #071b1540;
}
.panel,.game-card,.game-area,.auth-panel {
 background-image:linear-gradient(#193326b3,#193326b3),url('./assets/timber.svg');
}
.hedge-online .forest-board {
 background-image:linear-gradient(#233d2e22,#263b2d44),url('./games/hedgehogs/assets/forest-floor.svg');
 border:5px solid #897349;
 box-shadow:inset 0 0 0 2px #d2bb7c66,inset 0 0 28px #12271d77,0 5px 12px #0c1d1759;
 padding-top:26px;
}
/* Bridges share the clearing's coordinate system with the stream. */
.hedge-online .track:after {display:none}
.hedge-online .lane:after {
 content:'';position:absolute;left:calc(36% - 8px);width:140px;top:10px;bottom:4px;
 background:repeating-linear-gradient(90deg,#a88a57 0 10px,#514a30 10px 12px,#baa16b 12px 23px,#514a30 23px 25px);
 border-block:3px solid #d0b482;border-radius:4px;box-shadow:0 3px 4px #14291b80;
 z-index:-1;pointer-events:none;
}
.hedge-online .race-finish {right:0;top:0;bottom:15px;width:30px}
.hedge-online .finish-ribbon {width:18px;left:3px;background-size:18px 18px;box-shadow:3px 1px 4px #10241c99}
.hedge-online .finish-caption {top:-22px;right:-3px;font-size:9px;padding:4px 7px;letter-spacing:1.2px}
.hedge-online .mark-bonus,.hedge-online .mark-random {width:27px;height:30px}
@media(max-width:900px) {
 #mobile-header {border-bottom:4px solid #897349;box-shadow:inset 0 -1px #d5bc7d77}
}
@media(max-width:620px) {
 .hedge-online .forest-board {padding-top:26px}
 .hedge-online .lane:after {width:125px;left:calc(36% - 5px)}
}

/* Match both native scrollbar implementations to the green table. */
:root {color-scheme:dark}
* {scrollbar-color:#7f8960 #20382a;scrollbar-width:thin}
::-webkit-scrollbar {width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner {background:#20382a}
::-webkit-scrollbar-thumb {background:#7f8960;border:2px solid #20382a;border-radius:8px}
::-webkit-scrollbar-thumb:hover {background:#a0aa7b}
.board-scroll {background-color:#20382a;border-radius:8px}
.primary,.secondary {min-height:34px;padding:7px 12px}
#site-sidebar .primary-nav a {min-height:35px;padding-block:7px}
@media(min-width:761px) {
 .mouse-sidebar .mouse-tools button {min-height:35px;padding-block:6px}
}
@media(max-width:620px) {
 .primary,.secondary {min-height:42px;padding-block:7px}
}

@media(min-width:621px) {
 .heading-actions button {min-height:32px;padding:6px 10px}
}

/* A wider page must not make the apartment taller than the viewport. */
@media(min-width:761px) {
 .mice-game .mice-table {grid-template-columns:minmax(0,var(--mouse-field-width,1fr)) 280px;justify-content:start}
}
@media(min-width:761px) and (max-width:1050px) {
 .mice-game .mice-table {grid-template-columns:minmax(0,var(--mouse-field-width,1fr)) 245px}
}
.mice-game .mouse-board-wrap {box-sizing:border-box;max-width:100%;width:var(--mouse-field-width,100%)}
.mice-game .mouse-board {box-sizing:border-box;min-width:0;width:100%;aspect-ratio:var(--cols)/var(--rows);grid-template-rows:repeat(var(--rows),minmax(0,1fr))}
.mice-game .mouse-cell {min-height:0;min-width:0;aspect-ratio:auto}
.reversi-table {max-width:var(--fitted-board-width,510px)}
@media(max-width:760px) {
 .mice-game .mouse-board-wrap {width:100%;margin-inline:0}
}

@media(min-width:1151px){
 .network-layout.mice-layout{grid-template-columns:minmax(0,1fr) 270px}
 .mice-layout>.room-sidebar{display:block}
}
.room-sidebar .game-heading{display:block;padding:0 0 16px}
.room-sidebar .game-heading h1{font-size:21px}
.room-sidebar .heading-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.cat-memory-token{position:absolute;z-index:5;pointer-events:none;opacity:.42;filter:grayscale(1)}
.cat-memory-token b{position:absolute;bottom:0;right:0;background:#142b21;color:#fff;padding:2px;border-radius:4px;font-size:10px}

/* Keep auxiliary content on the right despite game-specific stylesheet order. */
main#app .network-layout[data-tools=inline]{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:start}
main#app .network-layout>.room-sidebar{display:block;min-width:0}
main#app .network-layout[data-tools=inline]>.room-sidebar{position:sticky;top:14px;max-height:calc(100dvh - 28px);overflow:auto}
.table-tools-toggle{display:none}
main#app .network-layout[data-tools=drawer]{display:block}
main#app .network-layout[data-tools=drawer]>.room-sidebar{display:none;position:fixed;right:58px;top:14px;bottom:14px;width:min(330px,calc(100vw - 78px));max-height:calc(100dvh - 28px);overflow:auto;z-index:65;background:#172f24;box-shadow:-8px 0 30px #07191099}
main#app .network-layout[data-tools=drawer]>.room-sidebar[data-open=true]{display:block}
main#app .network-layout[data-tools=drawer]>.table-tools-toggle{display:block;position:fixed;right:10px;top:76px;width:42px;min-height:44px;padding:4px;z-index:66;font-weight:bold}
.room-sidebar .journal{margin-top:16px}

.table-tools-toggle{border-radius:22px!important;box-shadow:0 4px 16px #06191099;transition:background .18s,box-shadow .18s}
main#app .network-layout[data-tools=drawer]>.table-tools-toggle{top:48%;opacity:.9}
@media(max-width:900px){
 .menu-toggle{position:fixed;left:8px;top:48%;z-index:64;border-radius:22px;box-shadow:0 4px 16px #06191099;font-size:0;opacity:.9}
 .menu-toggle:after{content:'>>';font-size:16px;font-weight:bold}
 body[data-menu=open] .menu-toggle:after{content:'<<'}
 #mobile-header{padding-left:16px}
}
@media(prefers-reduced-motion:no-preference){
 main#app .network-layout[data-tools=drawer]>.room-sidebar[data-open=true]{animation:table-panel-in .18s ease-out}
 @keyframes table-panel-in{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
}

.game-title-mouse{display:inline-block;width:32px;height:36px;vertical-align:middle}
.game-title-mouse .game-sprite{display:block;width:100%;height:100%}
.mice-game .mouse-board{touch-action:none}

.mouse-token .game-sprite{transform:rotate(var(--mouse-facing,0deg))}
.mouse-actions-toggle{display:none}
.mouse-sidebar .apartment-note{display:grid;gap:5px;padding:10px;border:1px solid #63754b66;border-radius:8px}
@media(max-width:760px),(max-height:500px){
 main#app .mice-game .mice-table{display:block}
 .mice-game .mouse-sidebar{display:none;position:fixed;inset:12px 12px 68px auto;width:min(340px,calc(100vw - 24px));overflow:auto;max-height:calc(100dvh - 80px);background:#172f24;padding:12px;border:1px solid #9e9866;border-radius:12px;z-index:72;box-shadow:0 6px 30px #0009}
 .mice-game .mouse-sidebar[data-open=true]{display:grid}
 .mice-game .mouse-actions-toggle{display:block;position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:73;min-height:44px;box-shadow:0 4px 20px #0008}
 .mice-game .mouse-board-wrap{width:min(100%,var(--mouse-field-width,100%));margin:0}
}

.lobby-mice-art{position:relative;width:min(100%,360px);height:155px;overflow:hidden;border:1px solid #71805b66;border-radius:12px;flex-shrink:0}
@media(max-width:620px){.lobby-mice-art{width:min(100%,280px);height:145px}.lobby-mice-art .art-cat{width:100px;height:100px;right:15%;top:14px}.lobby-mice-art .art-mouse{width:36px;height:60px;left:18%;bottom:12px}.lobby-mice-art .art-cheese{width:43px;height:46px;left:39%;bottom:18px}}

.extra-cat-token{position:absolute;z-index:7;pointer-events:none;padding:2px;box-sizing:border-box}.extra-cat-token .game-sprite{transform:rotate(var(--head))}

/* Mobile actions stay visible below the board. */
@media(max-width:760px){
 main#app .mice-game .mouse-sidebar,main#app .mice-game .mouse-sidebar[data-open=true]{display:grid;position:static;inset:auto;width:100%;max-height:none;overflow:visible;order:0;padding:8px 0 0;border:0;background:none;box-shadow:none;gap:6px}
 main#app .mice-game .mouse-actions-toggle{display:none}
 .mice-game .mouse-sidebar .apartment-note,.mice-game .mouse-sidebar .cat-status-head,.mice-game .mouse-sidebar .cat-description,.mice-game .mini-room-label,.mice-game .mice-round>span:first-child,.mice-game .mice-round>span:last-child{display:none}
 .mice-game .mouse-sidebar .cat-panel{display:block;padding:7px 10px}
 .mice-game .cat-current-state{margin:0;padding:0;border:0}
 .mice-game .cat-current-state p{margin:3px 0 0}
 .mice-game .mouse-sidebar .mouse-controls{padding:8px}
 .mice-game .mouse-sidebar .mouse-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .mice-game .mouse-sidebar .mouse-tools button{min-height:40px;padding:6px 4px;font-size:10px}
 .mice-game .mouse-sidebar .mouse-tools [data-game=end]{grid-column:auto}
 .mice-game .mouse-sidebar .mouse-card{display:block;padding:8px}
 .mice-game .mouse-sidebar .mouse-card button{margin-top:6px}
 .mice-game .mice-round{margin-bottom:6px}
 body:has(.mice-game) #site-footer{display:none}
 body:has(.mice-game) main#app{padding-bottom:70px}
}
@media(max-width:900px){
 .menu-toggle{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;width:40px;height:40px;min-width:40px;min-height:40px;padding:4px}
 main#app .network-layout[data-tools=drawer]>.table-tools-toggle{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));right:12px;width:40px;height:40px;min-height:40px;padding:4px}
 .menu-toggle:after{font-size:13px}
 .table-tools-toggle{font-size:13px}
}

.ui-scale-controls{display:flex;align-items:center;gap:5px;margin-top:16px;padding:10px 0;border-top:1px solid #62714c66;flex-wrap:wrap}
.ui-scale-controls>span{flex-basis:100%;font-size:11px;color:#bdc9ae}
.ui-scale-controls button{min-width:40px;min-height:36px;padding:4px}
main#app .network-layout[data-tools=drawer]>.room-sidebar[data-open=true]{animation:none}
@media(max-width:760px){
 main#app .hedge-online .lane{margin-bottom:5px;padding-top:2px;gap:6px}
 main#app .hedge-online .cell{height:28px}
 main#app .hedge-online .lane-info{width:65px;padding:3px 2px}
 main#app .hedge-online .lane-info b{font-size:9px}
 main#app .hedge-online .lane-info small{font-size:9px;margin:2px 0 0}
 main#app .hedge-online .forest-board{padding-top:20px}
 main#app .hedge-online .private-goal{padding:3px 0 8px}
 main#app .hedge-online .goal-hint,main#app .hedge-online .board-legend{display:none}
 main#app .hedge-online .online-dice{grid-template-columns:minmax(0,1fr) minmax(105px,.65fr);gap:8px;margin-top:8px}
 main#app .hedge-online .die{min-height:48px;padding:4px 0}
 main#app .hedge-online .die>span{height:33px}
 main#app .hedge-online .die .forest-sprite{width:42px;height:33px}
 main#app .hedge-online .die>small{font-size:8px}
 main#app .hedge-online .play-dice{gap:4px}
 main#app .hedge-online .play-dice button{min-height:34px;padding:4px;font-size:9px}
 main#app .hedge-online .dice-actions .footnote{display:none}
 main#app .hedge-online .dice-actions button{min-height:36px;font-size:10px;padding:6px}
 main#app .hedge-online .event-card,main#app .hedge-online .bonus-panel{margin:8px 0;padding:8px}
 main#app .hedge-online .hedge-token .forest-sprite{max-height:30px}
}

.faq-category{border-top:1px solid #65744d66;padding:10px 0}
.faq-category summary{cursor:pointer;color:#e2d2a2;font-size:13px;min-height:32px;display:list-item}
.faq-category p{font-size:12px;line-height:1.7;color:#bbc8ac}
.cheese-progress{display:flex;flex-wrap:wrap;gap:5px 14px;padding:8px 10px;margin-bottom:8px;background:#243e2e;border:1px solid #8a855366;border-radius:8px;font-size:12px;color:#e2dab7}
.cheese-progress span{font-size:11px;color:#b9c8a9}
.cheese-progress strong,.rage-status{color:#f3b283}
.active-modifiers{padding:8px;border:1px solid #9a926055;border-radius:8px;font-size:11px}
.active-modifiers summary{cursor:pointer;min-height:28px;color:#dfd1a5}
.active-modifiers p{margin:7px 0}
.active-modifiers small{display:block;color:#b9c7ac;margin-top:3px}
.gnaw-progress,.mouse-hole{position:absolute;z-index:8;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;font-size:11px;font-weight:bold;text-align:center;line-height:26px;min-width:26px}
.gnaw-progress{background:#326d45df;border:2px solid #9fd0a0;color:#efffe8;box-shadow:0 0 8px #87c88999}
.mouse-hole{background:#15251b;border:2px dashed #9f9d72;color:#dcce9c;line-height:18px;min-width:20px;font-size:12px}
@media(max-width:760px){.cheese-progress{padding:6px 8px;font-size:11px}.cheese-progress span{font-size:10px}.gnaw-progress{font-size:9px;line-height:19px;min-width:19px}}

/* Room workshop */
.room-editor-layout{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:16px;margin-block:16px}
.template-list{display:grid;gap:6px;margin-top:12px;max-height:65vh;overflow:auto}
.template-list button{text-align:left;display:grid;gap:3px}.template-list small{opacity:.7}.template-list .selected{outline:2px solid #a9c183}
.editor-fields,.editor-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-block:12px}
.editor-fields label,.editor-toolbar label{display:grid;gap:5px;max-width:100%}
.editor-fields input[type=checkbox],.editor-items input[type=checkbox]{width:auto}
.editor-board-scroll{overflow:auto;max-width:100%;padding-block:12px}
.template-board{display:grid;grid-template-columns:repeat(var(--editor-columns),38px);width:max-content;gap:1px;background:#514c36;border:2px solid #837554}
.template-cell{position:relative;width:38px;height:38px;min-height:0;padding:2px;border:0;border-radius:0;background:#b6a77d;overflow:visible}
.template-cell svg,.template-cell .atlas-sprite{width:100%;height:100%;display:block}.template-cell.selected{outline:2px solid #dfe991;z-index:2}
.template-cell.random-point{background:#80a383}.template-cell b{position:absolute;inset:5px;text-align:center;font-size:22px;color:#193c2e;text-shadow:0 1px #e5eed0}
.template-cell small{position:absolute;font-size:8px;background:#203d36;color:#f8f1d8;z-index:3;left:0;right:0;pointer-events:none}.editor-window{top:-10px}.editor-entry{bottom:-11px}
.editor-items{display:flex;gap:12px;flex-wrap:wrap;margin-block:10px}.editor-items label{display:flex;gap:5px;align-items:center}
.apartment-previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.apartment-previews figure{margin:12px 0;min-width:0}.apartment-previews figcaption{font-size:12px;margin-top:8px}
.apartment-preview{display:grid;grid-template-columns:repeat(var(--editor-columns),minmax(0,1fr));border:2px solid #99886b}
.preview-tile{min-width:0;min-height:0;background:#c7b88e;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#132f24;font-size:10px}
.preview-tile svg{width:100%;height:100%}.preview-tile.zone-corridor{background:#9d8e69}.preview-tile.zone-bathroom{background:#9eb8b0}.preview-tile.zone-kitchen{background:#c5bd8b}.preview-tile.zone-bedroom{background:#b4a7b3}
.preview-tile.preview-wall{background:#514d3c}.preview-tile.preview-door{background:#dfd5b4}.preview-tile.preview-sun{background:#e9ce7f}
#room-editor{max-width:1500px;margin:auto}.observer-controls{margin-bottom:12px}
@media(max-width:700px){.room-editor-layout{grid-template-columns:1fr}.template-list{max-height:180px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.editor-fields,.editor-toolbar{gap:8px}.template-cell{width:32px;height:32px}.template-board{grid-template-columns:repeat(var(--editor-columns),32px)}}

/* Fixed furniture palette beside the authored room. */
.editor-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,320px);gap:20px;align-items:start}
.editor-canvas{min-width:0}.editor-canvas .editor-board-scroll{min-height:270px}
.editor-palette{padding:12px;border:1px solid #60765a;border-radius:12px;background:#132c23}.editor-palette h3{margin:0 0 10px}
.editor-palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.editor-palette .palette-item{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 3px;border:1px solid #53654b;border-radius:7px;background:#294133;color:#eee5ce;min-height:74px}
.palette-item.selected{outline:2px solid #c9d794;background:#3b573d}.palette-item>span{display:block;width:36px;height:32px}.palette-item svg{display:block;width:100%;height:100%}.palette-item b{font-size:10px;font-weight:500;line-height:1.15;word-break:normal}.palette-item small{font-size:9px;opacity:.65}
.template-type summary{cursor:pointer;font-weight:650;padding:8px 2px}.template-type button{width:100%;margin:4px 0}.template-type .selected{outline:2px solid #c9d794}
@media(max-width:1050px){.editor-workbench{grid-template-columns:minmax(0,1fr)}.editor-palette{grid-row:1}.editor-palette-grid{grid-template-columns:repeat(auto-fit,minmax(62px,1fr))}.editor-canvas .editor-board-scroll{min-height:0}.editor-palette-grid .palette-item{min-height:66px}}

/* Atlas materials and independent decorative layers. */
.palette-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}.palette-tabs button{padding:5px 7px;font-size:11px;min-height:0}.palette-tabs .selected{outline:1px solid #c9d794}
.editor-common-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.template-board{position:relative;isolation:isolate}.template-board .template-cell{z-index:3;background:transparent;box-shadow:inset 0 0 0 1px #192d1d30}
.template-board .template-cell.random-point{background:#80a38380}.template-board .template-cell.selected{z-index:4}.template-cell .editor-window{display:none}
.editor-ground,.editor-layer{position:absolute;inset:0;pointer-events:none}.editor-ground{z-index:0}.editor-rugs{z-index:1}.editor-furniture{z-index:2}.editor-layer>div{position:absolute}.editor-layer svg{display:block;width:100%;height:100%}
.editor-window-preview{position:absolute;z-index:5;pointer-events:none;left:50%;top:0;width:80px;height:16px;transform:translate(-50%,-50%)}
.editor-ground svg,.editor-window-preview svg{display:block;width:100%;height:100%}
.window-topdown-art{position:absolute;z-index:8;pointer-events:none}.window-topdown-art svg{width:100%;height:100%;display:block}
.room-zone-floor>svg{display:block;width:100%;height:100%}.room-zone-floor:has(>svg){opacity:1!important;background:none!important}
.room-rug .material-sprite{width:100%;height:100%}
.rug-art{position:absolute;left:50%;top:50%;transform-origin:center}.apartment-preview-scene{position:relative;width:100%;overflow:hidden;border:2px solid #99886b;isolation:isolate}.apartment-preview-scene .mini-room-label{font-size:7px;padding:1px 2px}.apartment-preview-scene .prop-art{padding:1px}
.editor-rotation{position:sticky;top:0;z-index:5;background:#1b3529;padding:9px;border:1px solid #b7c893;border-radius:9px;margin-bottom:10px}.editor-rotation>div{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}.editor-rotation small{font-size:11px}.editor-object-selected{outline:3px solid #e8d891;outline-offset:2px}