/* 日本語: 空枠と取得物を同じ寸法で並べ、スマホでも六枠が収まる。
   English: Keep empty and filled slots aligned, with six visible slots on mobile. */
:root{color-scheme:light;--ink:#334f47;--paper:#f2eee4;--accent:#376e5d;--line:#cbcdbb;--muted:#748478;--peach:#e3b391;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif}
*{box-sizing:border-box}body{margin:0;background:#deded0;color:var(--ink);height:100dvh;overscroll-behavior:none}button,a,input{font:inherit}button{cursor:pointer;color:inherit;background:#f7f5ee;border:1px solid var(--line);border-radius:8px;touch-action:manipulation}button:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a47646;outline-offset:2px}button:disabled{cursor:wait;opacity:.5}[hidden]{display:none!important}
#game{width:min(100%,620px);height:100dvh;margin:auto;background:var(--paper);padding:calc(12px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:7px;overflow:hidden;box-shadow:0 0 70px #53665720}header{display:flex;align-items:center;justify-content:space-between;flex:none;gap:8px}h1{font-size:clamp(17px,3.6vw,23px);line-height:1.35;letter-spacing:.035em;margin:3px 0 0;font-weight:700}.eyebrow{font-size:9px;letter-spacing:.2em;color:#7b8b7f}.header-actions{display:flex;gap:5px}.header-actions button{padding:7px 9px;font-size:11px;min-height:36px}.viewbar{display:flex;align-items:center;gap:9px;font-size:12px;height:30px;flex:none}.viewbar #back{border:none;background:none;font-size:12px;padding:5px 7px}#view-title{font-weight:600}#revision{margin-left:auto;font-size:11px;color:var(--muted)}
#stage{position:relative;flex:1;min-height:130px;border:1px solid #b7bdab;border-radius:14px;overflow:hidden;background:#e9e3d5;isolation:isolate}.scene-art{position:absolute;inset:0;pointer-events:none}.camera-world{position:absolute;inset:0;transform-origin:0 0}.scene-art>svg{width:100%;height:100%;display:block}.hotspot{position:absolute;background:transparent;border:none;z-index:2;border-radius:4px;min-width:calc(26px/var(--camera-zoom,1));min-height:calc(35px/var(--camera-zoom,1))}.hotspot:hover{background:#fff6;box-shadow:inset 0 0 0 1px #83958580}.edge{position:absolute;border:none;background:#f7f5ee80;font-size:36px;z-index:4;border-radius:0;display:flex;align-items:center;justify-content:center;color:#527666}.edge:hover{background:#f7f5eecf}.edge.left{left:0;top:13%;bottom:13%;width:9%}.edge.right{right:0;top:13%;bottom:13%;width:9%}.edge.up{top:0;left:15%;right:15%;height:10%;min-height:30px}.edge.down{bottom:0;left:15%;right:15%;height:10%;min-height:30px}#message{font-size:12px;line-height:1.55;min-height:38px;max-height:49px;overflow:auto;flex:none;padding:4px 2px}.inventory-caption{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);flex:none}#selection{color:var(--accent);max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#inventory{display:flex;gap:6px;overflow-x:auto;height:78px;flex:none;padding:2px 1px 5px;scrollbar-width:thin}.inventory-slot{flex:0 0 calc((100% - var(--inventory-slot-gaps,30px))/var(--inventory-columns,6));min-width:0;position:relative}.item{height:67px;width:100%;padding:2px;line-height:1.25;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(9px,2.5vw,10px)}.item>span{white-space:nowrap}.item>svg{height:42px;width:44px;max-width:100%}.item.selected{background:#d9e8d8;border:2px solid var(--accent)}.empty-slot{border:1px solid var(--line);border-radius:8px;background:#e8eadb66}footer{display:flex;align-items:center;gap:10px;font-size:10px;flex:none;min-height:32px}footer label{white-space:nowrap;display:flex;gap:3px;align-items:center}footer input{margin:0;accent-color:var(--accent)}#connection{margin-left:auto;font-size:9px;color:#869080}
dialog{border:1px solid var(--line);border-radius:18px;background:#f7f4e9;color:var(--ink);width:min(calc(100% - 28px),500px);padding:20px;max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 20px 70px #1b362933}dialog::backdrop{background:#233f3866}.dialog-top{display:flex;justify-content:space-between;align-items:center}#dialog-kicker{font-size:10px;letter-spacing:.13em;color:var(--muted)}#close-dialog{width:32px;height:32px;padding:0;font-size:22px;background:none}h2{font-size:22px;line-height:1.45;margin:12px 0 17px}#dialog-body{font-size:13px;line-height:1.9}#dialog-body p{margin:10px 0 16px}.primary{background:var(--accent);color:white;border-color:var(--accent);padding:11px 17px;min-height:42px}.secondary{padding:9px 14px;min-height:40px}.dialog-actions{display:flex;gap:8px;flex-wrap:wrap}.muted{color:var(--muted);font-size:11px}.item-large{height:135px;width:135px;margin:auto}.item-large svg{width:100%;height:100%}.code{font-family:ui-monospace,monospace;letter-spacing:.18em;background:#e8eadb;padding:13px;overflow-wrap:anywhere;white-space:pre-wrap;border-radius:8px}.table-code{font-family:ui-monospace,monospace;font-size:12px;background:#e8eadb;padding:10px;line-height:2;max-height:130px;overflow:auto}input[type=text]{min-height:40px;border:1px solid var(--line);background:#fffdf6;color:var(--ink);border-radius:6px;padding:8px;max-width:100%}.dial-row{display:flex;justify-content:center;gap:15px;margin:15px 0}.dial-digit{display:flex;flex-direction:column;align-items:center;gap:8px}.dial-digit button{width:55px;height:42px;font-size:22px}.dial-digit output{font:38px ui-monospace,monospace;background:#dde5d2;padding:8px 14px;border-radius:8px}.sound-readout{height:23px;text-align:center;font-size:12px;color:#92734e}.machine-controls{display:flex;gap:8px;align-items:center}.machine-controls input{width:70px;font-family:ui-monospace,monospace;text-transform:uppercase;text-align:center}.machine-log{min-height:52px}.solution-controls{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.solution-controls input{flex:1;min-width:150px}.rates{width:100%;border-collapse:collapse;font-size:12px}.rates th,.rates td{border-bottom:1px solid var(--line);padding:7px 3px;text-align:left}.rates td:last-child{text-align:right}.stats-note{font-size:11px}
#overlay{position:fixed;inset:0;z-index:30;background:#e9ecdfdd;display:flex;align-items:center;justify-content:center;padding:24px}#overlay.repair{background:#1c2d27;color:#eff0df}#overlay-card{width:min(100%,420px);text-align:center}#overlay-card .big{font-size:clamp(24px,6vw,34px);font-weight:700;line-height:1.65;letter-spacing:.04em}#overlay-card .end-tag{font-size:11px;letter-spacing:.18em;color:#708776}.fake-share{padding:12px 24px;margin-top:22px;border-color:#bac5b2;pointer-events:none}.share{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;border-radius:8px;padding:12px 22px;margin:14px 0}.repair-steps{font-size:13px;line-height:2.1;color:#c2d1bd}.repair-steps .current{color:#f0d9ad}.repair-steps span{display:block}.loading{font-size:11px;color:#9bad98}.error{color:#a64f3e}
@media(max-height:600px){#game{padding-top:calc(7px + env(safe-area-inset-top));gap:4px}h1{font-size:17px}.eyebrow{font-size:8px}#inventory{height:69px}.item{height:59px}.item>svg{height:34px}#message{min-height:32px;max-height:40px;font-size:11px}.viewbar{height:25px}footer{min-height:28px}.header-actions button{min-height:31px;padding:5px 7px}dialog{padding:15px}h2{font-size:19px;margin:8px 0 10px}#dialog-body{font-size:12px;line-height:1.7}}
@media(prefers-reduced-motion:no-preference){.item.selected{animation:select .18s ease-out}@keyframes select{from{transform:translateY(2px)}to{transform:translateY(0)}}}

/* 日本語: 操作欄を小さく添え、部屋と持ち物を常に見せる。
   English: Dock compact controls while keeping the room and inventory visible. */
#focus-panel{flex:none;max-height:min(29dvh,185px,max(60px,calc(100dvh - 400px)));overflow:auto;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:#eeeedd;font-size:11px;line-height:1.5;scrollbar-width:thin}
#focus-panel p{margin:4px 0}#focus-panel .dial-row{margin:3px 0;gap:12px}#focus-panel .dial-digit{gap:2px}#focus-panel .dial-digit button{height:26px;width:44px;font-size:18px}#focus-panel .dial-digit output{font-size:23px;padding:2px 11px}#focus-panel .primary,#focus-panel .secondary{padding:5px 9px;min-height:29px;font-size:11px}#focus-panel .sound-readout{height:15px;font-size:10px}#focus-panel .muted{font-size:10px}#focus-panel .table-code{font-size:10px;max-height:66px;padding:5px;line-height:1.8}#focus-panel .code{font-size:11px;padding:7px;min-height:0}#focus-panel input[type=text]{min-height:30px;padding:5px;font-size:11px}#focus-panel .solution-controls{margin-top:6px}
.report-ready{box-shadow:inset 0 0 0 1px #71927766;background:#bdcfa612}
#slam-caption{margin-top:10px;font-size:30px;font-weight:800;letter-spacing:.12em;color:#f1d5a3}
.lock-controls,.shift-controls{display:flex;align-items:center;justify-content:center;gap:7px}.lock-controls input{width:80px;text-align:center;font-family:ui-monospace,monospace;letter-spacing:.2em}.shift-controls output{flex:1;text-align:center;letter-spacing:.1em}.end-actions{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.end-actions button{font-size:12px}
/* 日本語: 声は絵の上で方向を示し、タップ領域には干渉しない。
   English: Speech tails point toward the door while clicks pass through the bubble. */
.voice-bubble{position:absolute;z-index:6;pointer-events:none;max-width:72%;padding:9px 12px;border:1px solid #b2baa4;border-radius:13px;background:#fffbed;box-shadow:0 3px 12px #243c3826;color:#344e43;font-size:13px;line-height:1.55;overflow-wrap:anywhere}.voice-bubble::after{content:"";position:absolute;width:0;height:0;border:10px solid transparent}.voice-bubble[data-direction=door]{left:27%;top:13%;max-width:67%}.voice-bubble[data-direction=door]::after{left:18%;bottom:-19px;border-top-color:#fffbed}.voice-bubble[data-direction=left]{left:4%;top:17%}.voice-bubble[data-direction=left]::after{left:-19px;top:35%;border-right-color:#fffbed}.voice-bubble[data-direction=right]{right:4%;top:17%}.voice-bubble[data-direction=right]::after{right:-19px;top:35%;border-left-color:#fffbed}.voice-bubble[data-direction=behind],.voice-bubble[data-direction=down]{left:15%;bottom:15%}.voice-bubble[data-direction=behind]::after,.voice-bubble[data-direction=down]::after{left:45%;bottom:-19px;border-top-color:#fffbed}.voice-bubble[data-direction=up]{left:15%;top:13%}.voice-bubble[data-direction=up]::after{left:45%;top:-19px;border-bottom-color:#fffbed}
/* 日本語: 放置の最後の声を見せたまま、六十秒で自動クリアする。
   English: Keep the final door-side speech visible alongside the automatic idle ending. */
#overlay.idle-ending{background:transparent;align-items:flex-end;padding:14px}#overlay.idle-ending #overlay-card{background:#f7f4e9f5;border:1px solid var(--line);border-radius:14px;padding:14px;max-height:calc(100dvh - 200px);overflow:auto;box-shadow:0 4px 25px #243c382b}

/* 日本語: 発言だけを読みやすい枠に入れ、空欄では枠を消す。部屋の操作領域は覆わない。
   English: Frame readable messages only when present, without covering room controls. */
#message{font-size:16px;line-height:1.65;min-height:48px;max-height:min(18dvh,112px);padding:8px 11px;border:1px solid #a8b49d;border-radius:10px;background:#fffbed;overflow-wrap:anywhere;white-space:pre-wrap;box-shadow:0 2px 7px #243c3810}
#message:empty{border-color:transparent;background:transparent;box-shadow:none}
.voice-bubble{font-size:clamp(16px,2.8vw,18px);line-height:1.6;padding:10px 12px;border-color:#a8b49d}
#focus-panel [role=status]{font-size:16px;line-height:1.65;padding:8px;border:1px solid #a8b49d;border-radius:8px;background:#fffbed;overflow-wrap:anywhere}
#focus-panel [role=status]:empty{display:none}
#dialog-body>p,#overlay-card>p:not(.muted){font-size:16px;line-height:1.65;overflow-wrap:anywhere}

/* 日本語: 固定の共通ボタンだけを最前面に残し、メニューから記録を案内しない。
   English: Keep one fixed control above dialogs without advertising hidden records. */
header{padding-right:44px}
#menu{position:fixed;right:calc(14px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));z-index:60;width:42px;height:42px;font-size:22px;background:#f7f5ee}
#dialog-backdrop{position:fixed;inset:0;z-index:40;background:#233f3866}
dialog{position:fixed;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:50;max-height:calc(100dvh - 120px)}
dialog[data-mode=menu]{left:auto;top:calc(64px + env(safe-area-inset-top));right:14px;transform:none;width:min(calc(100% - 28px),290px)}
.menu-items{display:grid;gap:10px}.menu-items>a{text-align:center;color:inherit;text-decoration:none;background:#f7f5ee;border:1px solid var(--line);border-radius:8px}