/* Compact 2000s game panel, laid out for a phone instead of a desktop row. */
@media(max-width:600px){
 body{background:#d2d3c9}.browser{border:2px outset #eee;background:#f6f5ed}.titlebar{background:linear-gradient(90deg,#3b5145,#7d9380);font-size:10px;padding:5px 6px}.address{border-bottom:1px solid #a8a99c;background:#d9d9cf;padding:4px 5px}.address span:last-child{display:none}
 main#game{padding:7px 9px 8px;background:#f6f5ed}header{display:block;position:relative;text-align:center;padding:5px 0 12px;border-bottom:1px solid #a4ac98}header h1{font-size:23px;letter-spacing:-.5px;margin:2px 0 4px;white-space:nowrap}header p{font-size:10px;color:#68705e}header #help{position:absolute;right:0;bottom:-1px;font-size:10px;padding:2px;background:#f6f5ed}
 .day{margin:9px 0 6px;border:1px solid #a2af94;background:linear-gradient(#e5ebdd,#d4dec9);padding:3px 5px;box-shadow:inset 0 1px #fff}.day #day{font-size:14px;font-weight:bold;color:#3b4b32}.day #bgm-toggle{min-height:39px;min-width:108px;font-size:11px;background:#f0f0e7;border-color:#fffff6;color:#3f4d36}
 #prompt{font-size:14px;line-height:1.5;text-align:left;border-left:3px solid #7a8f65;padding:3px 0 3px 7px;margin:8px 0;color:#35452b}
 .scene{gap:0;border:1px solid #aeb39e;padding:5px;background:#e9e9dd;box-shadow:inset 1px 1px #fff}#room{max-width:100%;border:1px inset #efefe3;background:#eeece0}#room .room-render{border:0}.room-signals{display:none}
 .guide{display:grid;grid-template-columns:86px minmax(0,1fr);gap:5px;align-items:center;padding-top:4px}.guide #bird{grid-column:1;grid-row:1;width:86px;height:92px;flex:auto}.guide .bubble{grid-column:2;grid-row:1;background:#fffff7;border:1px solid #a8ad96;padding:7px 8px;font-size:11px;line-height:1.5;min-height:76px}.guide-order{font-size:12px;line-height:1.55;margin-top:4px;color:#9b3028}.bubble:after{display:block;left:-5px;top:25px;bottom:auto;width:8px;height:8px;background:#fffff7;border:0;border-left:1px solid #a8ad96;border-bottom:1px solid #a8ad96}
 .instruction{font-size:10px;margin:7px 0 5px;color:#68705e;text-align:center}.controls{padding:6px;gap:6px;border:2px outset #f5f5ed;background:#d6d8ca;box-shadow:0 1px 0 #a6ad96}.sound{padding:4px;border:2px outset #fffff5;background:#efefe4}.sound.playing{background:#e0e8d5;border-style:inset;outline:0}.sound-toggle{min-height:30px;font-size:12px;gap:5px}.sound-toggle svg{width:24px;height:24px;fill:#68735d}.sound-toggle:after{content:'';width:5px;height:5px;flex:0 0 5px;background:#a9ad9e;box-shadow:inset 1px 1px #717669}.playing .sound-toggle:after{background:#6d9149;box-shadow:0 0 2px #7e9d5c}.playing .sound-toggle svg{fill:#4c6740}.volumes{margin-top:3px}.volumes button{height:39px;font-size:13px;background:#e3e5d9;border-color:#f7f7ed;padding:3px 0}.volumes button[aria-pressed=true]{background:#758a60;color:#fff;border-color:#a3b38e;font-weight:bold}.light-card .sound-toggle{min-height:73px;font-size:12px;gap:3px}.light-card .sound-toggle:after{position:absolute;margin:0 0 52px 48px}.light-card{position:relative}
 .bottom{border:0;padding-top:0;margin-top:9px;gap:0}.bottom span{display:none}#finish{min-height:45px;font-size:16px;font-weight:bold;background:linear-gradient(#e0e9d5,#b8c9a5);border:2px outset #eff5e6;color:#35432b;letter-spacing:2px;box-shadow:0 1px 1px #67765d55}#finish:active{border-style:inset}footer{margin-top:9px;padding-top:6px;font-size:8px;border-color:#b8bdac;color:#7e8574}
 .rage-mode .titlebar{background:#252525}.rage-mode main#game,.rage-mode #help{background:#030303}.rage-mode .scene{background:#080808;border-color:#292929;box-shadow:none}.rage-mode .guide #bird{width:86px;height:92px}.rage-mode .guide .bubble{background:#0b0b0b;border-color:#444;font-size:11px;min-height:76px}.rage-mode .guide-order{font-size:12px}.rage-mode .bubble:after{background:#0b0b0b;border-color:#444}.rage-mode .controls{background:#171717;border-color:#333;box-shadow:none}.rage-mode .sound{background:#202020;border-color:#444}.rage-mode .sound.playing{background:#262d23}.rage-mode .sound-toggle svg{fill:#999}.rage-mode #prompt{border-color:#555;color:#999}.rage-mode .day #day{color:#aaa}.rage-mode .day #bgm-toggle{background:#222;border-color:#444;color:#aaa}.rage-mode .bottom{border:0}.rage-mode #finish{background:#262626;border-color:#555;color:#ccc;box-shadow:none}.rage-mode .instruction{color:#777}
}
@media(max-width:600px) and (max-height:730px){header h1{font-size:21px}header{padding-top:2px;padding-bottom:10px}.day{margin:6px 0}.day #bgm-toggle{min-height:35px}.scene #room{max-width:260px}.guide{grid-template-columns:76px minmax(0,1fr)}.guide #bird,.rage-mode .guide #bird{width:76px;height:82px}.guide .bubble{padding:5px 7px;font-size:10px;min-height:68px}.guide-order,.rage-mode .guide-order{font-size:11px}.controls{padding:4px;gap:4px}.sound{padding:3px}.sound-toggle{min-height:27px}.volumes button{height:36px}.light-card .sound-toggle{min-height:67px}.instruction{margin:5px 0 4px}.bottom{margin-top:7px}#finish{min-height:42px}footer{margin-top:6px}}
@media(max-width:600px){.controls{padding:4px;gap:4px}.sound{padding:2px}.volumes button{height:40px;font-size:14px}.light-card .sound-toggle{min-height:73px}}
@media(max-width:600px) and (max-height:730px){.volumes button{height:39px}.light-card .sound-toggle{min-height:69px}}
@media(max-width:600px){#finish{width:100%;min-height:49px;font-size:18px;color:white;background:linear-gradient(#60834a,#3e612c);border:3px outset #9bb884;box-shadow:0 2px 0 #244219;text-shadow:0 1px #203c16}body.rage-mode #finish{background:linear-gradient(#79302c,#4d1515);border-color:#99514b;color:#fff2e9;box-shadow:0 2px 0 #290606}}
@media(max-width:600px){body.corrupting #finish{background:linear-gradient(#79302c,#4d1515);border-color:#99514b;color:#fff2e9;box-shadow:0 2px 0 #290606}}
/* Give the guide a larger portrait and let the instructions use the full width. */
@media(max-width:600px){
 .guide{grid-template-columns:116px minmax(0,1fr);row-gap:4px;column-gap:7px;font-size:14px;line-height:1.55}.guide #bird,.rage-mode #play .guide #bird{width:116px;height:124px;grid-column:1;grid-row:1}.guide .bubble{display:contents}.guide .bubble:after{display:none}.guide .guide-sentence{grid-column:2;grid-row:1;padding:7px 9px;border:1px solid #a8ad96;background:#fffff7;font-size:14px;line-height:1.6;align-self:center}.guide .guide-order,.rage-mode .guide-order{grid-column:1 / -1;grid-row:2;font-size:16px;line-height:1.6;margin:0;padding:6px 4px 4px;border-top:1px solid #b8bea8}.rage-mode .guide .guide-sentence{background:#0b0b0b;border-color:#444;color:#ddd}.rage-mode .guide .guide-order{border-color:#444}
 #corruption-bird{height:270px}#corruption-bird #bird{width:270px!important;height:285px!important}#corruption-speech{font-size:23px;line-height:1.8}.corruption-center{width:96vw;padding-left:9px;padding-right:9px}
}
@media(max-width:600px) and (max-height:730px){
 .scene #room{max-width:230px}.guide{grid-template-columns:104px minmax(0,1fr);column-gap:5px}.guide #bird,.rage-mode #play .guide #bird{width:104px;height:112px}.guide .guide-sentence{font-size:13px;padding:5px 7px}.guide .guide-order,.rage-mode .guide-order{font-size:15px;line-height:1.55;padding-top:5px}#corruption-bird{height:250px}#corruption-bird #bird{width:250px!important;height:265px!important}
}
@media(max-width:600px){.guide #bird,.rage-mode #play .guide #bird{height:108px}}
@media(max-width:600px) and (max-height:730px){.address{display:none}.guide #bird,.rage-mode #play .guide #bird{height:96px}}

/* Use the phone viewport for the room, including shorter phones. */
@media(max-width:600px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 .browser{width:100%;max-width:none;border:0;margin:0}
 main#game{padding:7px 4px 8px}
 .scene{width:100%;max-width:none;padding:0;gap:0}
 .scene #room{width:100%;max-width:none;margin:0;border-left:0;border-right:0}
 .scene .guide{padding:4px 5px 0}
}

/* Trim the room vertically as one stage, so animation and touch targets stay aligned. */
@media(max-width:600px){
 main#game{padding-top:4px}main#game:has(#play:not([hidden])){padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
 header{padding-bottom:7px}.day{margin:5px 0}#prompt{margin:5px 0}
 .scene #room{height:clamp(138px,23dvh,210px)}
 #room .room-stage{position:absolute;left:0;top:50%;transform:translateY(-50%)}
 .scene .guide{padding-top:2px}.guide .guide-order,.rage-mode .guide-order{padding-top:4px;padding-bottom:2px}
 .instruction{margin:4px 0}.instruction.first-day-guide{margin:4px 0}
 #play .bottom{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid #a4ac98;background:#f6f5ed;gap:0}
 #play .bottom #finish-check{display:none}#play #finish{min-height:46px}
 body.rage-mode #play .bottom,body.corrupting #play .bottom{background:#050505;border-color:#333}
}

/* Match the desktop browser banner while keeping the phone game layout. */
@media(max-width:600px){
 .browser,main#game{background:#fff}
 .titlebar{background:linear-gradient(90deg,#113b79,#6f9ac3);font-size:10px;line-height:1.25;padding:4px 6px}
 .titlebar>span:first-child{min-width:0;white-space:nowrap;overflow:hidden}.titlebar>span:last-child{flex:none;margin-left:5px}
 .menu{display:block;white-space:nowrap;overflow:hidden;background:#d6d3ce;border-bottom:1px solid #999;padding:3px 5px;font-size:9px;line-height:1.3}
 .address{display:flex;align-items:center;gap:5px;background:#d6d3ce;border-bottom:0;padding:3px 5px;font-size:9px;line-height:1.3}
 .address span:last-child{display:inline;flex:none}.address span:first-child{flex:none}
 .address #address{min-width:0;font-size:10px;background:#fff;border:2px inset #ddd;padding:2px 3px}
 header{display:grid;grid-template-columns:56px minmax(0,1fr) 82px;align-items:center;column-gap:6px;row-gap:2px;padding:4px 0 6px;border-bottom:1px solid #777;text-align:center}
 header>div{display:contents}
 header h1{grid-column:1 / -1;grid-row:1;font-size:clamp(20px,6vw,24px);line-height:1.3;letter-spacing:0;margin:0 0 2px;white-space:nowrap}
 header p{grid-column:2;grid-row:2;min-width:0;font-size:9px;line-height:1.4;color:inherit;margin:0}
 header #help{position:static;grid-column:1;grid-row:2;justify-self:start;min-height:30px;padding:5px 1px;font-size:10px;line-height:1.3;white-space:nowrap;background:transparent}
 header small{display:block;grid-column:3;grid-row:2;min-width:0;text-align:right;font-size:7.5px;line-height:1.5;white-space:nowrap}
 header .counter{font-size:12px;letter-spacing:1px;padding:1px 3px}
}
@media(max-width:350px){.menu{font-size:8px}header{grid-template-columns:52px minmax(0,1fr) 77px;column-gap:4px}header p{font-size:8.5px}header small{font-size:7px}header .counter{font-size:11px}}