/* The outer set stays in place. Every screen shares the same physical display. */
body {
  margin: 0;
  background: #f5efe6;
  color: var(--ink);
}
.play-stage {
  --desk: radial-gradient(ellipse at 20% 16%, #fff9ed 0%, transparent 54%),
          linear-gradient(125deg, #f1e4d3, #f3e3d8 58%, #e6cfbf);
  background: var(--desk);
}
.device {
  container: handset / size;
  position: relative;
  box-sizing: border-box;
  margin: auto;
  padding: 18px 8px 9px;
  border: 2px solid #afa997;
  border-radius: 42px;
  background: linear-gradient(114deg, #3c3c37, #191b19 18%, #252722 76%, #515149);
  box-shadow: inset 0 0 0 2px #57584e, 2px 2px 0 #827b6c,
              0 18px 42px -14px #50362770, 0 4px 9px #49342724;
}
.device::before {
  content: '';
  position: absolute;
  width: 40px; height: 6px;
  top: 6px; left: 50%; translate: -50% 0;
  border-radius: 9px;
  background: radial-gradient(circle at 89% 50%, #3b474b 1px, transparent 2px), #101310;
}
.device > .device-screen,
.device > .device-screen.is-playing {
  max-width: none; width: 100%; height: 100%; min-height: 0; min-width: 0;
  margin: 0; border-radius: 30px; box-shadow: none;
  position: relative; isolation: isolate;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.device > .device-screen { overflow: hidden auto; }
.device > .device-screen.is-playing,
.device > .device-screen:has(.ending-scene) { overflow: hidden; }
.device-screen.is-playing .game-content { min-height: 0; overscroll-behavior: contain; }
.device-screen .ending-scene { height: 100%; min-height: 0; }
.ending-scene header, .ending-actions { flex-shrink: 0; }
.device-screen .game-footer { border-radius: 0; }
.device-screen .opening-art { height: clamp(124px, 23dvh, 225px); }
.device-screen .opening { min-height: 100%; box-sizing: border-box; }
.device-screen .opening-progress { margin-top: 18px; }
.manuals { display: contents; }
.field-guide, .field-notes {
  align-self: center;
  color: #3e302c;
  font-size: 14px; line-height: 1.7;
  scrollbar-width: thin;
}
.guide-label { font: 600 10px/1.4 system-ui,sans-serif; letter-spacing: .16em; color: #85524d; margin: 0 0 9px; }
.guide-label span { padding: 0 5px; color: #ae8b76; }
.play-stage aside h2 { margin: 0 0 18px; font: 650 clamp(21px,2vw,30px)/1.4 Georgia,"Yu Mincho",serif; }
.guide-list { counter-reset: guide; list-style: none; padding: 0; margin: 0; }
.guide-list li { counter-increment: guide; position: relative; padding: 12px 0 12px 33px; border-top: 1px solid #75544235; }
.guide-list li::before { content: counter(guide,decimal-leading-zero); position: absolute; left: 0; top: 15px; font: 600 12px/1.4 Georgia,serif; color: #93445a; }
.field-guide p:not(.guide-label), .field-notes dd { margin: 3px 0 0; color: #605249; }
.field-notes { padding-left: clamp(13px,1.8vw,31px); border-left: 1px solid #75544242; }
.field-notes dl { margin: 0; }
.field-notes dt, .field-guide b { font-size: 15px; font-weight: 700; }
.field-notes dt:not(:first-child) { margin-top: 14px; }
.manual-nav { display: none; }

@media (min-width:1100px) {
  body { height: var(--mw-viewport,100dvh); display: flex; flex-direction: column; }
  body > :not(.play-stage) { flex-shrink: 0; }
  .play-stage {
    flex: 1 1 0; min-height: 0;
    display: grid; grid-template: 'steps phone hints' minmax(0,1fr) / minmax(190px,256px) minmax(0,564px) minmax(190px,256px);
    justify-content: center; align-items: center; gap: clamp(20px,3.3vw,72px); padding: 12px 28px 18px;
    box-sizing: border-box; container-type: size;
  }
  .player-area { grid-area:phone; height:min(100%,1040px); width:min(100%,clamp(390px,74cqh,560px)); min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px; margin:auto; }
  .device { height:100%; width:100%; min-height:0; }
  .field-guide { grid-area: steps; }
  .field-notes { grid-area: hints; }
  .play-stage aside { max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width:1099px) {
  body { --mw-top-space:max(var(--mw-banner-top,0px),env(safe-area-inset-top)); padding-top:var(--mw-top-space); }
  .play-stage { padding: 4px 0 0; }
  .player-area { width:min(100%,550px); margin:auto; display:grid; gap:8px; }
  .device {
    --mw-device-height:max(160px,calc(min(var(--mw-viewport,100svh),100svh) - var(--mw-header,0px) - var(--mw-banner,0px) - var(--mw-top-space,0px) - var(--mw-controls,52px) - 12px));
    width: min(100%,550px);
    height:var(--mw-device-height);
    padding: 13px 3px 5px; border-width: 1px; border-radius: 24px;
    box-shadow: inset 0 0 0 1px #646358, 0 5px 15px #55443222;
  }
  .device::before { top: 4px; width: 32px; height: 5px; }
  .device > .device-screen, .device > .device-screen.is-playing { border-radius: 18px; }
  .manuals { display: block; margin: var(--mw-banner,0px) auto 0; max-width: 590px; padding: 12px clamp(18px,5vw,40px) calc(35px + var(--mw-banner,0px)); }
  .manual-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: var(--mw-banner-top,0px); z-index: 1; background:#f5e8da; border-bottom:1px solid #75544235; padding: 7px 0; }
  .manual-nav h2 { font-size: 15px; }
  .manual-nav a { color: #802b46; padding: 7px 4px; }
  .field-guide, .field-notes { padding: 20px 0 8px; border: 0; }
  .field-guide h2, .field-notes h2 { margin-bottom: 10px; }
  .guide-list li { padding-block: 9px; }
}
@media (max-width:599px) and (orientation:portrait) {
  .device { width:min(100%,max(280px,calc(var(--mw-device-height) / 1.4))); }
  .device:has(.setup-shell :focus) { width:100%; }
}
/* With mobile browser chrome and an ad, leave room for the first reply below the tabs. */
@container handset (max-height: 570px) {
  .is-chat .chat-messages { padding-bottom:4px; }
  .is-chat .chat-messages .message:last-child { margin-bottom:5px; }
  .is-chat .reply-area { padding-top:6px; }
  .is-chat .reply { padding:8px 11px; line-height:1.6; }
  .is-chat .reply small { margin-top:2px; }
  .is-chat .reply-area h2 { margin:0 0 4px; }
  .is-chat .decks { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin:4px 0 3px; }
  .is-chat .decks button { padding:3px; min-height:44px; line-height:1.25; }
  .is-chat .decks button span { display:inline-block; }
}
/* On a short display the opening portraits share a row with the wordmark. */
@container handset (max-height: 570px) {
  .device-screen .opening {
    display: grid; grid-template-columns: 1fr 98px; align-content: center;
    padding: 14px 20px; min-height: 100%;
  }
  .opening > * { grid-column: 1 / -1; }
  .opening > .wordmark { grid-column: 1; grid-row: 1; align-self: center; text-align: left; font-size: 28px; }
  .device-screen .opening-art { grid-column: 2; grid-row: 1; height: 68px; width: 98px; margin: 0; }
  .opening-art .portrait-card { width: 43px; height: 53px; padding: 2px; }
  .opening-art .portrait-card.one { left: 7px; top: 3px; }
  .opening-art .portrait-card.two { left: -3px; top: 4px; }
  .opening-art .connection { top: 25px; left: calc(50% - 11px); width: 22px; height: 22px; }
  .opening-art .connection svg { width: 12px; }
  .opening .story h1 { margin: 6px 0; font-size: 23px; line-height: 1.4; }
  .opening .story p { line-height: 1.7; }
  .device-screen .opening-progress { margin: 12px 0; }
  .opening > .text-button { margin: 3px auto; }
  .opening > .footnote { margin-top: 8px; }
}
/* Registration keeps a real submit button in the form, outside the scrolling fields. */
.device-screen:has(.setup-shell) { overflow:hidden; }
.setup-shell { height:100%; display:flex; flex-direction:column; position:relative; }
.setup-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scroll-padding-block:10px; }
.setup-scroll .setup { padding-bottom:12px; }
.setup-scroll textarea { font-size:16px; }
.setup .lead { margin-bottom:14px; }
.setup .preset-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:0; padding:0; background:#eee5df; border-radius:12px; }
.setup .preset, .setup .preset.selected {
  display:grid; place-items:center; padding:0; min-height:44px; height:44px; border:0; border-radius:11px;
  white-space:nowrap; text-align:center; background:transparent; font-size:13px; font-weight:650;
}
.setup .preset.selected { color:#852941; background:#fffafa; box-shadow:inset 0 0 0 1.5px #ae5065,0 2px 4px #4b273215; }
#preset-summary { margin:5px 3px 11px; color:var(--muted); font-size:12px; }
.setup-dock { position:relative; flex:none; z-index:2; padding:8px clamp(12px,4%,22px) max(9px,env(safe-area-inset-bottom)); }
.setup-dock .error { margin:0; }
.setup-dock .error:not(:empty) { margin-bottom:4px; }
.setup-dock .primary { min-height:44px; border-radius:16px; }
.setup-dock, .device-screen.is-playing .game-footer {
  background:#faf6f1; border-top:1px solid #fffaf4; box-shadow:0 -3px 12px #4c28251a;
}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))) {
  .setup-dock, .device-screen.is-playing .game-footer {
    background:linear-gradient(130deg,#fffdf9e8,#f7ece6e0);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more), (forced-colors:active) {
  .setup-dock, .device-screen.is-playing .game-footer { background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.tab-marker { position:absolute; inset:auto 12% 0; height:2px; border-radius:3px; background:currentColor; pointer-events:none; }
@media (min-width:1100px) {
  .play-stage { position:relative; }
  .play-stage::before, .play-stage::after {
    content:""; position:absolute; width:clamp(22px,calc((100% - 1200px)/2),240px); height:min(88%,440px);
    background-repeat:no-repeat; background-size:auto 100%; pointer-events:none;
  }
  .play-stage::before { top:0; left:0; background-image:url('./src/frond-left.svg'); background-position:top left; }
  .play-stage::after { bottom:0; right:0; background-image:url('./src/frond-right.svg'); background-position:bottom right; }
}
@media (max-width:1099px) {
  .manuals .guide-label { display:flex; align-items:center; gap:4px; margin-bottom:6px; }
  .manuals .guide-label::after { content:""; flex:1; height:30px; background:url('./src/frond-left.svg') right 33% / 64px auto no-repeat; }
  .field-notes .guide-label::after { background-image:url('./src/frond-right.svg'); }
}
/* The native dialog keeps Escape and focus containment. Its shade belongs to the display. */
.match-dialog::backdrop { background:transparent; }
body:has(.match-dialog[open]) .device-screen::after {
  content:""; position:absolute; inset:0; z-index:40; border-radius:inherit; pointer-events:none;
  background:linear-gradient(165deg,#332a3aab,#38232ebe);
}
.match-dialog { background:#fffaf5; border:1px solid #ead5ce; box-shadow:none; padding:clamp(12px,calc(var(--mw-screen-h) * .035),26px) 18px; }
.match-dialog .match-portraits { margin-bottom:10px; }
.match-dialog .match-portraits > .portrait { width:clamp(44px,calc(var(--mw-screen-h) * .13),90px); height:clamp(48px,calc(var(--mw-screen-h) * .145),100px); }
.match-dialog h2 { margin:5px 0; }
.match-dialog p { margin:5px 0 12px; }
.match-dialog .primary, .match-dialog .secondary { min-height:44px; padding-block:8px; }
.match-dialog .secondary { margin-top:6px; }
@container handset (max-height:380px) {
  .setup-scroll textarea { height:clamp(52px,27cqh,88px); min-height:0; }
  .setup-dock { padding-block:4px; }
}
.match-dialog form { position:relative; isolation:isolate; }
.match-sparks { position:absolute; pointer-events:none; inset:0 0 auto; height:92px; z-index:-1; }
.match-sparks i { position:absolute; left:50%; top:52%; width:9px; height:9px; opacity:0; background:#bf8250; clip-path:polygon(50% 0,64% 37%,100% 50%,64% 62%,50% 100%,37% 63%,0 50%,36% 38%); }
@media (prefers-reduced-motion:no-preference) {
  .match-dialog[open] .match-sparks i { animation:match-spark 620ms ease-out both; }
  .match-dialog[open] .match-portraits > svg:first-child { animation:meet-left 320ms ease-out both; }
  .match-dialog[open] .match-portraits > svg:last-child { animation:meet-right 320ms ease-out both; }
  @keyframes meet-left { from { transform:translateX(-16px) rotate(-5deg); } }
  @keyframes meet-right { from { transform:translateX(16px) rotate(5deg); } }
  @keyframes match-spark {
    0% { opacity:0; transform:rotate(var(--ray)) translateY(-22px) scale(.4); }
    35% { opacity:1; }
    100% { opacity:0; transform:rotate(var(--ray)) translateY(-79px) scale(.85); }
  }
  body dialog[open]:not(.match-dialog) { animation:sheet-enter 160ms ease-out; }
  @keyframes sheet-enter { from { opacity:.6; transform:translateY(7px); } }
  .like-pulse { position:relative; opacity:1!important; }
  .like-pulse::after {
    content:'♥'; position:absolute; z-index:3; pointer-events:none; left:50%; top:50%;
    color:#bd355d; text-shadow:0 0 4px #fff,0 0 10px #f6b8a2; font:700 25px/1 system-ui; animation:like-heart 260ms ease-out both;
  }
  @keyframes like-heart {
    0% { opacity:.5; transform:translate(-50%,-40%) scale(.55); }
    48% { opacity:1; transform:translate(-50%,-65%) scale(1.32); }
    100% { opacity:0; transform:translate(-50%,-105%) scale(1); }
  }
  .like-leaving { animation:like-leave 115ms 175ms ease-in both; }
  @keyframes like-leave { to { opacity:0; transform:scale(.96); } }
  .toast { animation:sheet-enter 140ms ease-out; }
}
/* Native modals remain in the top layer; use the display's rect for their bounds. */
body dialog[open] {
  position: fixed; inset: auto; margin: 0;
  left: var(--mw-center-x,50vw); top: var(--mw-center-y,50dvh); translate: -50% -50%;
  box-sizing: border-box; max-width: calc(var(--mw-screen-w,100vw) - 20px);
  max-height: calc(var(--mw-screen-h,100dvh) - 20px); overflow-y:auto; overscroll-behavior: contain;
}
body #filter-dialog form { max-height: calc(var(--mw-screen-h,100dvh) - 24px); }
body #guide-dialog[open] { translate: -50% 0; margin: 0; bottom: auto; max-height: calc(var(--mw-screen-h,100dvh) - 20px); }
@media (max-width:359px), (max-height:740px) {
  .device-screen .game-header { padding-block: 5px; }
  .device-screen .ending-scene { padding: 12px; }
}

/* Leave the last line of dialogue visible above the choices on short handsets. */
@media (max-width:390px) {
  .site-header:has(a[href*="version"]) { gap:4px; padding-inline:6px; font-size:11px; }
}
@container handset (max-height:540px) {
  .device-screen .visit-v8 { padding:8px 10px; }
  .visit-v8 header { padding-bottom:4px; gap:8px; }
  .visit-v8 header .avatar { width:32px; height:32px; }
  .visit-v8 header h1 { font-size:16px; }
  .visit-v8 .ending-log { padding:5px 0; gap:5px; }
  .visit-v8 .ending-actions { max-height:52%; overflow-y:auto; padding-top:4px; }
  .visit-v8 .ending-actions button { margin:0; min-height:44px; padding:6px 9px; line-height:1.35; }
  .visit-v8 .ending-actions p { margin:2px 0; }
}

/* Game controls sit on the desk, outside the simulated application. */
.rl-app-header { flex-shrink:0; }
.legacy-links:not([hidden]) { display:flex; justify-content:flex-end; gap:16px; padding:4px 16px; font-size:12px; background:var(--rl-foam); }
.game-controls { padding:0 12px calc(16px + max(0px,env(safe-area-inset-bottom) - var(--mw-banner,0px))); color:#53483f; }
.control-status { display:flex; align-items:center; gap:12px; min-height:44px; font-size:12px; }
.control-name { font-weight:700; letter-spacing:.04em; }
.control-tools { display:flex; align-items:center; gap:12px; margin-left:auto; }
.control-tools a, .sound-button { display:inline-flex; align-items:center; min-height:44px; padding:4px 0; color:inherit; font-size:12px; }
.sound-controls { display:inline-flex; align-items:center; gap:10px; }
.sound-button { white-space:nowrap; }
.mental-status { display:inline-flex; align-items:center; gap:4px; font-weight:700; }
.mental-status svg { width:16px; height:16px; color:var(--rose); }
.mental-status small { font-size:10px; font-weight:400; }
.game-controls .time-actions { margin:0; grid-template-columns:1fr 1.1fr; gap:8px; }
.game-controls .rest-button { background:#fffaf2; padding:3px 4px; min-height:44px; border-color:#a38d7d; font-size:12px; line-height:1.25; }
.game-controls .next-button { padding:3px 8px; min-height:44px; }
.game-controls .next-button small, .game-controls .rest-button small { font-size:10px; line-height:1.2; }
.game-controls .rest-button strong, .game-controls .next-button span { font-size:12px; line-height:1.25; }
.game-header { padding-block:10px; }
.game-header .wordmark { margin:0; }
.device-screen .game-footer { padding-bottom:4px; }
.avatar-picker { flex:none; width:172px; text-align:center; }
.avatar-arrows { display:grid; grid-template-columns:44px 84px 44px; align-items:center; }
.profile-mini .avatar-picker svg.portrait { width:84px; height:98px; border-radius:12px; }
.avatar-arrows .icon-button { width:44px; height:44px; padding:10px; }
.avatar-arrows .icon-button svg { width:22px; height:22px; }
.avatar-count { display:block; color:var(--muted); font-size:12px; }
.profile-mini { gap:16px; }
.profile-mini > div:last-child { min-width:0; }
.profile-mini .avatar-picker + div p { margin-bottom:0; }
@container handset (max-width:420px) {
  .profile-mini { flex-direction:column; align-items:center; gap:8px; text-align:center; }
  .profile-mini .avatar-picker + div p { display:none; }
}
@media (max-width:359px) {
  .control-status { gap:8px; }
  .control-tools { gap:8px; }
  .sound-controls { gap:8px; }
  .mental-status small { display:none; }
}

.avatar-ability { display:block; margin-top:4px; white-space:nowrap; font-size:11px; color:var(--ink); }

/* Keep decisions visible when a host banner leaves a short display. */
body #guide-dialog[open] { display:flex; flex-direction:column; }
#guide-dialog > small, #guide-dialog > h2, #guide-dialog > .dialog-actions { flex-shrink:0; }
#guide-dialog > p { min-height:0; overflow-y:auto; margin:8px 0; }
body #confirm-dialog[open], #confirm-dialog form { display:flex; flex-direction:column; min-height:0; }
/* Time controls are outside the app; their confirmation uses the visible browser area. */
body #confirm-dialog[open] { top:var(--mw-dialog-center-y,50dvh); max-height:calc(var(--mw-dialog-h,100dvh) - 20px); }
#confirm-dialog h2, #confirm-dialog .dialog-actions { flex-shrink:0; }
#confirm-copy { min-height:0; overflow-y:auto; }