:root {
  --ink:#f5f8ff; --muted:#a9b7ce; --blue:#8fc9ff; --cyan:#7ee7ff;
  --panel:rgba(7,13,27,.93); --panel-soft:rgba(12,21,40,.82);
  --line:rgba(205,224,255,.16); --shadow:0 28px 80px rgba(0,0,0,.38);
  color:var(--ink); background:#050a13;
  font-family:"SF Pro Display","SF Pro Text","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-synthesis:none; text-rendering:optimizeLegibility;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050a13}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus:not(:focus-visible){outline:none}
button:focus-visible{outline:2px solid rgba(158,216,255,.72);outline-offset:2px}
img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.app-shell{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.app-shell input,.app-shell select{user-select:auto;-webkit-user-select:auto}
.character-hotspot:focus-visible{outline:none}
.hidden{display:none!important}
.app-shell,.title-screen,.profile-screen,.game{position:relative;width:100vw;height:100vh;overflow:hidden}

/* Portrait gate */
.orientation-gate{display:none;position:fixed;z-index:9999;inset:0;padding:36px;background:#030711;text-align:center;place-content:center}
.orientation-gate .rotate-mark{margin:0 auto 18px;font-size:46px;color:#9ed7ff}
.orientation-gate h2{margin:0 0 10px;font-size:25px}
.orientation-gate p{max-width:320px;margin:0 auto 22px;color:#91a0b9;line-height:1.65;font-size:13px}
.orientation-gate button{border:0;border-radius:10px;padding:13px 24px;background:linear-gradient(135deg,#b4e7ff,#789cff);color:#071020;font-weight:800}
@media (orientation:portrait) and (max-width:900px){.orientation-gate{display:grid}.app-shell{visibility:hidden}}

/* Title */
.title-screen{background:#071020}
.title-bg,.profile-bg{position:absolute;inset:-2%;background:url('./assets/room-night-v2.webp') center/cover no-repeat;animation:slow-breathe 18s ease-in-out infinite}
.title-shade,.profile-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,7,16,.94) 0%,rgba(4,8,18,.72) 35%,rgba(4,8,18,.13) 68%,rgba(4,8,18,.32)),linear-gradient(0deg,rgba(2,5,12,.48),transparent 60%)}
.title-rain{position:absolute;inset:0;opacity:.16;background:repeating-linear-gradient(105deg,transparent 0 22px,rgba(187,226,255,.25) 23px 24px,transparent 25px 52px);background-size:120px 100%;animation:rain 1.25s linear infinite}
.title-fish{position:absolute;z-index:1;right:4vw;bottom:-14vh;width:clamp(390px,43vw,720px);max-height:102vh;object-fit:contain;filter:drop-shadow(0 28px 32px rgba(0,0,0,.34));animation:fish-idle 6s ease-in-out infinite}
.title-content{position:absolute;z-index:2;left:clamp(44px,8vw,138px);top:50%;transform:translateY(-50%);width:min(560px,55vw)}
.title-kicker,.eyebrow{margin:0 0 19px;color:#8fc6f7;font-size:10px;font-weight:700;letter-spacing:.28em}
.title-content h1{margin:0;font-weight:760;font-size:clamp(42px,5.7vw,86px);line-height:.98;letter-spacing:-.075em;text-shadow:0 20px 45px rgba(0,0,0,.34)}
.title-content h1 span{color:#a9dcff}
.title-copy{margin:24px 0 32px;color:#c4d0e2;font-size:14px;line-height:1.9;letter-spacing:.04em}
.title-actions{display:grid;width:min(345px,100%);gap:9px}
.title-actions button{display:flex;align-items:center;justify-content:space-between;min-height:49px;border-radius:4px;padding:0 17px;text-align:left;transition:.2s ease}
.title-primary{border:1px solid rgba(199,228,255,.34);background:linear-gradient(105deg,rgba(129,182,235,.88),rgba(111,132,198,.84));font-weight:750;box-shadow:0 18px 46px rgba(19,62,116,.25)}
.title-primary small{font-weight:500;font-size:10px;color:rgba(255,255,255,.72)}
.title-primary:disabled{cursor:not-allowed;opacity:.48;filter:saturate(.4)}
.title-secondary{border:1px solid rgba(212,228,255,.18);background:rgba(7,14,28,.55);backdrop-filter:blur(12px);color:#d8e3f3}
.title-actions button:not(:disabled):hover{transform:translateX(5px);filter:brightness(1.08)}
.title-version{margin:26px 0 0;color:#6f809a;font-size:9px;letter-spacing:.17em}

/* Profile */
.profile-screen{background:#071020}
.profile-bg{background-image:url('./assets/room-sunset-v2.webp')}
.profile-shade{background:linear-gradient(90deg,rgba(3,7,15,.96),rgba(6,10,20,.78) 44%,rgba(7,10,19,.24))}
.profile-card{position:absolute;z-index:2;left:clamp(38px,9vw,150px);top:50%;transform:translateY(-50%);width:min(430px,43vw)}
.back-title{margin:0 0 35px;padding:0;border:0;background:none;color:#8fa4c1;font-size:12px}
.profile-card h2{margin:0 0 29px;font-size:clamp(31px,4vw,52px);line-height:1.08;letter-spacing:-.06em}
.profile-card label{display:grid;gap:8px;margin:14px 0;color:#aebed5;font-size:11px;letter-spacing:.08em}
.profile-card input,.profile-card select{width:100%;height:47px;border:1px solid rgba(204,224,255,.17);border-radius:5px;padding:0 14px;background:rgba(7,13,26,.66);outline:none;backdrop-filter:blur(12px)}
.profile-card input:focus,.profile-card select:focus{border-color:#80caff;box-shadow:0 0 0 3px rgba(96,181,255,.11)}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.enter-button{width:100%;height:50px;margin-top:20px;border:0;border-radius:5px;padding:0 18px;background:linear-gradient(100deg,#b6e7ff,#7e9fff);color:#071022;text-align:left;font-weight:850}
.enter-button span{float:right;font-size:19px}
.local-note{margin:15px 0 0;text-align:center;color:#70819a;font-size:10px}

/* Scene layers */
.game{background:#050a13}
.scene,.scene-bg,.weather-layer,.scene-light,.scene-vignette{position:absolute;inset:0}
.scene{overflow:hidden}
.scene-bg{inset:-1.5%;opacity:0;background-position:center;background-size:cover;background-repeat:no-repeat;transition:opacity 1.2s ease,filter 1.2s ease;animation:slow-breathe 16s ease-in-out infinite}
.scene-bg-morning{background-image:url('./assets/room-morning-v2.webp')}
.scene-bg-afternoon{background-image:url('./assets/room-afternoon-v2.webp')}
.scene-bg-sunset{background-image:url('./assets/room-sunset-v2.webp')}
.scene-bg-night{background-image:url('./assets/room-night-v2.webp')}
.scene[data-time="morning"] .scene-bg-morning,.scene[data-time="afternoon"] .scene-bg-afternoon,.scene[data-time="sunset"] .scene-bg-sunset,.scene[data-time="night"] .scene-bg-night,.scene[data-time="late"] .scene-bg-night{opacity:1}
.scene[data-time="late"] .scene-bg-night{filter:brightness(.63) saturate(.76)}
.scene-light{background:linear-gradient(90deg,rgba(2,6,13,.35),transparent 47%,rgba(2,6,13,.05)),linear-gradient(0deg,rgba(2,5,12,.44),transparent 58%);pointer-events:none}
.scene-vignette{background:radial-gradient(ellipse at 56% 43%,transparent 42%,rgba(2,5,12,.5));pointer-events:none}
.weather-layer{z-index:1;pointer-events:none}
.scene[data-weather="rain"] .weather-layer,.scene[data-weather="storm"] .weather-layer{opacity:.2;background-image:repeating-linear-gradient(106deg,transparent 0 22px,rgba(187,226,255,.36) 23px 24px,transparent 25px 52px);background-size:118px 100%;animation:rain 1.15s linear infinite}
.scene[data-weather="storm"] .weather-layer{opacity:.35}
.scene[data-weather="storm"] .weather-layer:after{content:"";position:absolute;inset:0;background:rgba(143,193,255,.3);animation:lightning 9s infinite}
.scene[data-weather="snow"] .weather-layer{opacity:.55;background:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.8px);background-size:42px 42px;animation:snow 12s linear infinite}
.fish-sprite{position:absolute;z-index:2;right:3.8vw;bottom:-12vh;width:clamp(360px,39vw,650px);max-height:92vh;object-fit:contain;transform-origin:70% 84%;filter:drop-shadow(0 24px 26px rgba(0,0,0,.32));animation:fish-idle 5.4s ease-in-out infinite;transition:filter .5s,opacity .5s}
.scene[data-mood="fishing"] .fish-sprite{filter:saturate(1.13) drop-shadow(0 22px 26px rgba(0,0,0,.3));animation-duration:3.7s}
.scene[data-mood="angry"] .fish-sprite{filter:saturate(1.16) hue-rotate(-4deg) drop-shadow(0 0 22px rgba(255,111,121,.18))}
.scene[data-mood="sleepy"] .fish-sprite{filter:brightness(.82) saturate(.83) drop-shadow(0 22px 26px rgba(0,0,0,.3));animation-duration:7s}
.scene[data-mood="soft"] .fish-sprite{filter:brightness(1.04) saturate(1.04) drop-shadow(0 24px 27px rgba(25,54,96,.3))}
.character-hotspot{position:absolute;z-index:4;right:3%;bottom:13%;width:40%;height:65%;border:0;background:transparent}

/* HUD */
.game-hud{position:absolute;z-index:12;top:0;left:0;right:0;height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:15px 24px;background:linear-gradient(180deg,rgba(2,6,14,.66),transparent)}
.hud-left,.hud-right{display:flex;gap:7px}.hud-right{justify-content:flex-end}
.hud-button{height:32px;border:1px solid rgba(211,229,255,.16);border-radius:7px;background:rgba(6,13,27,.4);backdrop-filter:blur(10px);color:#d6e3f3}
.hud-button:hover,.hud-button.active{border-color:rgba(157,213,255,.46);background:rgba(77,123,175,.28);color:#fff}
.text-control{padding:0 11px;font-size:9px;letter-spacing:.14em}
.icon-control{position:relative;width:34px;font-size:15px}
.has-badge em{display:none;position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;padding:0 4px;border-radius:10px;background:#ea7784;color:#fff;font-size:9px;font-style:normal;line-height:15px}
.has-badge em.show{display:block}
.hud-center{text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.hud-center strong{display:block;font-size:11px;letter-spacing:.08em;font-weight:650}
.hud-center span{display:flex;justify-content:center;gap:8px;margin-top:5px;color:#9dadc4;font-size:9px;letter-spacing:.1em}
.hud-center i{font-style:normal}.hud-center b{font-weight:400;color:#66748a}
.location-card{position:absolute;z-index:5;left:26px;top:98px;max-width:300px;padding-left:13px;border-left:2px solid rgba(145,207,255,.65);text-shadow:0 2px 10px rgba(0,0,0,.65)}
.location-card small{display:block;color:#8cc8f5;font-size:8px;letter-spacing:.2em}
.location-card strong{display:block;margin:6px 0 4px;font-size:15px;letter-spacing:.02em}
.location-card span{display:block;color:#b7c5d8;font-size:11px;line-height:1.5}

/* Dialogue */
.dialogue{position:absolute;z-index:10;left:50%;bottom:24px;width:min(1120px,calc(100vw - 92px));min-height:155px;transform:translateX(-50%);border:1px solid rgba(215,231,255,.22);border-radius:5px;padding:28px 86px 28px 31px;background:linear-gradient(100deg,rgba(5,10,22,.95),rgba(12,21,40,.88));box-shadow:0 20px 60px rgba(0,0,0,.36);backdrop-filter:blur(18px)}
.nameplate{position:absolute;left:0;top:-38px;display:flex;align-items:center;gap:12px;min-width:176px;height:38px;padding:0 16px;border-radius:5px 5px 0 0;background:linear-gradient(110deg,#6e9bd5,#777eb8);box-shadow:0 7px 18px rgba(0,0,0,.2)}
.nameplate span{font-size:14px;font-weight:780}.nameplate small{color:rgba(255,255,255,.72);font-size:8px;letter-spacing:.16em}
.dialogue>p{min-height:58px;margin:0;color:#f2f6ff;font-size:clamp(15px,1.36vw,19px);line-height:1.9;letter-spacing:.018em;white-space:pre-wrap}
.dialogue>p.typing:after{content:'▋';margin-left:2px;color:#8ccaff;animation:caret .7s infinite}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0 1px}
.choices:empty{display:none}
.choices button{min-height:41px;border:1px solid rgba(147,201,255,.26);border-radius:4px;padding:9px 13px;background:rgba(88,138,196,.12);text-align:left;font-size:12px;transition:.2s}
.choices button:hover{transform:translateY(-1px);border-color:rgba(157,216,255,.58);background:rgba(86,143,210,.24)}
.advance-button{position:absolute;right:20px;bottom:22px;display:grid;place-items:center;width:52px;height:45px;border:0;background:transparent;color:#8fcaff}
.advance-button span{font-size:8px;letter-spacing:.13em}.advance-button i{font-size:19px;font-style:normal;line-height:1}
.advance-button:disabled{cursor:default;opacity:.25}
.quick-menu{position:absolute;right:0;top:-26px;display:flex;gap:2px}
.quick-menu button{border:0;background:transparent;padding:6px 7px;color:#75869f;font-size:8px;letter-spacing:.1em}
.quick-menu button:hover{color:#d6e8ff}
.important-lock{display:none;position:absolute;right:24px;top:21px;align-items:center;gap:8px;color:#8aa2c0;font-size:8px;letter-spacing:.12em}
.important-lock.show{display:flex}
.important-lock i{display:block;width:38px;height:2px;background:linear-gradient(90deg,#8bd6ff var(--lock-progress,0%),rgba(255,255,255,.12) 0);transition:background .1s linear}

/* Drawers */
.drawer{position:absolute;z-index:31;top:0;right:0;width:min(410px,92vw);height:100%;display:flex;flex-direction:column;transform:translateX(104%);border-left:1px solid rgba(204,226,255,.17);background:linear-gradient(160deg,rgba(13,23,44,.97),rgba(5,11,23,.97));box-shadow:-25px 0 80px rgba(0,0,0,.36);backdrop-filter:blur(22px);transition:transform .28s ease}
.drawer.open{transform:none}.wide-drawer{width:min(620px,94vw)}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 23px 18px;border-bottom:1px solid rgba(205,225,255,.12)}
.drawer-head small{color:#86a8d1;font-size:8px;letter-spacing:.2em}.drawer-head h2{margin:5px 0 0;font-size:21px;letter-spacing:-.04em}
.drawer-head>button{width:29px;height:29px;border:0;border-radius:7px;background:rgba(178,208,245,.08);font-size:20px;color:#afbed3}
.panel-scrim{position:absolute;z-index:30;inset:0;background:rgba(2,5,12,.44);backdrop-filter:blur(2px)}
.presence{display:flex;align-items:center;gap:10px;padding:14px 21px;border-bottom:1px solid rgba(205,225,255,.1)}
.presence>span{width:8px;height:8px;border-radius:50%;background:#74e6b7;box-shadow:0 0 13px #65e2af}
.presence b,.presence small{display:block;font-size:11px}.presence small{margin-top:3px;color:#8396b2}.presence time{margin-left:auto;color:#71839e;font-size:9px}
.messages,.task-list,.archive-list,.backlog,.system-content{flex:1;overflow:auto;overscroll-behavior:contain}
.messages{padding:18px 20px}.message{max-width:84%;margin-bottom:15px}.message.mine{margin-left:auto}
.message small{display:block;margin-bottom:5px;color:#7f91ac;font-size:9px}.message p{margin:0;border-radius:13px 13px 13px 4px;padding:10px 12px;background:rgba(99,151,219,.14);font-size:12px;line-height:1.55}
.message.mine p{border-radius:13px 13px 4px 13px;background:linear-gradient(135deg,#557fc0,#435e9e)}
.composer{display:flex;gap:8px;padding:14px;border-top:1px solid rgba(205,225,255,.12)}
.composer input,.task-form input{flex:1;min-width:0;border:1px solid rgba(205,225,255,.14);border-radius:8px;padding:11px 12px;background:rgba(3,8,18,.45);outline:none;font-size:12px}
.composer button,.task-form button{width:40px;border:0;border-radius:8px;background:#9cd8ff;color:#071020;font-weight:800}
.day-progress{margin:18px 20px 10px;padding:15px;border:1px solid rgba(197,220,255,.1);border-radius:12px;background:rgba(103,151,219,.07)}
.day-progress>div:first-child{display:flex;justify-content:space-between;font-size:11px}.day-progress p{margin:10px 0 0;color:#8294af;font-size:10px;line-height:1.5}
.progress{height:3px;margin-top:11px;border-radius:9px;background:rgba(215,231,255,.12)}.progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#86d5ff,#8397ff);transition:width .35s}
.task-list{padding:0 20px}.task{display:flex;align-items:center;gap:10px;padding:12px 1px;border-bottom:1px solid rgba(201,222,255,.09)}
.task input{accent-color:#83c9ff}.task span{flex:1;font-size:12px;line-height:1.45}.task.done span{text-decoration:line-through;color:#6e819f}
.task small{color:#7890af;font-size:8px}.task-form{display:flex;gap:7px;padding:14px 20px 20px;border-top:1px solid rgba(205,225,255,.1)}
.task-form button{width:auto;padding:0 13px;background:rgba(126,190,244,.18);color:#bfe6ff}
.archive-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:17px 20px 12px;border:1px solid rgba(203,224,255,.1);background:rgba(203,224,255,.1)}
.archive-summary div{padding:12px;background:#0d192e}.archive-summary span,.archive-summary strong{display:block}.archive-summary span{color:#7e91ad;font-size:8px}.archive-summary strong{margin-top:5px;font-size:13px}
.chapter-tabs{display:flex;gap:6px;overflow:auto;padding:0 20px 10px;scrollbar-width:none}.chapter-tabs button{flex:none;border:1px solid rgba(205,225,255,.1);border-radius:99px;padding:7px 10px;background:transparent;color:#8699b5;font-size:9px}.chapter-tabs button.active{border-color:#7eb9eb;background:rgba(96,157,220,.17);color:#dff1ff}
.archive-list{margin:0;padding:8px 22px 28px;list-style:none}.archive-list li{position:relative;padding:0 0 18px 45px;color:#b9c8db;font-size:11px;line-height:1.55}.archive-list li:before{content:"";position:absolute;left:26px;top:4px;width:7px;height:7px;border:2px solid #75b8ed;border-radius:50%;background:#14243d}.archive-list li:after{content:"";position:absolute;left:30px;top:15px;bottom:1px;width:1px;background:rgba(139,183,231,.18)}.archive-list li:last-child:after{display:none}.archive-list time{position:absolute;left:0;color:#6e819e;font-size:8px}.archive-list strong{display:block;margin-bottom:2px;color:#e5effc;font-size:11px}.archive-list .future{opacity:.38}
.backlog{padding:12px 22px 30px}.log-line{padding:12px 2px;border-bottom:1px solid rgba(201,222,255,.09)}.log-line small{display:block;margin-bottom:5px;color:#77aeda;font-size:9px}.log-line p{margin:0;color:#cbd8e9;font-size:12px;line-height:1.65}
.system-content{padding:10px 21px 26px}.system-content section{padding:12px 0 17px;border-bottom:1px solid rgba(205,225,255,.1)}.system-content h3{margin:0 0 8px;color:#7793b8;font-size:9px;letter-spacing:.17em}
.system-content label{display:flex;align-items:center;justify-content:space-between;padding:10px 0;color:#c6d2e4;font-size:11px}.system-content select{border:1px solid rgba(205,225,255,.12);border-radius:6px;padding:6px 9px;background:#0b172a;color:#cfe0f6;font-size:10px}.toggle-row input{accent-color:#77bfff}
.system-row{display:flex;width:100%;justify-content:space-between;border:0;border-bottom:1px solid rgba(205,225,255,.07);padding:11px 0;background:none;text-align:left;font-size:11px}.system-row span{color:#7890b0;font-size:9px}.system-row.danger{color:#ef9ba6}.import-row{cursor:pointer}.import-row input{display:none}.playtime{margin:19px 0 0;color:#7386a3;font-size:9px}.playtime b{float:right;color:#9eb0c8}

/* Modal and toast */
.modal-layer{position:absolute;z-index:60;inset:0;display:grid;place-items:center;padding:22px;background:rgba(2,5,12,.74);backdrop-filter:blur(8px)}
.modal{width:min(500px,100%);border:1px solid rgba(212,230,255,.2);border-radius:14px;padding:27px;background:linear-gradient(145deg,#142441,#081225);box-shadow:var(--shadow)}
.modal-body{margin:0;color:#b7c7dc;font-size:12px;line-height:1.7}
.modal small{color:#88a9d3;font-size:8px;letter-spacing:.2em}.modal h2{margin:9px 0 10px;font-size:25px;letter-spacing:-.045em}.modal p{margin:0;color:#b7c7dc;font-size:12px;line-height:1.7}.modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:19px 0;background:rgba(211,229,255,.1)}.modal-stats div{padding:11px;background:#0d1a31}.modal-stats span,.modal-stats strong{display:block}.modal-stats span{color:#7489a8;font-size:8px}.modal-stats strong{margin-top:4px;font-size:14px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.modal-actions button{border:1px solid rgba(192,219,255,.2);border-radius:6px;padding:9px 13px;background:rgba(105,161,224,.11);font-size:11px}.modal-actions .primary{border:0;background:linear-gradient(135deg,#a9e1ff,#8199ef);color:#071020;font-weight:800}.modal-actions .danger{border:0;background:linear-gradient(135deg,#f3a39a,#d7687d);color:#220b11;font-weight:800}
.toast{position:absolute;z-index:80;top:88px;left:50%;transform:translate(-50%,-16px);padding:9px 14px;border:1px solid rgba(192,220,255,.19);border-radius:99px;background:#10213c;color:#ddebff;font-size:10px;opacity:0;pointer-events:none;transition:.24s}.toast.show{opacity:1;transform:translate(-50%,0)}

body.reduce-motion *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
@keyframes slow-breathe{50%{transform:scale(1.018)}}
@keyframes fish-idle{50%{transform:translateY(-7px) rotate(-.35deg)}}
@keyframes rain{to{background-position:-40px 100%}}
@keyframes snow{to{background-position:70px 160px}}
@keyframes lightning{0%,91%,94%,100%{opacity:0}92%,93%{opacity:.42}}
@keyframes caret{50%{opacity:0}}

/* Compact landscape phones */
@media (max-height:560px) and (orientation:landscape){
  .game-hud{height:55px;padding:9px 13px}.hud-center strong{font-size:9px}.hud-center span{margin-top:3px}.hud-button{height:29px}.icon-control{width:30px}
  .location-card{top:67px;left:16px}.location-card span{display:none}.fish-sprite{width:39vw;right:3vw;bottom:-22vh;max-height:105vh}
  .dialogue{bottom:10px;width:calc(100vw - 34px);min-height:112px;padding:20px 64px 16px 20px}.dialogue>p{min-height:42px;font-size:13px;line-height:1.65}.nameplate{top:-30px;height:30px;min-width:140px;padding:0 12px}.nameplate span{font-size:12px}.choices{margin-top:5px}.choices button{min-height:32px;padding:6px 9px;font-size:10px}.advance-button{right:12px;bottom:10px}.quick-menu{display:none}.important-lock{top:12px;right:16px}
  .drawer{width:min(370px,82vw)}.wide-drawer{width:min(520px,90vw)}.drawer-head{padding:14px 17px 11px}.drawer-head h2{font-size:17px}.messages{padding:12px 16px}.day-progress{margin:11px 16px 6px;padding:10px}.task-list{padding:0 16px}.task{padding:9px 1px}.system-content{padding:6px 17px 18px}.system-content section{padding:7px 0}.system-content label,.system-row{padding:7px 0}
  .title-content{left:56px}.title-content h1{font-size:46px}.title-copy{margin:15px 0 20px;line-height:1.55}.title-version{margin-top:14px}.profile-card{left:60px;width:390px}.profile-card h2{font-size:36px;margin-bottom:16px}.profile-card label{margin:8px 0}.profile-card input,.profile-card select{height:39px}.enter-button{height:42px;margin-top:12px}.back-title{margin-bottom:18px}
}
@media (max-width:760px) and (orientation:landscape){.hud-center{display:none}.game-hud{grid-template-columns:1fr 1fr}.fish-sprite{right:-1vw;width:44vw}.location-card{max-width:210px}.dialogue{left:12px;right:12px;width:auto;transform:none}.title-content{left:40px;width:55vw}.profile-card{left:40px}}

/* v3.1 · cinematic visual reset */
.game-hud{height:64px;padding:12px 22px;background:linear-gradient(180deg,rgba(2,6,14,.78) 0%,rgba(2,6,14,.26) 62%,transparent 100%)}
.hud-left,.hud-right{gap:5px}
.hud-button{height:31px;border-color:transparent;border-radius:8px;background:rgba(5,11,23,.3);box-shadow:inset 0 0 0 1px rgba(211,229,255,.09);color:#c9d7e9}
.hud-button:hover,.hud-button.active{border-color:transparent;background:rgba(104,158,219,.2);box-shadow:inset 0 0 0 1px rgba(157,213,255,.26);color:#f7fbff}
.text-control{padding:0 12px;font-size:9px;font-weight:650;letter-spacing:.11em}
.hud-center strong{display:none}
.hud-center span{margin:0;color:#a9b9ce;font-size:9px;letter-spacing:.12em}
.hud-center b{color:#58708e}
.location-card{top:83px;left:28px;max-width:330px;padding:0;border:0;text-shadow:0 2px 16px rgba(0,0,0,.72)}
.location-card small{color:#9bd5ff;font-size:8px;font-weight:750;letter-spacing:.22em}
.location-card strong{margin:8px 0 5px;font-size:17px;font-weight:720;letter-spacing:-.02em}
.location-card span{max-width:290px;color:rgba(224,234,247,.68);font-size:10px;line-height:1.55}

.dialogue{left:50%;right:auto;bottom:16px;width:min(1120px,calc(100% - 32px));min-height:0;transform:translateX(-50%);border:1px solid rgba(215,231,255,.18);border-radius:18px;padding:51px 100px 21px 32px;background:linear-gradient(120deg,rgba(4,9,19,.94),rgba(8,16,31,.9));box-shadow:0 22px 70px rgba(0,0,0,.38);backdrop-filter:blur(20px) saturate(1.08);transition:opacity .25s ease,transform .25s ease}
.dialogue:before{content:"";position:absolute;left:32px;top:0;width:72px;height:1px;background:linear-gradient(90deg,#8ed6ff,transparent);box-shadow:0 0 18px rgba(103,197,255,.48)}
.nameplate{left:32px;top:17px;gap:11px;min-width:0;height:auto;padding:0;border-radius:0;background:none;box-shadow:none}
.nameplate span{color:#a7ddff;font-size:16px;font-weight:760;letter-spacing:.02em}
.nameplate small{color:rgba(164,187,216,.58);font-size:8px;letter-spacing:.18em}
.dialogue>p{min-height:0;max-width:1100px;margin:0;color:#f3f7fd;font-size:clamp(15px,1.32vw,19px);font-weight:430;line-height:1.75;letter-spacing:.025em;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.choices{position:absolute;z-index:11;top:48%;right:clamp(22px,4vw,64px);width:min(380px,36vw);max-width:none;grid-template-columns:1fr;gap:10px;margin:0;transform:translateY(-50%)}
.choices button{position:relative;min-height:50px;border-color:rgba(181,218,255,.22);border-radius:9px;padding:12px 42px 12px 16px;background:linear-gradient(100deg,rgba(9,18,34,.82),rgba(17,31,54,.72));box-shadow:0 12px 34px rgba(0,0,0,.24);backdrop-filter:blur(15px);color:#e8f2ff;text-align:left;font-size:12px;line-height:1.45}
.choices button:after{content:'›';position:absolute;right:16px;top:50%;transform:translateY(-52%);color:#8ecfff;font-size:21px;font-weight:300}
.choices button:hover{transform:translateX(-4px);border-color:rgba(157,216,255,.52);background:linear-gradient(100deg,rgba(36,68,105,.88),rgba(24,42,71,.8));box-shadow:0 13px 38px rgba(0,0,0,.3)}
.advance-button{right:24px;bottom:16px;width:54px;height:44px;color:#a8ddff;opacity:.9}
.advance-button span{font-size:8px;letter-spacing:.16em}.advance-button i{font-size:17px}
.quick-menu{right:24px;top:15px;gap:3px}
.quick-menu button{padding:5px 6px;color:#6f8098;font-size:7px;letter-spacing:.12em}
.important-lock{right:104px;top:21px}
.character-hotspot{bottom:124px;height:calc(65% - 30px)}

.drawer{top:12px;right:12px;height:calc(100% - 24px);transform:translateX(calc(100% + 28px));border:1px solid rgba(204,226,255,.15);border-radius:15px;background:linear-gradient(155deg,rgba(13,23,44,.975),rgba(5,11,23,.98));box-shadow:-30px 18px 90px rgba(0,0,0,.42)}
.drawer-head{padding:22px 22px 17px}.drawer-head h2{font-weight:720}
.drawer-head>button{border-radius:9px;background:rgba(178,208,245,.07)}
.panel-scrim{background:rgba(2,5,12,.52);backdrop-filter:blur(4px)}

/* Event-only messenger bridge. It is part of the story, never a free-form chatbot. */
.bridge-event{position:absolute;z-index:24;inset:0;display:flex;align-items:center;padding:72px clamp(30px,8vw,132px) 205px;background:linear-gradient(90deg,rgba(2,6,14,.83) 0%,rgba(2,6,14,.59) 46%,rgba(2,6,14,.12) 78%),linear-gradient(0deg,rgba(2,6,14,.66),transparent 64%);backdrop-filter:blur(3px)}
.bridge-event-card{width:min(440px,46vw);max-height:calc(100vh - 250px);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(191,220,255,.18);border-radius:20px;background:linear-gradient(155deg,rgba(19,32,56,.97),rgba(6,13,28,.98));box-shadow:0 34px 110px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.05)}
.bridge-event-card>header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 17px;border-bottom:1px solid rgba(203,226,255,.1);background:rgba(255,255,255,.018)}
.bridge-event-card>header div{display:grid;gap:5px}
.bridge-event-card>header small{color:#7fa9d5;font-size:7px;font-weight:750;letter-spacing:.22em}
.bridge-event-card>header strong{font-size:15px;font-weight:720;letter-spacing:-.015em}
.bridge-event-card>header time{color:#7690b0;font-size:9px;font-variant-numeric:tabular-nums}
.bridge-thread{min-height:0;overflow:auto;padding:20px 20px 8px;scrollbar-width:thin;scrollbar-color:rgba(148,192,235,.22) transparent}
.bridge-bubble{width:fit-content;max-width:85%;margin:0 0 13px}
.bridge-bubble small{display:block;margin:0 0 5px 2px;color:#7d93ae;font-size:8px;letter-spacing:.08em}
.bridge-bubble p{margin:0;border:1px solid rgba(184,214,248,.09);border-radius:14px 14px 14px 4px;padding:11px 13px;background:rgba(91,137,194,.13);color:#e6eef9;font-size:12px;line-height:1.65}
.bridge-bubble.outgoing{margin-left:auto}.bridge-bubble.outgoing small{text-align:right;margin-right:2px}
.bridge-bubble.outgoing p{border-color:rgba(157,211,255,.18);border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,rgba(87,145,205,.75),rgba(75,101,172,.72));color:#fff}
.bridge-options{display:grid;gap:8px;padding:10px 20px 20px}
.bridge-options:empty{display:none}
.bridge-options button{min-height:43px;border:1px solid rgba(158,210,255,.17);border-radius:10px;padding:10px 13px;background:rgba(108,165,222,.09);color:#dceaff;text-align:left;font-size:11px;line-height:1.45;transition:.18s ease}
.bridge-options button:hover{transform:translateY(-1px);border-color:rgba(161,217,255,.44);background:rgba(104,170,228,.19)}
.bridge-return{margin:9px 20px 20px;border:0;border-radius:10px;padding:12px 14px;background:linear-gradient(110deg,#a7dcff,#8a9ff1);color:#071020;text-align:left;font-size:11px;font-weight:820}
.bridge-return span{float:right;font-size:16px;line-height:12px}
.game.bridge-mode .dialogue{opacity:0;transform:translate(-50%,24px);pointer-events:none}
.game.bridge-mode .choices{display:none}
.game.bridge-mode .character-hotspot{pointer-events:none}

@media (max-height:560px) and (orientation:landscape){
  .game-hud{height:50px;padding:8px 13px}.hud-center span{margin:0}.hud-button{height:29px}
  .location-card{top:61px;left:17px}.location-card strong{margin:5px 0;font-size:14px}.location-card span{display:none}
  .dialogue{left:50%;right:auto;bottom:8px;width:calc(100% - 20px);min-height:0;transform:translateX(-50%);border-radius:14px;padding:34px 60px 12px 20px}.dialogue:before{left:20px}.nameplate{left:20px;top:10px}.nameplate span{font-size:12px}.dialogue>p{min-height:0;font-size:12px;line-height:1.55}.choices{top:47%;right:12px;width:min(320px,40vw);gap:6px;margin:0}.choices button{min-height:38px;padding:7px 34px 7px 11px;font-size:9px}.choices button:after{right:12px;font-size:17px}.advance-button{right:10px;bottom:8px}.quick-menu{display:none}.important-lock{top:13px;right:74px}.character-hotspot{bottom:104px}
  .drawer{top:8px;right:8px;height:calc(100% - 16px);border-radius:12px}.drawer-head{padding:13px 16px 10px}
  .bridge-event{padding:54px 34px 128px}.bridge-event-card{width:min(410px,55vw);max-height:calc(100vh - 68px);border-radius:15px}.bridge-event-card>header{padding:11px 15px 9px}.bridge-event-card>header div{gap:2px}.bridge-thread{padding:11px 14px 4px}.bridge-bubble{margin-bottom:8px}.bridge-bubble p{padding:7px 10px;font-size:10px;line-height:1.45}.bridge-options{grid-template-columns:1fr 1fr;gap:6px;padding:5px 14px 12px}.bridge-options button{min-height:33px;padding:6px 9px;font-size:9px}.bridge-return{margin:5px 14px 12px;padding:8px 10px;font-size:9px}
}

/* Portrait orientation may be system-locked. Once the player confirms they are
   holding the phone sideways, rotate the complete stage instead of blocking play. */
@media (orientation:portrait) and (max-width:900px){
  body.landscape-confirmed .orientation-gate{display:none}
  body.landscape-confirmed .app-shell{position:fixed;top:0;left:0;width:100vh;height:100vw;visibility:visible;transform:rotate(90deg) translateY(-100%);transform-origin:top left}
  body.landscape-confirmed .title-screen,body.landscape-confirmed .profile-screen,body.landscape-confirmed .game{width:100%;height:100%}
  body.landscape-confirmed .game-hud{height:50px;padding:8px 13px}
  body.landscape-confirmed .hud-center{display:none}
  body.landscape-confirmed .game-hud{grid-template-columns:1fr 1fr}
  body.landscape-confirmed .hud-button{height:29px}
  body.landscape-confirmed .location-card{top:61px;left:17px;max-width:205px}
  body.landscape-confirmed .location-card strong{margin:5px 0;font-size:14px}
  body.landscape-confirmed .location-card span{display:none}
  body.landscape-confirmed .fish-sprite{right:-1vh;bottom:-18vw;width:44vh;max-height:106vw}
  body.landscape-confirmed .dialogue{left:50%;right:auto;bottom:8px;width:calc(100% - 20px);min-height:0;transform:translateX(-50%);border-radius:14px;padding:34px 60px 12px 20px}
  body.landscape-confirmed .dialogue:before{left:20px}
  body.landscape-confirmed .nameplate{left:20px;top:10px}
  body.landscape-confirmed .nameplate span{font-size:12px}
  body.landscape-confirmed .dialogue>p{min-height:0;font-size:12px;line-height:1.55}
  body.landscape-confirmed .choices{top:47%;right:12px;width:min(320px,40vh);gap:6px;margin:0}
  body.landscape-confirmed .choices button{min-height:38px;padding:7px 34px 7px 11px;font-size:9px}
  body.landscape-confirmed .choices button:after{right:12px;font-size:17px}
  body.landscape-confirmed .advance-button{right:10px;bottom:8px}
  body.landscape-confirmed .quick-menu{display:none}
  body.landscape-confirmed .important-lock{top:13px;right:74px}
  body.landscape-confirmed .character-hotspot{bottom:104px}
  body.landscape-confirmed .drawer{top:8px;right:8px;width:min(370px,82vh);height:calc(100% - 16px);border-radius:12px}
  body.landscape-confirmed .wide-drawer{width:min(520px,90vh)}
  body.landscape-confirmed .drawer-head{padding:13px 16px 10px}
  body.landscape-confirmed .drawer-head h2{font-size:17px}
  body.landscape-confirmed .day-progress{margin:10px 16px 5px;padding:9px}
  body.landscape-confirmed .task-list{padding:0 16px}
  body.landscape-confirmed .task{padding:8px 1px}
  body.landscape-confirmed .system-content{padding:5px 17px 16px}
  body.landscape-confirmed .system-content section{padding:6px 0}
  body.landscape-confirmed .system-content label,body.landscape-confirmed .system-row{padding:6px 0}
  body.landscape-confirmed .title-content{left:7vh;width:54vh}
  body.landscape-confirmed .title-content h1{font-size:44px}
  body.landscape-confirmed .title-copy{margin:13px 0 17px;font-size:11px;line-height:1.55}
  body.landscape-confirmed .title-actions{width:300px;gap:6px}
  body.landscape-confirmed .title-actions button{min-height:40px}
  body.landscape-confirmed .title-version{margin-top:11px}
  body.landscape-confirmed .title-fish{right:2vh;bottom:-18vw;width:43vh;max-height:108vw}
  body.landscape-confirmed .profile-card{left:7vh;width:43vh}
  body.landscape-confirmed .profile-card h2{margin-bottom:14px;font-size:32px}
  body.landscape-confirmed .profile-card label{gap:5px;margin:7px 0}
  body.landscape-confirmed .profile-card input,body.landscape-confirmed .profile-card select{height:37px}
  body.landscape-confirmed .enter-button{height:40px;margin-top:10px}
  body.landscape-confirmed .back-title{margin-bottom:12px}
  body.landscape-confirmed .bridge-event{padding:54px 34px 128px}
  body.landscape-confirmed .bridge-event-card{width:min(410px,55vh);max-height:calc(100% - 68px);border-radius:15px}
  body.landscape-confirmed .bridge-event-card>header{padding:11px 15px 9px}
  body.landscape-confirmed .bridge-event-card>header div{gap:2px}
  body.landscape-confirmed .bridge-thread{padding:11px 14px 4px}
  body.landscape-confirmed .bridge-bubble{margin-bottom:8px}
  body.landscape-confirmed .bridge-bubble p{padding:7px 10px;font-size:10px;line-height:1.45}
  body.landscape-confirmed .bridge-options{grid-template-columns:1fr 1fr;gap:6px;padding:5px 14px 12px}
  body.landscape-confirmed .bridge-options button{min-height:33px;padding:6px 9px;font-size:9px}
  body.landscape-confirmed .bridge-return{margin:5px 14px 12px;padding:8px 10px;font-size:9px}
}