/* The scaled canvas keeps its 720px layout height. Do not let focus scroll the document underneath the fixed UI. */
html { height: 100%; overflow: hidden; }
body { position: fixed; inset: 0; margin: 0; }
/* Oversized character sprites must be clipped without making the canvas a focus-scroll container. */
#tyrano_base { overflow: clip !important; }
/* Each Chinese build bundles its own Noto face. Include restored inline text styles. */
html[lang="zh-Hans"] :is(.message_inner,.message_inner *,.chara_name_area,.chara_name_area *,#trial-ui,.remodal,.remodal *),html[lang="zh-Hans"] #tyrano_base [data-event-tag="glink"] { font-family: "Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif !important; }
html[lang="zh-Hant"] :is(.message_inner,.message_inner *,.chara_name_area,.chara_name_area *,#trial-ui,.remodal,.remodal *),html[lang="zh-Hant"] #tyrano_base [data-event-tag="glink"] { font-family: "Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif !important; }
html:is([lang="zh-Hans"],[lang="zh-Hant"]) :is(.message_inner,.chara_name_area) { font-weight: 600; }
/* Restored layers retain fadeIn classes. A screenshot clone must not replay those fades. */
.snap_tmp_base, .snap_tmp_base * { animation: none !important; transition: none !important; }
#trial-ui { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; font: 16px/1.6 system-ui, sans-serif; color: #233556; }
#trial-ui [hidden] { display: none !important; }
#trial-ui button, #trial-ui a { font: inherit; touch-action: manipulation; cursor: pointer; }
#trial-ui button, #trial-ui .trial-link { min-height: 44px; padding: 9px 22px; border: 1px solid #6889b0; border-radius: 999px; background: #fff; color: #214b7b; text-decoration: none; text-align: center; font-weight: 650; box-sizing: border-box; }
#trial-ui .trial-primary { background: linear-gradient(115deg,#1764a1,#715baa); color: white; border-color: transparent; }
#trial-ui button:hover, #trial-ui a:hover { filter: brightness(.95); }
#trial-ui button:disabled { opacity: .5; cursor: default; }
#trial-ui :focus-visible { outline: 3px solid #db8d1b; outline-offset: 3px; }
#trial-toggle { position: absolute; top: max(10px,env(safe-area-inset-top)); right: max(12px,env(safe-area-inset-right)); pointer-events: auto; box-shadow: 0 2px 12px #0003; }
.trial-card { background: #f9fcfffa; border: 1px solid #b1c9e0; border-radius: 20px; box-shadow: 0 5px 24px #15244330; padding: 18px; pointer-events: auto; }
#trial-menu { position: absolute; right: max(12px,env(safe-area-inset-right)); top: 65px; width: min(300px,calc(100vw - 60px)); max-height: calc(100dvh - 100px); overflow-y: auto; display: grid; gap: 10px; }
#trial-menu p { font-size: 13px; margin: 0; }
.trial-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.trial-screen { position: absolute; left: calc(var(--game-left,0px) + var(--game-width,100vw) / 2); top: calc(var(--game-top,0px) + var(--game-height,100vh) * .725); transform: translateX(-50%); width: min(660px,82vw); box-sizing: border-box; text-align: center; }
.trial-screen p { margin: 10px 0 0; font-size: 13px; }
.trial-screen h2 { font-size: 19px; margin: 0 0 12px; }
#trial-orientation { position: absolute; top: max(70px,env(safe-area-inset-top)); left: 6%; width: 88%; text-align: center; color: #e5edff; font-size: 15px; margin: 0; display: none; }
.trial-modal { position: absolute; inset: 0; background: #0b173cba; pointer-events: auto; display: grid; place-items: center; padding: 20px; }
.trial-modal .trial-card { width: min(460px,calc(100vw - 70px)); max-height: calc(100dvh - 80px); overflow-y: auto; }
.trial-modal h2 { margin: 0 0 10px; font-size: 22px; }
.trial-modal p { margin: 0 0 16px; }
#trial-status { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: #fff; border-radius: 10px; padding: 10px 16px; max-width: 90vw; pointer-events: auto; }
#trial-menu { gap: 8px; }
.trial-menu-divider { height: 1px; background: #b1c9e0; margin: 4px 0; }
#trial-website-hint { text-align: center; color: #53677e; }
#trial-ui .trial-modal { box-sizing: border-box; padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
#trial-ui .trial-modal .trial-card { box-sizing: border-box; width: min(520px,100%); max-height: calc(100dvh - 48px); overscroll-behavior: contain; }
#trial-ui .trial-modal .trial-settings-card { width: min(700px,100%); padding: 24px; }
.trial-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
#trial-ui .trial-modal-header h2 { margin: 0; }
#trial-ui .trial-icon-button { width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 25px; line-height: 1; }
.trial-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 30px; }
.trial-setting { min-width: 0; }
.trial-setting-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 650; }
.trial-setting-label output { flex-shrink: 0; font-size: 14px; color: #46678b; font-variant-numeric: tabular-nums; }
#trial-ui input[type="range"] { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: #3868aa; cursor: pointer; }
.trial-range-ends { display: flex; justify-content: space-between; color: #53677e; font-size: 12px; margin-top: -6px; }
.trial-caption { color: #53677e; font-size: 13px; }
.trial-preview { margin: 20px 0; padding: 12px 16px; border: 1px solid #c4d5e7; border-radius: 14px; background: linear-gradient(115deg,#edf7ff,#f5f0fc); }
#trial-ui #trial-text-preview { min-height: 3.2em; margin: 5px 0 0; overflow-wrap: anywhere; }
.trial-switch-label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 650; cursor: pointer; }
#trial-ui input[role="switch"] { appearance: none; flex: 0 0 46px; width: 46px; height: 28px; margin: 0; border: 1px solid #819bb5; border-radius: 999px; background: #74879d; cursor: pointer; position: relative; }
#trial-ui input[role="switch"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #10274040; }
#trial-ui input[role="switch"]:checked { background: linear-gradient(115deg,#1764a1,#715baa); border-color: transparent; }
#trial-ui input[role="switch"]:checked::after { left: 21px; }
#trial-unread-hint { color: #53677e; font-size: 13px; padding-left: 58px; }
#trial-ui #trial-settings-status { margin-bottom: 12px; }
.trial-settings-footer { justify-content: space-between; border-top: 1px solid #c4d5e7; padding-top: 16px; }
#trial-ui #trial-settings-done { min-width: 110px; }
/* The old full-screen start hotspot is now driven only by the New game button. */
#tyrano_base.trial-title-art { pointer-events: none; }
#trial-title-cover { position: absolute; z-index: 100000; left: 360px; top: 510px; width: 560px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 24px; background: linear-gradient(115deg,#edf7ff,#f4effc); color: #315a89; font: 650 25px/1 system-ui,sans-serif; letter-spacing: 5px; pointer-events: none; }
#trial-title-cover[hidden] { display: none; }
#trial-title { top: calc(var(--game-top,0px) + var(--game-height,100vh) * .70); width: max(min(660px,82vw),calc(var(--game-width,100vw) * .46)); background: linear-gradient(115deg,#f9fcff,#f5f1ff); }
#trial-title .trial-actions button { min-width: 150px; }
#trial-ui .trial-modal .trial-library-card { width: min(820px,100%); padding: 24px; display: flex; flex-direction: column; overflow: hidden; }
.trial-library-card .trial-modal-header { flex: 0 0 auto; margin-bottom: 16px; }
.trial-library-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 3px 8px 3px 3px; }
#trial-ui #trial-library-hint { margin-bottom: 12px; }
#trial-slots, #trial-log-entries { list-style: none; padding: 0; margin: 0; }
#trial-slots { display: grid; gap: 10px; }
#trial-ui .trial-slot { width: 100%; min-height: 124px; padding: 14px; display: grid; grid-template-columns: 152px minmax(0,1fr); gap: 18px; align-items: center; text-align: left; border-radius: 16px; border-color: #bfcee1; background: linear-gradient(115deg,#fff,#f4f7fd); font-weight: 400; }
#trial-ui .trial-slot:not(:disabled):hover { border-color: #6889b0; background: #edf5ff; filter: none; }
#trial-ui .trial-slot:disabled { opacity: .72; }
.trial-slot-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 9px; background: linear-gradient(135deg,#ddeefa,#e9e5f5); color: #607d9b; font-size: 13px; letter-spacing: 1px; }
.trial-slot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trial-slot-info { display: grid; gap: 5px; min-width: 0; }
.trial-slot-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; }
.trial-slot-top strong { color: #214b7b; font-size: 14px; }
.trial-slot-date { color: #53677e; font-size: 12px; font-variant-numeric: tabular-nums; }
.trial-slot-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: #233556; font-size: 14px; line-height: 1.5; }
.trial-slot-action { color: #516b91; font-size: 12px; }
.trial-library-footer { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 12px; padding-top: 14px; margin-top: 16px; border-top: 1px solid #c4d5e7; }
#trial-ui .trial-library-footer p { margin: 0; }
.trial-library-footer button { flex-shrink: 0; }
#trial-library-status { font-size: 14px; color: #214b7b; }
#trial-slot-confirm { min-height: 0; overflow: auto; padding: 3px; }
#trial-slot-summary { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 150px; overflow-y: auto; }
.trial-empty { border: 1px dashed #b1c9e0; background: #edf4fc; border-radius: 14px; padding: 18px; color: #53677e; }
#trial-log-scroll { min-height: min(200px,25dvh); }
#trial-log-entries li { padding: 18px 20px; margin-bottom: 10px; border-radius: 14px; border: 1px solid #d1deeb; background: #fff; line-height: 1.9; overflow-wrap: anywhere; }
#trial-log-entries li:nth-child(even) { background: #f1f6fc; }
.trial-log-speaker { color: #305e96; font-weight: 750; }
#trial-log-entries rt { font-size: .6em; }
/* Keep the original glink elements, handlers and scenario parameters. Only their presentation changes. */
#tyrano_base [data-event-tag="glink"] { box-sizing: border-box; left: 260px !important; width: 760px !important; min-height: 82px; display: flex; align-items: center; justify-content: center; padding: 18px 36px !important; border: 2px solid #9cb7d2; border-radius: 999px; background: linear-gradient(115deg,#f9fcfffa,#f5f1fffa) !important; box-shadow: 0 5px 20px #15244330; color: #214b7b !important; font: 650 28px/1.35 system-ui,sans-serif !important; text-align: center; text-shadow: none !important; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
#tyrano_base [data-event-tag="glink"]:hover { border-color: #4673ab; background: linear-gradient(115deg,#e5f4ff,#ece3ff) !important; }
#tyrano_base [data-event-tag="glink"]:focus-visible { outline: 4px solid #db8d1b; outline-offset: 4px; }
#tyrano_base [data-event-tag="glink"].glink_button_clicked { background: linear-gradient(115deg,#1764a1,#715baa) !important; border-color: transparent; color: #fff !important; }
#tyrano_base .role_button { object-fit: contain; touch-action: manipulation; }
#tyrano_base .role_button[aria-disabled="true"] { opacity: .45; cursor: default !important; }
#tyrano_base .role_button:focus-visible { outline: 3px solid #db8d1b; outline-offset: 2px; border-radius: 50%; }
@media (max-width: 540px) {
    #trial-title .trial-actions button { min-width: 0; flex: 1; white-space: nowrap; }
    #trial-ui .trial-modal .trial-settings-card { padding: 18px; }
    .trial-settings-grid { grid-template-columns: 1fr; gap: 16px; }
    .trial-settings-footer { flex-direction: column-reverse; align-items: stretch; }
    #trial-ui .trial-modal .trial-library-card { padding: 16px; }
    #trial-ui .trial-slot { grid-template-columns: 84px minmax(0,1fr); gap: 10px; padding: 10px; min-height: 112px; }
    .trial-library-footer { align-items: flex-end; }
    .trial-library-footer .trial-caption { font-size: 11px; }
    #trial-log-entries li { padding: 14px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    #trial-ui .trial-modal .trial-card { max-height: calc(100dvh - 32px); }
    #trial-ui .trial-modal .trial-settings-card { padding: 16px 22px; }
    .trial-modal-header { margin-bottom: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .trial-screen { top: auto; bottom: calc(100dvh - var(--game-top,0px) - var(--game-height,100dvh) + 12px); padding: 10px; }
    #trial-title { top: calc(var(--game-top,0px) + var(--game-height,100vh) * .70); bottom: auto; padding: 8px 12px; }
    #trial-title p { display: none; }
    .trial-screen p { font-size: 12px; margin-top: 5px; }
    .trial-screen h2 { font-size: 16px; margin-bottom: 5px; }
    #trial-ui button, #trial-ui .trial-link { padding: 7px 17px; }
}
@media (orientation: portrait) {
    #trial-orientation { display: block; }
    .trial-screen { top: calc(var(--game-top,0px) + var(--game-height,100vh) + 18px); width: 90vw; }
    #trial-title { top: calc(var(--game-top,0px) + var(--game-height,100vh) + 18px); width: 90vw; }
    .trial-actions { gap: 8px; }
    #trial-ui button, #trial-ui .trial-link { padding: 9px 16px; }
}

/* Save/load share the 1280 x 720 game canvas. Keep all rows and scrolling
   inside the frame painted at (120, 110)-(1130, 680) in bg_base.png. */
:is(#menu_save_wrapper, #menu_load_wrapper) { position: absolute; inset: 0; }
/* The shared backdrop contains a baked-in Backlog heading. Cover only that
   header, leaving the original backdrop available to the actual backlog. */
:is(#menu_save_wrapper, #menu_load_wrapper)::before { content: ""; position: absolute; left: 0; top: 0; width: 480px; height: 80px; background: linear-gradient(110deg, #628fd0, #ae78c8); clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); pointer-events: none; }
:is(#menu_save_wrapper, #menu_load_wrapper) .img_label { left: 20px; top: 5px; width: 500px; height: 96px; object-fit: contain; z-index: 1; pointer-events: none; }
:is(#menu_save_wrapper, #menu_load_wrapper) .menu_item { position: absolute; top: 10px; right: 16px; margin: 0 !important; z-index: 2; }
:is(#menu_save_wrapper, #menu_load_wrapper) .button_smart { top: 24px !important; }
:is(#menu_save_wrapper, #menu_load_wrapper) .area_save_list { position: absolute; left: 140px; top: 140px; width: 970px; height: 520px; margin: 0; padding: 0 12px 0 0; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list { display: grid; gap: 12px; width: 100%; height: auto; margin: 0; padding: 0; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list_item { display: grid; grid-template-columns: 166px minmax(0, 1fr); align-items: center; gap: 20px; width: 100%; height: 120px; padding: 11px 12px; border: 1px solid #97afc6; background: #ffffffa6; box-sizing: border-box; overflow: hidden; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list_item:hover { background: #dff3ff; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list_item:focus-visible { outline: 3px solid #1764a1; outline-offset: -3px; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list_item_thumb { display: block; width: 166px; height: 96px; margin: 0; padding: 2px; border: 1px solid #97afc6; background: url("../tyrano/images/system/thumbnail_save.png") center / 100% 100% no-repeat; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list_item_thumb img { display: block; width: 160px; height: 90px; margin: 0; padding: 0; object-fit: cover; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list_item_area { display: block; min-width: 0; width: auto; height: auto; padding: 0; background: none; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list_item_date { padding: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list_item_date:empty { display: none; }
:is(#menu_save_wrapper, #menu_load_wrapper) .save_list_item_text { height: auto; max-height: 3.9em; padding: 0; line-height: 1.3; overflow-wrap: anywhere; }
/* The menu opens over the start and ending panels, which come after it; the dialogs stay over the menu. */
#trial-menu { z-index: 1; }
#trial-ui .trial-modal { z-index: 2; }
/* The BROWSER DEMO badge covered the old title image's CLICK TO START; the dream title has none. */
#trial-title-cover { display: none !important; }