:root{color-scheme:dark;--bg:#102020;--panel:#1c3030;--ink:#f4ecd9;--muted:#bec9bc;--gold:#e7be76;--line:#52605a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#28403b,var(--bg) 65%);color:var(--ink);font-family:system-ui,-apple-system,"Yu Gothic",sans-serif;font-size:16px;line-height:1.7}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:1px solid var(--line);border-radius:6px;background:#243b37;padding:10px 18px;cursor:pointer;min-height:44px}button:hover{border-color:var(--gold);background:#344b40}button:focus-visible,a:focus-visible{outline:3px solid #ffe1a4;outline-offset:4px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.app{max-width:1100px;margin:auto;padding:24px 34px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px}.brand{font-family:serif;font-size:25px;letter-spacing:.13em;color:var(--ink);text-decoration:none}.brand small{display:block;font:10px system-ui;letter-spacing:.2em;margin-top:4px}.eyebrow{font-size:12px;letter-spacing:.22em;color:var(--gold);margin:0 0 8px}h1,h2,p{margin-top:0}h1,h2{font-family:"Yu Mincho",serif;font-weight:500}h1{font-size:32px;line-height:1.4}h2{font-size:24px}.muted{font-size:14px;color:var(--muted)}.cover{display:grid;grid-template-columns:1fr 1fr;min-height:620px;align-items:center;gap:65px}.cover-copy h1{font-size:60px;letter-spacing:.12em;margin-bottom:24px}.cover-copy>p:not(.eyebrow){line-height:2}.primary{background:var(--gold);color:#26312a;border-color:var(--gold);font-weight:700;padding:15px 26px}.primary:hover{background:#f4d59b}.primary span{margin-left:36px}.cover-copy .muted{margin-top:15px}.cover-art{height:480px;position:relative;border:12px solid #3e4c41;background:linear-gradient(150deg,#1b3339,#101b28);box-shadow:0 0 0 1px #6a7059,18px 18px 0 #122725;overflow:hidden}.moon{position:absolute;right:17%;top:12%;width:70px;height:70px;border-radius:50%;background:#eddfae;box-shadow:0 0 80px #bca97355}.window-lines{position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#3e4c41 48%,#3e4c41 52%,transparent 52%),linear-gradient(transparent 55%,#3e4c41 55%,#3e4c41 58%,transparent 58%)}.hero-cup{position:absolute;bottom:8%;left:14%;font-size:110px;filter:sepia(.6)}.closed{position:absolute;right:10%;bottom:22%;padding:12px;background:#2a3732;border:1px solid #a79168;transform:rotate(-7deg);letter-spacing:.22em}.room-heading{display:flex;justify-content:space-between;align-items:center;padding:22px 0 15px}.room-heading h1{margin:0;font-size:27px}.scene{position:relative;aspect-ratio:16/9;isolation:isolate;border:1px solid #7c775c;border-radius:5px;overflow:hidden;background:linear-gradient(#526454 0 65%,#333c32 65% 68%,#6b5641 68%);box-shadow:0 12px 40px #0003}.scene:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 16%,#1b221b14 16% 16.3%)}.scene:after{content:"喫茶 月灯";position:absolute;top:7%;left:5%;font-family:serif;letter-spacing:.3em;color:#f3deb883;font-size:18px;z-index:-1}.object{position:absolute;padding:0;background:transparent;border:0;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:44px;color:#fff2d6;text-shadow:0 1px 3px #000}.object:hover{background:#f4da931a;outline:2px solid #e7be7680}.object .label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:14px;background:#162825ed;padding:2px 9px;border-radius:3px}.drawing{display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}.door .drawing{background:#314336;border:7px solid #293629;box-shadow:inset 0 0 0 2px #778169}.door .drawing:before{content:"CLOSED";border:1px solid #9b987a;padding:8px;font-size:15px;letter-spacing:.12em}.door .drawing:after{content:"";position:absolute;right:12%;top:57%;width:9px;height:9px;background:#e7be76;border-radius:50%}.clock-face{position:relative;width:clamp(64px,9vw,105px);aspect-ratio:1;border:6px solid #4a3629;background:#e8dfc4;border-radius:50%;color:#29382e;font-family:serif;box-shadow:0 5px 8px #0004}.clock-face b{position:absolute;font-size:14px;font-weight:400}.clock-face .twelve{top:0;left:39%}.clock-face .six{bottom:0;left:46%}.hand{position:absolute;left:49%;bottom:50%;width:3px;height:34%;background:#263f36;transform-origin:50% 100%}.hand.hour{height:25%;transform:rotate(210deg)}.table .drawing,.side-table .drawing{background:#9e7950;border:6px solid #674a32;border-radius:50%;height:35%;box-shadow:0 14px 0 #493b2b}.table .drawing:after,.side-table .drawing:after{content:"";position:absolute;top:60%;height:30%;width:9%;background:#4f3929;z-index:-1}.chairs .drawing{gap:10%}.chair{width:25%;height:70%;border:6px solid #392f24;border-top-width:22px;position:relative}.chair:after{content:"";position:absolute;left:-6px;right:-6px;top:45%;height:14px;background:#463326}.counter-decor{position:absolute;left:4%;right:4%;top:60%;height:29%;background:repeating-linear-gradient(90deg,#654c36 0 24%,#493b2d 24% 25%);border-top:14px solid #ac8c60;z-index:-1}.cup-row{display:flex;gap:7%;width:100%;justify-content:center}.cup{display:block;width:17%;height:36px;background:#eee2c7;border-radius:3px 3px 14px 14px;position:relative;box-shadow:0 5px #bca98a}.cup:after{content:"";position:absolute;right:-7px;top:5px;border:3px solid #eee2c7;width:9px;height:15px;border-radius:50%}.drawer .drawing{background:#775838;border:5px solid #3d3227}.drawer .drawing:after{content:"";width:25%;height:6px;background:#dac08f;border-radius:3px}.register .drawing{background:#354342;border:5px solid #1f2d2a;border-radius:8px}.register .drawing:before{content:"•••";background:#aac6ad;color:#23392d;position:absolute;top:12%;padding:0 15%;font-size:23px}.can-row{display:flex;justify-content:center;gap:10%;width:100%;border-bottom:9px solid #493726;padding-bottom:7px}.can{display:grid;place-items:center;width:24%;height:65px;border-radius:5px 5px 2px 2px;border-top:5px solid #aaa589;font-size:14px;font-weight:bold;color:#172726;text-shadow:none}.yellow{background:#e6c965}.red{background:#c97965}.blue{background:#81abc3}.window-decor{position:absolute;left:6%;top:9%;width:53%;height:47%;background:linear-gradient(90deg,transparent 48%,#b8a47c 48% 52%,transparent 52%),linear-gradient(#142b38 48%,#b8a47c 48% 52%,#142b38 52%);border:9px solid #b8a47c;z-index:-1}.window-decor:after{content:"☾";position:absolute;right:15%;top:0;color:#e4d599;font-size:50px}.plant .drawing{font-size:clamp(60px,10vw,120px);filter:sepia(.25)}.box .drawing{background:#9b693f;border:5px solid #664728;border-radius:5px;box-shadow:inset 0 13px #b9854d}.box .drawing:after{content:"•••";background:#342f28;padding:0 10px;border:2px solid #cdb17d}.menu .drawing{background:#e3d6b4;color:#3c4234;transform:rotate(-8deg);font-family:serif;font-size:18px;border:3px double #6a664d;height:80%;width:80%}.sugar .drawing{background:#d9d7bb;width:65%;height:60%;border-radius:30% 30% 15% 15%;border-top:8px solid #aaa88c}.room-nav{display:flex;justify-content:space-between;align-items:center;margin:14px 0}.room-nav button{min-width:96px}#dots{display:flex;gap:12px}#dots span{font-size:12px;color:#aab7aa;padding:2px 8px;border-bottom:2px solid transparent}#dots .active{color:var(--gold);border-color:var(--gold)}.message{background:#213832;border-left:3px solid var(--gold);padding:15px 18px;min-height:58px}.inventory{border:1px solid var(--line);padding:18px 22px;border-radius:6px}.inventory-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.inventory h2{font-size:18px;margin:0}.inventory-heading span{font-size:14px;color:var(--gold)}#items{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.item{display:flex;align-items:center;gap:10px;min-height:56px}.item.selected{border:2px solid var(--gold);background:#405142}.item.used{opacity:.7}.item-symbol{font-size:25px}.inventory .muted{margin:10px 0 0}.ending{text-align:center;min-height:610px;padding:90px 10px}.ending h1{font-size:48px}.ending-icon{font-size:64px;color:var(--gold)}footer{display:flex;justify-content:space-between;padding:28px 0;font-family:serif;color:#b6b9a3;font-size:13px}dialog{background:#f0e8d4;color:#283c32;border:1px solid #d0bd8b;border-radius:10px;width:min(460px,calc(100% - 32px));padding:25px;max-height:85dvh;overflow:auto;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#061310bb}dialog button{background:#314b3e;color:#f4ecd9}dialog .eyebrow{color:#576752}.modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-top p{margin:0}.modal-top button{padding:6px 14px}#modal-body p{white-space:pre-line}#modal-body .big-symbol{font-size:65px;text-align:center;margin:10px}#modal-body .note{font-family:serif;font-size:25px;text-align:center;border-block:1px solid #9eab91;padding:25px 0}form label{display:block}input{display:block;width:100%;font:32px monospace;text-align:center;letter-spacing:.35em;padding:15px;background:#fffaf0;color:#22382e;border:2px solid #7b866a;border-radius:5px;margin:12px 0}form button{width:100%}.error{color:#9a3224;min-height:27px;margin-top:10px}.coaster-view{display:flex;gap:10px;justify-content:center;margin:24px 0}.coaster{width:95px;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px double #ffffff80}.coaster strong{font-size:32px;line-height:1.2}.coaster span{font-size:14px}
@media(max-width:650px){.app{padding:16px 14px}.brand{font-size:21px}header>button{padding:8px 10px;font-size:14px}.cover{grid-template-columns:1fr;gap:28px;padding:28px 0;min-height:0}.cover-art{height:210px;max-width:100%;border-width:8px}.hero-cup{font-size:75px;bottom:0}.moon{width:45px;height:45px}.closed{bottom:20%;padding:7px}.cover-copy h1{font-size:40px}.cover-copy h1 br{display:none}.cover-copy p{font-size:14px}.cover-copy .primary{width:100%}.scene{aspect-ratio:1.12}.scene:after{font-size:13px;left:3%}.object .label{font-size:12px;padding:2px 5px}.room-heading h1{font-size:23px}.chair{border-width:4px;border-top-width:16px}.cup{height:25px}.can{height:55px;font-size:12px}.door .drawing:before{font-size:10px;padding:4px}.inventory{padding:15px}.inventory-heading{align-items:flex-start;flex-direction:column;gap:3px}.item{padding:8px 10px;font-size:14px}.message{font-size:14px}.ending{min-height:540px;padding-top:65px}.ending h1{font-size:40px}.ending p{font-size:14px}.menu .drawing{font-size:14px}}
/* 操作と幅の調整。謎の座標・内容は game.js の設定をそのまま使用。 */
html { scrollbar-gutter: stable; }
button { touch-action: manipulation; }
.app, .cover > *, .inventory, .inventory-heading > *, #items > * {
  min-width: 0;
}
header, .room-heading, footer { gap: 12px; flex-wrap: wrap; }
.cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cover-copy h1 { font-size: clamp(36px, 5vw, 60px); }
.cover-copy .primary { max-width: 100%; }
.cover-copy .primary span { margin-left: 12px; }
.room-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
}
.room-nav button { min-width: 0; min-height: 52px; padding: 10px 8px; }
#dots { gap: 4px; }
#dots span { padding: 2px 5px; }
.item { max-width: 100%; text-align: left; }
.item > span:last-child, #selected-label { overflow-wrap: anywhere; }
.item-symbol { flex: 0 0 auto; }
#inspect { max-width: 100%; min-height: 48px; }
/* ホバーのないタッチ画面でも、押せる対象を見分けられる目印。 */
button.object { min-width: 44px; box-shadow: inset 0 0 0 1px #f5d99980; }
button.object .label { border: 1px solid #dac38c; }
button.object:hover, button.object:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  background: #f4da9326;
}
/* テーブル下端は椅子の操作領域と重なるので、名前を上側へ。 */
.table .label { top: 0; bottom: auto; }
.side-table { pointer-events: none; }
dialog {
  color-scheme: light;
  max-width: calc(100% - 24px);
  max-height: 85vh;
  max-height: 85dvh;
  overscroll-behavior: contain;
}
dialog input { min-height: 64px; font-size: 36px; }
dialog form button { min-height: 52px; }
.modal-top { position: sticky; top: -1px; background: #f0e8d4; z-index: 1; }
.coaster { flex: 0 1 95px; min-width: 0; }
@media (max-width: 850px) {
  .cover { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 0; }
  .cover-art { height: 240px; }
  .cover-copy h1 { font-size: clamp(32px, 6vw, 44px); }
  .cover-copy h1 br { display: none; }
}
@media (max-width: 650px) {
  .cover-art { box-shadow: 6px 6px 0 #122725; }
  .object .label { font-size: 14px; padding: 2px 4px; }
  .inventory-heading { align-items: stretch; }
  #items { display: grid; grid-template-columns: minmax(0, 1fr); }
  #inspect { width: 100%; }
  dialog { padding: 18px; width: calc(100% - 24px); }
  #modal-body .note { font-size: clamp(18px, 5vw, 25px); }
  .coaster-view { gap: 6px; }
}
/* 公開前の操作表示調整：選択中の持ちものと入力画面の現在位置を明確に。 */
.item.selected.used { opacity: 1; }
dialog button:focus-visible, dialog input:focus-visible {
  outline: 3px solid #315b49;
  outline-offset: 3px;
}