/* Paint the scene under the HUD, controls and safe areas in either orientation. */
body.playing #game:not([hidden]) {
  position:fixed;inset:0;display:block;width:100%;height:100%;height:100dvh;max-width:none;
  padding:0;margin:0;overflow:hidden;background:#739759;
  --map-size:clamp(62px,8vmin,88px);
  --ui-left:max(10px,env(safe-area-inset-left));
  --ui-right:max(10px,env(safe-area-inset-right));
  --ui-top:max(9px,env(safe-area-inset-top));
  --ui-bottom:max(10px,env(safe-area-inset-bottom));
}
#game .board,#game .board.room {
  position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;
  border:0;box-shadow:none;border-radius:0;background:#779657 url('herbe.webp') repeat;
}
#game .gamebar {
  position:absolute;z-index:7;top:var(--ui-top);left:calc(var(--ui-left) + var(--map-size) + 10px);
  right:var(--ui-right);display:flex;align-items:flex-start;justify-content:flex-end;
  flex-wrap:wrap;gap:5px;min-height:0;pointer-events:none;
}
#game #pauseBtn{pointer-events:auto}
#game .scene-name{display:none}
#game .gamebar .stats{margin-left:auto;gap:4px}
#game .stat{border:1px solid #b0c09a;border-radius:6px;background:#183735e8;box-shadow:0 2px 4px #132f2e42}
#game .clock.urgent,#game .stat.full{background:#8c4f38ee}
#game #onlineScores:not([hidden]){
  order:4;width:max-content;max-width:100%;margin-left:auto;text-align:right;line-height:1.4;
  background:#17322fe8;border-radius:5px;padding:3px 6px;color:#f6df9f;flex-basis:auto;
}
#game .console-deck {
  position:absolute;bottom:var(--ui-bottom);left:var(--ui-left);right:var(--ui-right);
  margin:0;padding:0;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  z-index:7;pointer-events:none;background:transparent;
}
#game .joystick,#game .face-buttons{pointer-events:auto}
#game .console-tip{position:static;height:auto;max-width:40%;margin:auto auto 9px;background:#1c3833dc;border-radius:6px;padding:4px 8px}
#game .face-key span{background:#193631e3;color:#ffedbc;padding:3px 7px;border-radius:4px}
#game .board #notice{bottom:calc(var(--ui-bottom) + clamp(72px,14vmin,126px));}
#game .overview{top:auto;bottom:calc(var(--ui-bottom) + 92px);left:var(--ui-left);right:auto;min-height:36px;background:#1d3a33dd}
.mini-map {
  position:absolute;z-index:8;left:var(--ui-left);top:var(--ui-top);width:var(--map-size);
  padding:0;border:2px solid #f3d99b;box-shadow:0 0 0 2px #354c3e,0 3px 7px #132d3466;
  border-radius:5px;overflow:hidden;background:#233e36;color:#fff1c9;touch-action:manipulation;
}
.mini-paper {position:relative;display:block;aspect-ratio:1636.08 / 1872;overflow:hidden}
.mini-paper img,.map-surface img{width:100%;height:100%;display:block;pointer-events:none}
.mini-caption{display:block;padding:3px 0;font:700 11px/1 system-ui;letter-spacing:.04em}
.map-pin{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%);z-index:1}
.pin-self{background:#3ad8da;border:2px solid #174c58;box-shadow:0 0 0 1px #e4ffeb}
.pin-buyer{background:#ffc84e;border:2px solid #75422b;box-shadow:0 0 0 1px #fff1c0;z-index:2}
.mini-paper .map-pin{width:7px;height:7px;border-width:1px}
#liveMapDialog {
  position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;height:100dvh;
  max-height:none;border:0;border-radius:0;padding:0;box-shadow:none;overflow:hidden;
  color:#203f36;background:#e8dabb;isolation:isolate;
}
#liveMapDialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;place-items:center;gap:10px;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
#liveMapDialog::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(#f7efd8e6,#ecdfbee8),url('plan-massy.webp') center/cover}
.map-heading{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
.map-heading h2{margin:0;font:normal clamp(15px,2.3vw,26px)/1.25 var(--pixel);text-transform:uppercase}
#mapClose{min-height:44px;padding:4px 12px;color:#fff4d0;background:#274739;border:1px solid #5b735c;border-radius:6px;font:700 14px var(--sans);display:inline-flex;align-items:center;gap:8px}
#mapClose span{font-size:22px;line-height:1}
.map-frame{width:100%;height:100%;min-height:0;container-type:size;display:grid;place-items:center}
.map-surface{position:relative;width:min(100cqw,87.397cqh);aspect-ratio:1636.08 / 1872;
  box-shadow:0 0 0 2px #768064,0 1px 8px #42563766;background:#79a05a;touch-action:manipulation;}
.map-surface img{position:absolute;inset:0}
.map-surface .map-pin{width:15px;height:15px}
.map-surface .pin-self{z-index:2}
.map-surface .pin-label{position:absolute;white-space:nowrap;font:800 13px/1.15 system-ui;left:50%;padding:3px 7px;border:1px solid #536754;border-radius:4px;transform:translateX(-50%)}
.map-surface .pin-buyer .pin-label{bottom:calc(100% + 3px);background:#ffe4a0;color:#433520}
.map-surface .pin-self .pin-label{top:calc(100% + 3px);background:#e1f5e6;color:#154751}
.map-caption{margin:0;font:650 14px/1.3 var(--sans);text-align:center}
@media(max-width:720px){
  #game .console-tip{display:none}
  #game .joystick{width:90px}
  #game .stat small{font-size:8px}
  #game .gamebar:has(#onlineScores:not([hidden])){gap:4px}
}
@media(max-width:370px){#game .stats .stat svg{display:none}}
@media(orientation:landscape) and (max-height:550px){
  #game:not([hidden]){--map-size:57px}
  #game .joystick{width:76px}
  #game .overview{bottom:calc(var(--ui-bottom) + 80px)}
}

#game:has(.board.room) .scene-name{display:block;order:5;flex-basis:100%;text-align:right}
#game:has(.board.room) .scene-name small{display:none}
#game:has(.board.room) .scene-name h2{display:inline-block;margin:0;padding:3px 6px;border-radius:4px;background:#1e3835df;font-size:10px}
#liveMapDialog[open]{display:block;padding:0}
#liveMapDialog .map-frame{position:absolute;inset:max(62px,calc(env(safe-area-inset-top) + 56px)) 12px max(62px,calc(env(safe-area-inset-bottom) + 56px));width:auto;height:auto;display:block;container-type:normal;overflow:hidden}
#liveMapDialog.follow-buyer .map-frame{inset:0}
#liveMapDialog .map-surface{position:absolute;left:0;top:0;max-width:none;max-height:none;aspect-ratio:auto;box-shadow:0 0 0 1px #778465}
.map-heading,.map-footer{position:absolute;z-index:3;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));width:auto}
.map-heading{top:max(10px,env(safe-area-inset-top))}
.map-heading h2{background:#fff2cde8;border-radius:4px;padding:8px 10px;box-shadow:0 1px 3px #2c3e3e66}
.map-footer{bottom:max(10px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
#mapZoom{pointer-events:auto;min-height:44px;border-radius:6px;border:1px solid #aeb887;background:#234339f0;color:#fff1c5;font:700 13px var(--sans);padding:6px 10px;flex:none}
.map-caption{background:#fff5dbed;border-radius:4px;padding:5px 8px;box-shadow:0 1px 3px #344b382f}
#selfEdge{position:absolute;transform:translate(-50%,-50%);z-index:2;pointer-events:none;background:#d9f7eb;border:2px solid #2b6972;border-radius:4px;color:#164853;font:800 13px system-ui;padding:2px 5px}
#selfEdge b{display:inline-block}
#game .mini-map{width:min(var(--map-size),calc(90px * var(--mini-ratio,1)))}
#zoneBanner{
  position:absolute;z-index:6;top:clamp(96px,18%,195px);left:50%;transform:translateX(-50%);
  max-width:calc(100% - 24px);width:max-content;text-align:center;pointer-events:none;
  padding:9px 16px 10px;border-block:2px solid #e5cc8c;border-radius:2px;
  background:#1d372ff2;color:#ffedc5;box-shadow:0 3px 9px #243b3250;
  font:normal clamp(14px,3vmin,24px)/1.45 var(--pixel);
}
@media(orientation:landscape) and (max-height:550px){#zoneBanner{top:21%;font-size:15px}}
.map-surface .region-name{position:absolute;left:4%;z-index:1;pointer-events:none;max-width:90%;border-radius:3px;padding:3px 6px;background:#233d30e6;color:#fff0c8;font:700 clamp(11px,2vmin,16px)/1.35 var(--sans)}
.follow-buyer .map-surface .region-name{display:none}

#sceneFrame .issac-shout{
  color:#4a311c!important;background:#fff1bf!important;border-color:#93642d!important;
  font-size:14px!important;font-weight:850!important;
}
.fine-balloon{position:absolute;z-index:6;width:max-content;max-width:200px;transform:translate(-50%,-100%);border:2px solid #3e5765;border-radius:7px;padding:4px 7px;background:#eff8f8;color:#24475c;text-align:center;font:700 13px/1.25 system-ui;pointer-events:none}
.board.photo #sceneFrame{visibility:hidden}
#game:has(.board.photo) .console-tip{display:none}
.photo-room,.photo-stage{position:absolute;inset:0;overflow:hidden;background:#524c41}
.photo-room{z-index:3;isolation:isolate}
.photo-stage{touch-action:none}
.photo-sheet,.photo-background{position:absolute;left:0;top:0;width:100%;height:100%}
.photo-background{display:block;pointer-events:none;max-width:none;object-fit:fill}
.photo-tabs,.photo-choices{position:absolute;z-index:2;display:flex;gap:5px;max-width:calc(100% - 22px);overflow-x:auto;scrollbar-width:none}
.photo-tabs{left:max(12px,env(safe-area-inset-left));top:calc(var(--ui-top) + 112px)}
.photo-choices{left:50%;transform:translateX(-50%);bottom:calc(var(--ui-bottom) + 98px);width:max-content;padding:3px}
.photo-tabs button,.photo-choices button{border:1px solid #d8c9a0;border-radius:6px;padding:7px 10px;min-height:38px;background:#193b34e8;color:#fff3d7;font:700 13px/1.2 var(--sans);white-space:nowrap}
.photo-tabs button[aria-pressed=true],.photo-choices button[aria-pressed=true]{background:#e9c273;color:#26392e}
.photo-hotspot{position:absolute;display:block;border:0;padding:0;background:none;touch-action:manipulation;perspective:480px}
.touch-dot{position:absolute;width:12px;height:12px;border:2px solid #fff7da;box-shadow:0 0 0 2px #43564ad9,0 2px 6px #332a16;top:50%;left:50%;border-radius:50%;background:#e8bc61;transform:translate(-50%,-50%);z-index:2}
.photo-lid,.recess{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:4px}
.recess{display:grid;align-content:end;padding:4px;background:linear-gradient(150deg,#2c2a29,#141616 50%,#434344);color:#fff2b7;font:700 12px/1.25 var(--sans);text-shadow:0 1px #222}
.photo-lid{background-repeat:no-repeat;transform-origin:bottom;transition:transform .38s ease;box-shadow:0 2px 3px #1117}
.photo-hotspot.opened{z-index:1}
.opened .recess,.opened .photo-lid{opacity:1}
.opened .photo-lid{transform:translateY(36%) rotateX(60deg)}
.opened[data-type=visiere] .photo-lid{transform-origin:bottom;transform:translateY(80%) rotateX(-15deg)}
.opened[data-type=visiere] .recess{background:#827c71}
.opened[data-type=porte] .photo-lid,.opened[data-type=frigo] .photo-lid{transform-origin:left;transform:rotateY(-71deg)}
.opened[data-type=tiroir] .photo-lid{transform:translateY(42%) scale(.93)}
.opened[data-type=matelas] .photo-lid,.opened[data-type=lift] .photo-lid,.opened[data-type=banquette] .photo-lid{transform:translate(15%,-36%) rotate(-9deg);animation:meuble-souleve .46s ease}
.opened .touch-dot{background:#5fb285}
.recess.found{z-index:2;background:linear-gradient(transparent 60%,#152a25d9);pointer-events:none}
@keyframes meuble-souleve{50%{transform:translate(7%,-58%) rotate(-13deg)}}
@media(orientation:landscape) and (max-height:550px){.photo-tabs{left:calc(var(--ui-left) + var(--map-size) + 10px);top:calc(var(--ui-top) + 46px)}.photo-choices{bottom:var(--ui-bottom);max-width:calc(100% - 285px)}}
#roomAlbum{margin:10px auto;color:#f3eacb;text-align:center}
#roomAlbum summary{cursor:pointer;padding:6px}
#roomAlbum img{display:block;margin:6px auto;width:100%;max-height:36dvh;object-fit:contain}
.album-nav{display:flex;align-items:center;justify-content:center;gap:14px}
.album-nav button{width:42px;min-height:38px;border:1px solid #a1a689;border-radius:5px;background:#29483f;color:#fff0c3}
.volume-label{display:flex;justify-content:space-between;margin:10px 0 2px;color:#f7edcd}#volumeMusique{width:100%;min-height:28px;accent-color:#dda948}
.pack-message{position:absolute;z-index:8;transform:translate(-50%,-100%);background:#fff1bd;color:#433723;border:2px solid #705837;border-radius:6px;padding:4px 8px;white-space:nowrap;pointer-events:none;text-align:center;font:800 13px/1.18 system-ui}
.pack-message::after{content:'';position:absolute;top:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-top-color:#705837}


.music-choice{margin:8px 0;color:#f3eacb;font:600 14px/1.4 var(--sans)}
.music-choice summary{padding:6px;cursor:pointer}
.music-choice .file-pick,.music-choice button{position:relative;display:block;margin:5px auto;border:1px solid #c6bf94;border-radius:5px;padding:8px;text-align:center;background:#29483f;color:#fff1cb;cursor:pointer}
.file-pick input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
.file-pick:focus-within{outline:2px solid #f7cc71}
#trackStatus{margin:4px;font-size:12px;overflow-wrap:anywhere}

#chaseBanner{position:absolute;z-index:7;pointer-events:none;top:calc(var(--ui-top) + 108px);left:50%;transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:calc(100% - 24px);padding:7px 13px;background:#682e26f5;color:#fff5dc;border:2px solid #f1be82;border-radius:6px;text-align:center;font:600 14px/1.3 var(--sans)}
#chaseBanner strong,#chaseBanner span{display:block}
#chaseBanner strong{font-size:16px}
#chaseBanner:not([hidden]) ~ #zoneBanner{visibility:hidden}
@media(orientation:landscape){#chaseBanner{top:calc(var(--ui-top) + 55px)}}
.merchant-label,.outdoor-loot{pointer-events:none;position:absolute;transform:translate(-50%,-100%);z-index:5}
.merchant-label{padding:2px 5px;border:1px solid #5c482b;background:#fff0b5;color:#25382b;font:bold 11px system-ui;white-space:nowrap}
.outdoor-loot{z-index:2;font:bold 17px Georgia;text-shadow:0 1px 2px #302c28,1px 0 #574329}
#capacityField select{font:inherit;color:#203f37;background:#fff4d0;border:2px solid #9c8452;padding:9px 14px}
#waitingPlayers{max-height:34dvh;overflow:auto}
#onlineScores{max-height:3em;overflow:auto}
@media(max-width:600px){#game .gamebar .stats{gap:2px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 38px)}#game .stats .stat{padding:3px 5px;gap:0}#game .stats svg{display:none}#game .stats small{display:block;font-size:9px}#game .stats b{font-size:11px}}
