[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; min-height: 100vh; min-height: 100lvh; overflow: hidden; background: #242343 url("escape22-ui/background.jpg") center / cover no-repeat; }
#game-frame { position: fixed; inset: 0; overflow: hidden; }
#safe-area-probe { position: fixed; inset: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); pointer-events: none; visibility: hidden; }
#splash { display: none !important; }
#escape-ui {
  position: fixed; left: 50%; top: 50%; width: 100vw; height: 100vh;
  transform: translate(-50%, -50%); transform-origin: center;
  z-index: 10000; pointer-events: none; overflow: hidden; color: #f5f6ff;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
#escape-ui *, #escape-ui *::before, #escape-ui *::after { box-sizing: border-box; }
#escape-ui button, #escape-ui input, #escape-ui a { -webkit-tap-highlight-color: transparent; }
#escape-ui button { cursor: pointer; }
#escape-ui button, #escape-ui a { touch-action: manipulation; }
#escape-ui button:focus-visible, #escape-ui a:focus-visible { outline: 3px solid #fff3a3; outline-offset: 3px; }
#escape-ui button:disabled { cursor: default; filter: saturate(.35) brightness(.8); }

#boot-cover { position: fixed; transform-origin: center; z-index: 9999; pointer-events: auto; background: #122479; box-sizing: border-box; }
#boot-cover[hidden] + #escape-ui > .boot-hud { display: none !important; }
.boot-art { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.boot-hud { position: absolute; bottom: 2.8%; left: 50%; width: 46%; transform: translateX(-50%); padding: 5px 10px 4px; background: rgba(10,13,41,.78); border: 1px solid rgba(102,236,242,.65); border-radius: 3px; text-align: center; pointer-events: auto; }
.boot-track { height: 8px; padding: 2px; border: 1px solid #6b79a5; background: #151528; }
#boot-progress { display: block; height: 100%; background: #5df3e9; box-shadow: 0 0 7px #27c9e1; transition: width .15s linear; }
#boot-status { margin: 2px 0 0; font-size: 13px; line-height: 1.2; font-weight: 600; color: #fff; text-shadow: 1px 1px 1px #0b0820; }
#boot-reload { width: 130px; height: 50px; margin: 5px auto 0; font-size: 17px; }

.account-layer { position: absolute; inset: 0; z-index: 10; pointer-events: auto; background: rgba(9,9,29,.74); }
.gate-layer { background: #232044 url("escape22-ui/background.jpg") center / cover no-repeat; }
.ui-stage { position: absolute; left: 50%; top: 50%; width: 960px; height: 540px; transform: translate(-50%, -50%); transform-origin: center; }
.game-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 760px;
  border-style: solid; border-color: transparent; border-width: 68px 38px 24px;
  border-image-source: url("escape22-ui/panel.png"); border-image-slice: 74 44 26 44 fill;
  border-image-repeat: stretch; border-radius: 0;
}
.panel-heading { position: absolute; top: -61px; left: 8px; right: 68px; margin: 0; height: 55px; color: #272640; font-size: 33px; line-height: 55px; font-weight: 900; font-style: italic; letter-spacing: 1px; text-align: left; white-space: nowrap; }
.panel-content { height: 100%; padding: 12px 10px 4px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.panel-close, .panel-back { position: absolute; top: -65px; right: -18px; width: 68px; height: 64px; padding: 0; border: 0; border-radius: 0; background: url("escape22-ui/close.png") center / 32px 30px no-repeat; }
.panel-back { background-image: url("escape22-ui/back.png"); background-size: 62px 40px; background-color: #29263e; }
.panel-close:active, .panel-back:active { transform: translateY(2px); }

.game-button {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 200px; height: 77px; margin: 0; padding: 0 15px 4px; border: 0; border-radius: 0;
  background: transparent center / 100% 100% no-repeat; color: #fff;
  font: 900 26px "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  text-shadow: -1.5px -1.5px #292540, 1.5px -1.5px #292540, -1.5px 1.5px #292540, 1.5px 1.5px #292540, 0 3px #292540;
  white-space: nowrap; text-align: center; text-decoration: none;
}
.button-gold { background-image: url("escape22-ui/button-gold.png"); }
.button-blue { background-image: url("escape22-ui/button-blue.png"); }
#escape-ui a.game-button { color: #fff; }
.game-button:active:not(:disabled) { transform: translateY(2px); filter: brightness(.92); }
.text-button { border: 0; border-radius: 0; padding: 8px 12px; background: transparent; color: #98edff; font: 500 22px "PingFang SC", "Microsoft YaHei", Arial, sans-serif; line-height: 30px; text-underline-offset: 5px; }
.text-button:active { color: #fff; }

.gate-panel { height: 480px; }
.form-row { display: grid; grid-template-columns: 116px minmax(0,1fr); align-items: center; gap: 14px; margin-bottom: 12px; }
.form-row label { color: #e8edff; font-size: 24px; font-weight: 700; text-align: right; white-space: nowrap; }
.form-row input {
  width: 100%; height: 55px; min-width: 0; padding: 8px 15px;
  border: 2px solid #667490; border-left: 5px solid #62dbe2; border-radius: 0; outline: 0;
  background: #222139; box-shadow: inset 0 2px 0 rgba(0,0,0,.28); color: #fff;
  font: 400 24px "PingFang SC", "Microsoft YaHei", Arial, sans-serif; line-height: 35px;
}
.form-row input::placeholder { color: #a5a9c4; opacity: 1; }
.form-row input:focus { border-color: #5bf3ee; background: #24213f; }
.form-row input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 100px #24213f inset; }
.account-error { margin: 7px 0 3px; color: #ffd0bf; font-size: 21px; line-height: 28px; overflow-wrap: anywhere; }
.account-error:empty { display: none; }
.gate-actions { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 12px; }
.gate-actions .game-button { width: 220px; height: 84px; }
.account-switch { display: block; min-height: 62px; margin: 0 auto; padding: 4px 12px; text-decoration: underline; }
#account-form[data-mode="login"] { padding-top: 25px; }
#account-form[data-mode="login"] .gate-actions { margin-top: 20px; }

.profile-panel { height: 454px; }
.profile-data { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.data-cell { min-width: 0; padding: 8px 14px; border-left: 3px solid #63d3de; background: #303047; }
.data-label { display: block; margin-bottom: 4px; color: #b5c2df; font-size: 20px; line-height: 26px; }
.data-cell strong, .data-value { display: block; max-height: 54px; overflow: auto; color: #fff; font-size: 27px; line-height: 30px; font-weight: 700; overflow-wrap: anywhere; }
.welcome-reward { display: flex; align-items: center; justify-content: space-between; min-height: 99px; margin-top: 16px; padding: 8px 14px; border-top: 1px solid #77778f; border-bottom: 1px solid #77778f; background: #333046; }
.reward-label { display: block; font-size: 21px; line-height: 25px; color: #c9cfe7; }
.reward-copy p { margin: 0; line-height: 48px; }
.reward-copy strong { color: #ffda57; font-size: 44px; font-weight: 900; font-style: italic; text-shadow: 2px 2px #262138; }
.reward-copy p span { margin-left: 10px; font-size: 25px; color: #fff0b1; }
.reward-status { margin: 5px 14px 0; color: #b1dbe8; font-size: 20px; line-height: 27px; }
.profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.logout-button { min-height: 64px; color: #b8c0da; font-size: 21px; }

.support-panel { width: 700px; height: 376px; }
.support-label { margin: 10px 0 10px; color: #bac8e1; font-size: 23px; line-height: 28px; }
.account-email { margin: 0; padding: 12px 16px; border-left: 4px solid #61efed; background: #26253d; color: #fff0a7; font-size: 31px; line-height: 40px; font-weight: 700; letter-spacing: .2px; -webkit-user-select: text; user-select: text; overflow-wrap: anywhere; }
.support-actions { display: flex; justify-content: center; gap: 36px; margin-top: 22px; }
.support-result { margin: 7px 0 0; min-height: 26px; color: #b3eeeb; font-size: 21px; line-height: 28px; text-align: center; }

.sync-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.sync-card { position: absolute; top: 8px; left: 80px; width: 800px; padding: 10px 18px; border: 2px solid #59e7ea; border-top: 5px solid #59e7ea; background: #302d43; pointer-events: auto; }
#account-sync-message { display: block; color: #fff0c2; font-size: 22px; line-height: 30px; overflow-wrap: anywhere; }
.sync-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 3px; }
.sync-actions .game-button { width: 155px; height: 60px; font-size: 22px; }


.armor-layer { z-index: 12; }
.armor-panel { width: 760px; height: 516px; }
.consumable-tabs { display: flex; gap: 10px; margin: -4px 10px 10px; border-bottom: 2px solid #657794; }
.consumable-tabs button { min-width: 155px; min-height: 42px; border: 0; border-bottom: 4px solid transparent; background: #33344d; color: #cbd7ec; font: 700 24px "PingFang SC","Microsoft YaHei",Arial,sans-serif; }
.consumable-tabs button[aria-selected="true"] { color: #ffea96; border-bottom-color: #5be4e4; background: #264961; }
.armor-summary { display: flex; align-items: center; gap: 24px; margin: 0 12px 8px; min-height: 114px; }
.armor-icon { width: 108px; height: 112px; object-fit: contain; flex: 0 0 auto; }
.armor-effect { margin: 0 0 7px; color: #ffed96; font-size: 29px; font-weight: 900; }
.armor-description { margin: 0; color: #d2d8eb; font-size: 21px; line-height: 29px; }
.armor-data .data-cell { padding: 7px 14px; }
.armor-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 10px 0; }
.armor-price { font-size: 35px; font-weight: 900; color: #ffdc61; }
.armor-price small { font-size: 21px; color: #e8deb5; }
.armor-actions .game-button { width: 245px; }

/* Short armor values remain single-line without browser scrollbars. */
.armor-data .data-cell strong { max-height: none; overflow: visible; white-space: nowrap; line-height: 34px; }


/* Personal progress uses the current game snapshot, not a stale response. */
.profile-panel { width: 820px; height: 522px; }
.profile-data { grid-template-columns: 1fr 180px; gap: 14px; }
.profile-data .data-cell { padding: 5px 14px; }
.profile-panel .profile-data strong { max-height: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 34px; }
.player-id-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 7px 14px; margin-top: 9px; background: #252840; }
.player-id-row .data-label { margin: 0; font-size: 17px; line-height: 21px; }
.player-id-value { display: block; font: 20px/28px Arial,sans-serif; color: #d2f5f4; white-space: nowrap; user-select: text; -webkit-user-select: text; }
.player-id-row .game-button { width: 118px; min-width: 118px; height: 48px; font-size: 20px; }
.experience-card { margin: 9px 14px 0; }
.experience-caption { display: flex; justify-content: space-between; font-size: 20px; line-height: 28px; color: #d5dce9; }
.experience-caption strong { color: #8ffff1; font-size: 22px; }
.experience-track { height: 12px; margin-top: 5px; border: 1px solid #608b9e; background: #14172d; padding: 2px; }
.experience-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#19bdbf,#67fff2); }
.profile-panel .welcome-reward { min-height: 78px; margin-top: 12px; padding: 4px 14px; }
.profile-panel .welcome-reward .game-button { height: 62px; }
.profile-panel .reward-copy p { line-height: 38px; }
.profile-panel .reward-copy strong { font-size: 36px; }
.profile-panel .reward-label { font-size: 18px; line-height: 21px; }
.profile-panel .reward-status { font-size: 17px; line-height: 23px; }
.profile-panel .account-error { min-height: 21px; font-size: 18px; line-height: 21px; margin: 3px 14px; }
.profile-panel .profile-actions { margin-top: 0; }
.profile-panel .profile-actions .game-button { height: 54px; font-size: 22px; }
.profile-panel .logout-button { min-height: 50px; }

/* The keyboard is translucent on iOS. Cover the full layout viewport, including
   behind its toolbar; the editor card alone follows the smaller visual viewport. */
#local-text-backdrop { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 19999; background: #060b1c; pointer-events: auto; }

/* v1.0.1: physical-viewport text entry, independent of the rotated game canvas. */
#local-text-editor { position: fixed; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left)); box-sizing: border-box; background: rgba(6,11,28,.88); color: #f3f8ff; font: 16px/1.4 "PingFang SC","Microsoft YaHei",sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#local-text-editor * { box-sizing: border-box; }
.text-editor-card { width: 100%; max-width: 600px; max-height: 100%; overflow: auto; border: 2px solid #41f2ee; border-radius: 10px; background: #302e4e; box-shadow: 0 8px 30px #060b1c88; }
.text-editor-card header { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 14px; background: #41f2ee; color: #0f172b; }
.text-editor-card h2 { margin: 0; font-size: 19px; }
.text-editor-card button { min-height: 40px; border: 1px solid #7196b4; border-radius: 5px; padding: 5px 22px; background: #415384; color: #f3f8ff; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; cursor: pointer; touch-action: manipulation; }
.text-editor-card header button { min-height: 32px; border: 0; padding: 0 8px; background: transparent; color: #0f172b; font-size: 27px; }
.text-editor-body { padding: 14px; }
#local-text-value { display: block; width: 100%; height: 46px; padding: 8px 12px; border: 2px solid #7196b4; border-radius: 5px; outline: none; background: #1d1f39; color: #fff; font: 20px/1.4 "PingFang SC","Microsoft YaHei",sans-serif; user-select: text; -webkit-user-select: text; }
#local-text-value:focus { border-color: #41f2ee; }
#local-text-value::placeholder { color: #a3bfd8; opacity: 1; }
.text-editor-note { margin: 10px 0; font-size: 14px; color: #a3bfd8; }
.text-editor-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.text-editor-actions [data-done] { background: #ffd541; border-color: #d4a52c; color: #0f172b; }
#local-text-editor.compact { padding-top: 4px; padding-bottom: 4px; }
.compact .text-editor-card header { height: 30px; }
.compact .text-editor-card h2 { font-size: 16px; }
.compact .text-editor-body { padding: 6px 10px; }
.compact #local-text-value { height: 40px; }
.compact .text-editor-note { display: none; }
.compact .text-editor-actions { margin-top: 6px; }
.compact .text-editor-actions button { min-height: 34px; }