@font-face {
  font-family: 'bradley';
  src: url('/fonts/bradley.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
:root { color-scheme: dark; font-family: Georgia, "Times New Roman", serif; background: #07080b; color: #e5dfd1; }
* { box-sizing: border-box; }
body { margin: 0; padding: 2rem 1rem; background: #07080b; min-height: 100vh; }
main { max-width: 50rem; margin: auto; }
.stage { position: relative; width: min(96vw, 780px); aspect-ratio: 780/680; margin: auto; overflow: hidden; background: #101216; box-shadow: 0 0 60px #000; border: 1px solid #4c4638; }
.stage-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Original Logo.as: logo.swf placed at (390,370), scale 0.7, alpha .9;
   its sprite centres the 776x417 art on the SWF origin, so on stage it
   spans x 118..662, y 224..516. BG band below is at y=340 h=50. */
/* (
   over a full-width #EEE glow band at y=340 h=50 fading to .7. */
.logo-band { position: absolute; left: 0; top: 50%; width: 100%; height: 7.35%; background: #eee; opacity: 0; box-shadow: 0 0 60px 30px rgba(238,238,238,.9); animation: title-fade-in 2s ease-out .8s forwards; }
.logo { position: absolute; left: 15.5%; top: 33%; width: 71.6%; opacity: 0; animation: title-logo-in 3.5s ease-out forwards; }
@keyframes title-logo-in { to { opacity: .9; } }
@keyframes title-fade-in { to { opacity: 1; } }
.logo-band { animation-name: title-band-in; }
@keyframes title-band-in { to { opacity: .7; } }
#butterfly { position: absolute; width: 18.05%; left: 58.7%; top: -35.1%; opacity: .95; z-index: 2; pointer-events: none; }
.ageha-frame { display: none; }
.ageha-frame.on { display: block; }
#butterfly img { width: 100%; height: auto; }
#title-stage .stage-bg-img, #title-stage .login-panel, #title-stage .copyright { animation: title-fade-in .8s ease-out; }
#title-stage .news-panel { animation: title-news-in .8s ease-out; }
@keyframes title-news-in { to { opacity: .8; } }
#title-stage.leaving .stage-bg-img, #title-stage.leaving .logo, #title-stage.leaving .logo-band, #title-stage.leaving .login-panel, #title-stage.leaving .news-panel, #title-stage.leaving .copyright { opacity: 0; transition: opacity .8s ease; }
/* Original LoginPanel.as + UL.css: Flex Panel at (500,20), 220 wide,
   215 high (300 in Register state); the global Panel style skins it with
   panel_gene.png (nine-slice scaleGrid 42/60/78/64, white title header,
   dark navy body), rendered at exact size in panel-login/register.png.
   Labels .LoginLabel bradley 16 white, inputs .LoginText Arial 12 black,
   Login button 80 wide centred. */
.login-panel { position: absolute; left: 65.8%; top: 2.9%; width: 28.9%; height: 31.6%; padding: 45px 10px 10px; color: #fff; z-index: 3; font-family: bradley, serif; background: url('/img/panel-login.png') no-repeat; background-size: 100% 100%; }
.login-panel:has(#register-form:not([hidden])) { height: 44.1%; background-image: url('/img/panel-register.png'); }
.login-panel h2 { position: absolute; left: 0; top: 0; width: 100%; height: 30px; margin: 0; padding: 5px 10px; box-sizing: border-box; font-weight: 500; font-size: .8rem; letter-spacing: 2px; color: #000; }
#status { text-align: center; font-size: .78rem; color: #fff; min-height: 1em; margin: .2rem 0 .6rem; }
.login-panel label { display: flex; align-items: center; margin: .55rem 0; font-size: 1rem; letter-spacing: 1px; }
.login-panel label span { flex: 0 0 50px; text-align: center; }
.login-panel input { flex: 1; min-width: 0; padding: .3rem .4rem; font-family: Arial, sans-serif; font-size: .75rem; color: #000; background: #fff; border: 1px solid #555; }
.login-btn { display: block; width: 80px; margin: .8rem auto .4rem; padding: .35rem 0; font-family: bradley, serif; letter-spacing: 2px; background: #e8e8e8; color: #000; border: 1px solid #555; cursor: pointer; }
.link-btn { display: block; margin: auto; padding: .3rem; background: none; border: none; color: #fff; font-family: bradley, serif; font-size: .75rem; letter-spacing: 2px; cursor: pointer; text-decoration: underline; }
/* Original NewsPanel.as: same panel_gene Panel skin at (15,480),
   220x200, faded to alpha .8; .NewsTextArea white Arial. */
.news-panel { position: absolute; left: 2%; top: 70.6%; width: 28.9%; height: 29.4%; padding: 2.2rem .8rem .8rem; opacity: .8; font-size: .82rem; z-index: 3; background: url('/img/panel-news.png') no-repeat; background-size: 100% 100%; }
.news-panel h3 { position: absolute; left: 0; top: 0; width: 100%; height: 30px; margin: 0; padding: 5px 10px; box-sizing: border-box; font-family: bradley, serif; font-weight: 500; letter-spacing: 4px; font-size: .8rem; color: #000; }
.news-panel p { color: #fff; font-family: Arial, sans-serif; line-height: 1.6; }
/* Original TitleView.as: copyright Label at (260,645), 490x30, centred,
   .FeatInfoLabel #C0C0C0 15px mincho. */
.copyright { position: absolute; left: 34.2%; top: 94.9%; width: 64.5%; margin: 0; text-align: center; font-size: .95rem; color: #c0c0c0; z-index: 3; }
.lobby-stage { background: #000; box-sizing: content-box; width: 760px; height: 680px; aspect-ratio: 760/680; }
.lobby-bg-img { position: absolute; left: 0; top: 23.5%; width: 100%; height: 72.9%; object-fit: fill; }
.lobby-logo { position: absolute; left: 78.9%; top: 21.2%; width: 21.1%; z-index: 3; }
.notice-panel { position: absolute; left: 33.7%; top: 93.5%; width: 40%; height: 3%; padding: 0; background-image: url('/img/flash/entrance_ch/3.png'); background-size: 100% 100%; display: flex; align-items: center; overflow: hidden; }
.notice-panel h3 { display: none; }
.notice-panel p { color: #e8e2d2; margin: 0 0 0 19%; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
/* LobbyStandChara uses per-SWF registration points, not a shared fit box. */
.lobby-chara { position: absolute; left: 0; top: 0; width: 760px; height: 680px; pointer-events: none; z-index: 2; }
.lobby-chara-img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; transform-origin: 0 0; }

/* Lobby Modals (Info & Serial) */
.lobby-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); z-index: 50; display: flex; align-items: center; justify-content: center; }
/* entrance_info_ch: white plate (12,72), 736x544; close centre (720,96). */
#lobby-info-modal { background:transparent; }
.lobby-info-dialog { position:absolute; inset:0; width:760px; height:680px; }
.info-dialog-bg { position:absolute; inset:0; width:760px; height:680px; pointer-events:none; }
.lobby-info-title { position:absolute; left:32px; top:84px; width:640px; height:28px; margin:0; color:#000; font:bold 18px/28px lobby-mincho,serif; }
.lobby-info-empty { position:absolute; left:20px; top:120px; width:720px; height:480px; margin:0; display:flex; align-items:center; justify-content:center; color:#000; font:16px/24px lobby-mincho,serif; }
#scene-lobby .lobby-info-close { position:absolute; left:705.5px; top:81.5px; width:29px; height:29px; margin:0; padding:0; background:transparent; border:0; border-radius:0; outline:0; box-shadow:none; transition:none; cursor:pointer; }
.lobby-info-close img { position:absolute; inset:0; width:29px; height:29px; pointer-events:none; }
.serial-msg.success { color: #58d868; }
.serial-msg.error { color: #f26868; }
.avatar-spot { position: absolute; left: 68%; right: 0; width: auto; bottom: 6.5%; height: 48%; display: flex; align-items: flex-end; justify-content: center; z-index: 2; pointer-events: none; }
.lobby-doll { position: relative; height: 100%;  pointer-events: auto;  }
.top-dirs { position: absolute; left: 0; right: 0; top: 4.7%; height: 16.5%; z-index: 3; }
.top-dirs button { position: absolute; top: 0; height: 100%; font: inherit; background: transparent; color: #e8e4da; border: none; outline: none; border-radius: 0; cursor: pointer; overflow: hidden; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; padding: 0; transition: none; box-shadow: none; }
.top-dirs button::after { content: ''; position: absolute; inset: 0; border-top: 1px solid #000; border-bottom: 1px solid #000; border-left: 2px solid #000; border-right: 2px solid #000; pointer-events: none; }
.top-dirs button:hover { z-index: 2; }
#scene-lobby .top-dirs button { background-color: transparent; border: 0; outline: 0; margin: 0; padding: 0; box-shadow: none; border-radius: 0; transition: none; }
#scene-lobby .top-dirs button:hover, #scene-lobby .top-dirs button:active, #scene-lobby .top-dirs button:focus, #scene-lobby .top-dirs button:focus-visible { background-color: transparent; border: 0; outline: 0; box-shadow: none; }
.top-dirs button:focus, .top-dirs button:focus-visible { outline: none !important; border: none !important; box-shadow: none !important; }
.top-dirs button:nth-child(1) { left: 0; width: 27.37%; background-image: url('/img/flash/entrance_ch/132.png'); }
.top-dirs button:nth-child(1)::after { border-left: 0; border-right: 1px solid #000; }
.top-dirs button:nth-child(2) { left: 27.37%; width: 27.37%; background-image: url('/img/flash/entrance_ch/139.png'); }
.top-dirs button:nth-child(2)::after { border-left: 1px solid #000; border-right: 0; }
.top-dirs button:nth-child(3) { left: 55.79%; width: 14.74%; background-image: url('/img/flash/entrance_ch/94.png'); }
.top-dirs button:nth-child(4) { left: 70.53%; width: 14.74%; background-image: url('/img/flash/entrance_ch/71.png'); }
.top-dirs button:nth-child(5) { left: 85.26%; width: 14.74%; background-image: url('/img/flash/entrance_ch/114.png'); }
.top-dir-label { position: absolute; right: 2px; bottom: 1px; pointer-events: none; display: block; }
.top-dirs button:nth-child(1) .top-dir-label { left: 0; right: auto; }
/* Entrance.as sale labels: (35,143), (85,147); entrance_ch sale at (8.1,146.1). */
#scene-lobby .lobby-sale-banner { position: absolute; left: 8.1px; top: 146.1px; width: 192px; height: 24px; z-index: 3; cursor: pointer; background: transparent; border: 0; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
#scene-lobby .lobby-sale-banner[hidden] { display: none; }
.lobby-sale-banner > img { display: block; width: 192px; height: 24px; }
.lobby-sale-discount { position: absolute; left: 26.9px; top: -3.1px; width: 40px; height: 40px; font: 20px/26px 'bradley', serif; letter-spacing: 1px; text-align: center; color: white; text-shadow: 0 0 1px black; pointer-events: none; }
.lobby-sale-time { position: absolute; left: 76.9px; top: .9px; width: 90px; height: 20px; font: 9px/20px 'Noto Serif CJK TC', serif; white-space: nowrap; text-align: right; color: white; background: black; pointer-events: none; }
#scene-lobby .lobby-side-btn { position: absolute; top: 23.5%; padding: 0; margin: 0; background: transparent; border: none; cursor: pointer; z-index: 3; }
#scene-prestory .prestory-skip, #scene-tutorial-start .tutorial-exit { background: transparent; border: none; padding: 0; margin: 0; }
.lobby-side-btn img { display: block; width: 100%; }
.lobby-option-btn, #scene-lobby .lobby-option-btn { left: 70.5%; top: 23.5%; width: 13.7%; }
.lobby-tutorial-btn, #scene-lobby .lobby-tutorial-btn { left: 84.2%; top: 23.5%; width: 15.8%; }
.lobby-serial-btn, #scene-lobby .lobby-serial-btn { left: 85.8%; top: 29.4%; width: 13.7%; }
.lobby-side-btn:hover { filter: brightness(1.1); }
.avatar-side-btns { position: absolute; right: 4px; bottom: 14%; display: flex; flex-direction: column; gap: 8px; pointer-events: auto; z-index: 4; }
.avatar-side-btns .side-icon-btn { font: inherit; width: 48px; height: 32px; background-color: #b1b1b1; border: 1px solid #000; border-right: none; border-radius: 2px 0 0 2px; outline: none; padding: 0; margin: 0; cursor: pointer; display: block; box-shadow: none; }
.avatar-side-btns .side-icon-btn img { display: block; width: 48px; height: 32px; pointer-events: none; }
.avatar-side-btns .side-icon-btn:hover { background-color: #8a8a8a; filter: brightness(1.08); }
.avatar-side-btns .side-icon-btn:focus, .avatar-side-btns .side-icon-btn:focus-visible { outline: none !important; box-shadow: none !important; }
#scene-lobby .avatar-side-btns .side-icon-btn, #scene-lobby .avatar-side-btns .side-icon-btn:focus, #scene-lobby .avatar-side-btns .side-icon-btn:focus-visible { border: 1px solid #000 !important; border-right: none !important; }
.center-dirs { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.center-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.center-svg .fl-btn { pointer-events: auto; cursor: pointer; outline: none; }
.center-svg .fl-btn:focus, .center-svg .fl-btn:focus-visible { outline: none; }
.center-svg image { image-rendering: auto; }
#scene-lobby button:focus, #scene-lobby button:focus-visible { outline: none !important; border: none !important; box-shadow: none !important; }
#lv-name { letter-spacing: .04em; white-space: nowrap; }
#ap-heart { color: #fff; white-space: nowrap; }
#free-stars { color: #ffdc4a; letter-spacing: 2px; white-space: nowrap; }
.scene { position: absolute; inset: 0; overflow: auto; padding: 3.2rem 2rem 4.5rem; background: rgba(10, 11, 15, .9); z-index: 4; }
#scene-lobby { background: none; padding: 0; overflow: hidden; z-index: 1; }
.scene-deck { background: linear-gradient(rgba(8,9,12,.55), rgba(8,9,12,.78)), url('/img/flash/edit_deck_base_cost_ch/1.png') center / cover no-repeat; }
.scene-quest { background: linear-gradient(rgba(8,9,12,.72), rgba(8,9,12,.9)); }
.quest-map-img { display: block; width: 100%; max-height: 240px; object-fit: cover; border: 1px solid #8a7c5c; margin-bottom: .8rem; }
.scene-game { background: linear-gradient(rgba(5,5,8,.35), rgba(5,5,8,.72)), url('/img/flash/bg_btl00a/1.jpg') center / cover no-repeat; }
.scene-duel { background: linear-gradient(rgba(8,9,12,.8), rgba(8,9,12,.92)), url('/img/flash/bg_btl99a/1.jpg') center / cover no-repeat; }
.channel-btns { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
.channel-btn { min-width: 135px; min-height: 32px; background: #2a2c33; }

.scene-regist .regist-chara { text-align: center; }
.scene-regist .regist-chara img { height: 260px; max-width: 240px; object-fit: contain; }
.scene-title { margin: .4rem 0 1.2rem; font-weight: 500; letter-spacing: .35em; font-size: 1.15rem; text-align: center; color: #e5d9b8; text-shadow: 0 1px 3px #000; }
.scene-note { color: #c9c2ae; line-height: 1.7; }
.scene label { display: block; margin: 1rem 0; }
.scene input[type="text"], .scene input:not([type]), .scene select { padding: .55rem; font: inherit; background: #10131b; color: inherit; border: 1px solid #585463; border-radius: 2px; }
.scene button { font: inherit; padding: .55rem .9rem; background: #bda77a; color: #181722; border: 1px solid #6d6046; border-radius: 2px; cursor: pointer; margin: .3rem .2rem; }
.scene ul { line-height: 1.9; }
.back-btn { position: absolute; left: 1.2rem; bottom: 4.6rem; }
.part-types { display: flex; gap: .6rem; }
.part-types span { padding: .7rem 1rem; border: 1px solid #8a7c5c; background: #171410; }
.chara-select { display: grid; gap: .7rem; }
.chara-select label { padding: .7rem; border: 1px solid #4c4638; background: rgba(18,16,13,.92); cursor: pointer; }
.chara-select label:has(input:checked) { border-color: #d8c9a3; background: #241f16; }
.duel-field { display: grid; gap: 1.2rem; text-align: center; margin: 1.5rem 0; padding: 1rem; background: rgba(5,5,8,.45); border: 1px solid rgba(138,124,92,.6); }
.hp-bar { height: .8rem; background: #26351f; border: 1px solid #6d7c5c; margin: .4rem auto; width: 70%; }
.card-row { letter-spacing: .6em; color: #d8c9a3; }
.distance-line { letter-spacing: .3em; color: #e8e2d2; }
.tutorial-list { line-height: 2.1; }
.binder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1.2rem; }
.binder-cell { padding: .8rem .5rem; border: 1px solid #4c4638; background: rgba(18,16,13,.92); text-align: center; font-size: .82rem; cursor: pointer; }
.deck-viewer { display: flex; align-items: flex-start; gap: .6rem; }
.deck-viewer #deck-view { flex: 1; border: 1px solid #4c4638; background: rgba(18,16,13,.92); padding: .6rem 1rem; }
button:disabled { opacity: .5; cursor: wait; }
:focus-visible { outline: 2px solid #d7c69f; outline-offset: 3px; }
#scene-lobby button:focus, #scene-lobby button:focus-visible, .top-dirs button:focus, .top-dirs button:focus-visible, .avatar-side-btns button:focus, .avatar-side-btns button:focus-visible { outline: none !important; border: none !important; box-shadow: none !important; }


/* Complete SWF side-button SVGs include their original Up/Over vector plates. */
#scene-lobby .avatar-side-btns .side-icon-btn { background:transparent; border:0 !important; border-radius:0; }
#scene-lobby .avatar-side-btns .side-icon-btn:hover { background:transparent; filter:none; }

.avatar-side-btns { align-items:flex-end; }
/* Retain the original entrance_info_ch plate and content bounds. */
#lobby-info-content[data-has-content="true"] { display:block;padding:12px;overflow:auto;white-space:pre-wrap; }
#lobby-info-content article+article { margin-top:16px; }
#lobby-info-content p,#lobby-notice-message p { margin:0 0 8px; }
#lobby-info-content a,#lobby-notice-message a { color:#164e96;text-decoration:underline; }
/* Shared avatar layer presentation. Scene wrappers own placement and size. */
.avatar-view { aspect-ratio: 108 / 352.95; }
.avatar-view > img { position: absolute; display: block; max-width: none; max-height: none; pointer-events: none; }
.avatar-view--shadow { filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.avatar-part-view { position: relative; display: block; overflow: hidden; }
.avatar-part-view[data-mode="cell"] { position: absolute; flex: none; }
.avatar-part-view[data-mode="detail"] { position: relative; flex: none; }
.avatar-part-view[data-mode="creation"] { width: 100%; flex: 1; min-height: 0; }
.avatar-part-art { position: absolute; inset: 0; display: block; }
.part-swatch { position: absolute; left: 8%; top: 10%; width: 26%; height: 26%; border: 1px solid rgba(0, 0, 0, 0.4); box-shadow: 0 0 2px rgba(0,0,0,0.5); z-index: 3; }
/* Two source-backed sprites. Layout and opacity remain scene-specific. */
.scene button[data-flash-button] { background-color: transparent; border: 0; margin: 0; padding: 0; box-shadow: none; transition: none; cursor: pointer; }
.scene [data-flash-button] > .flash-button-normal,
.scene [data-flash-button] > .flash-button-hover { display: block; width: 100%; height: 100%; }
.scene [data-flash-button] > .flash-button-hover { display: none; }
.scene [data-flash-button]:is(:hover, :focus-visible):not(:disabled) > .flash-button-normal,
.scene [data-flash-button]:is(.is-active, [aria-pressed="true"]) > .flash-button-normal { display: none; }
.scene [data-flash-button]:is(:hover, :focus-visible):not(:disabled) > .flash-button-hover,
.scene [data-flash-button]:is(.is-active, [aria-pressed="true"]) > .flash-button-hover { display: block; }
.scene [data-flash-button]:disabled { cursor: default; }
/* Card fronts have one source layout, 168×240. Wrappers may scale, not rebuild it. */
.card-face { display: block; aspect-ratio: 7 / 10; object-fit: contain; }
.card-view { position: relative; display: block; width: 168px; height: 240px; flex: none; cursor: pointer; user-select: none; pointer-events: auto; }
.card-view-canvas { position: absolute; left: 0; top: 0; width: 168px; height: 240px; transform: scale(var(--card-view-scale, 1)); transform-origin: 0 0; }
/* CharaCardClip._metaContainer sits at (80,120): rotationY turns about x=80 of the 168px card. */
.card-view-rotor { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform-origin: 80px 120px; }
.card-view .card-face, .card-view-info { position: absolute; left: 0; top: 0; width: 168px; height: 240px; backface-visibility: hidden; transform-origin: 80px 120px; }
.card-view[data-card-flipping] .card-face, .card-view[data-card-flipping] .card-view-info { backface-visibility: visible; }
.card-view [hidden] { display: none !important; }
/* CharaCardFrame (ccframe_a.swf) back, UL.css: CharaCardFeatNameLabel 11px minchoB, letterSpacing 2;
   CharaCardPassiveNameLabel 14px; CharaCard{Feat,Passive}InfoLabel 10px mincho, letterSpacing 1, leading 0.
   Labels shrink 1px at a time until they fit (fontSizeAdjust / fontSizeAdjustCaption). */
.card-view-info { display: block; color: white; --card-info-name-font: lobby-mincho, "Noto Serif CJK TC", PMingLiU, serif; --card-info-font: "Noto Serif CJK TC", PMingLiU, "MingLiU", serif; font-family: var(--card-info-font); }
.card-view-info img { position: absolute; max-width: none; pointer-events: none; }
.card-info-base { position: absolute; inset: 0; width: 168px; height: 240px; pointer-events: none; }
.card-info-content { position: absolute; inset: 0; }
.scene .card-view .card-info-tab { position: absolute; top: 1px; width: 82.95px; height: 17.95px; background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; }
.card-info-tab img { position: absolute; left: 0; top: 0; width: 82.95px; height: 17.95px; }
/* tab0-3 / skill_p0-3 at (5,24+30i); the tab's own hit button covers its 158x28 art. */
.scene .card-view .card-info-skill { position: absolute; left: 5px; width: 158px; height: 28px; background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; cursor: pointer; }
.card-info-skill-name { position: absolute; left: 4px; width: 140px; height: 18px; padding: 2px 0 0 2px; box-sizing: border-box; color: #fff; font: 11px/14px var(--card-info-name-font); letter-spacing: 2px; white-space: nowrap; overflow: hidden; pointer-events: none; }
.card-info-passives-name { left: 6px; height: 65px; font-size: 14px; line-height: 17px; }
.card-info-description { position: absolute; left: 4px; top: 146px; width: 160px; height: 100px; padding: 2px; box-sizing: border-box; white-space: pre-line; overflow: hidden; overflow-wrap: anywhere; color: #fff; font: 10px/12px var(--card-info-font); letter-spacing: 1px; cursor: text; user-select: text; }
.card-view:focus-visible { outline: 1px solid white; outline-offset: 2px; }
.card-view button:focus-visible { outline: 1px solid white; }

.card-info-tabs { position: absolute; left: 0; top: 0; width: 168px; height: 19px; z-index: 1; }
.card-info-panel { position: absolute; inset: 0; }
/* DeckCase.as x=-100; deckcase.swf stage=336×196, art=(2,4).
   Chara/EquipCardDeckClip: cards=(28,20), pitch=89, scale=.5 in this host. */
.scene [data-deck-case-view] { position:absolute; width:336px; height:196px; }
.scene .shared-deck-case { position:relative; width:336px; height:196px; transform:scale(var(--deck-case-scale,1)); transform-origin:0 0; }
.scene .shared-deck-case .deck-case-art { position:absolute; inset:0; display:block; width:336px; height:196px; max-width:none; pointer-events:none; }
.scene .shared-deck-case .deck-case-tabs { position:absolute; inset:0; pointer-events:none; }
.scene .shared-deck-case .deck-case-tabs button { position:absolute; left:305px; width:24px; height:47px; background-color:transparent; border:0; border-radius:0; outline:0; margin:0; padding:0; box-shadow:none; transition:none; pointer-events:auto; cursor:pointer; z-index:5; }
.scene .shared-deck-case .deck-case-tabs button[data-deck-case-tab="0"] { top:10px; }
.scene .shared-deck-case .deck-case-tabs button[data-deck-case-tab="1"] { top:57px; height:45px; }
.scene .shared-deck-case .deck-case-tabs button[data-deck-case-tab="2"] { top:102px; }
.scene .shared-deck-case .deck-case-tabs button img { position:absolute; inset:0; width:24px; height:100%; }
/* Flash hides the selected SimpleButton, exposing its authored static tab beneath. */
.scene .shared-deck-case .deck-case-tabs button[aria-selected="true"] img { visibility:hidden; }
.scene .shared-deck-case .deck-case-tabs button:focus-visible { outline:1px solid white; }
.scene .shared-deck-case .deck-case-slots { position:absolute; left:28px; top:20px; display:flex; gap:5px; z-index:2; }
.scene .shared-deck-case .deck-case-slot { position:relative; width:84px; height:120px; flex:none; }
.scene .shared-deck-case .deck-case-slot > .card-face { position:absolute; inset:0; display:block; width:84px; height:120px; }
/* Inventory artwork is shared with editor/binder views; CardView still owns fronts. */
.scene .deck-card-art { position:relative; width:168px; height:240px; transform-origin:0 0; pointer-events:none; }
.scene .deck-card-art > img { position:absolute; inset:0; width:168px; height:240px; object-fit:contain; }
.scene .deck-card-art .deck-weapon-icon { inset:auto; left:32px; top:48px; width:104px; height:104px; }
.scene .deck-card-art .deck-event-icon { inset:auto; left:58px; top:59px; width:52px; height:82px; }
/* UL.css ResultNameLabel / ResultTextLabel (minchoB, letterSpacing 1) with GlowFilter(white,2,2,16). */
.scene .deck-article-name { position:absolute; left:0; top:5px; width:164px; text-align:center; font:12px/16px lobby-mincho,'Noto Serif CJK TC',serif; letter-spacing:1px; color:black; text-shadow:-1px 0 1px white,1px 0 1px white,0 -1px 1px white,0 1px 1px white; }
.scene .deck-article-caption { position:absolute; left:15px; top:180px; width:144px; height:60px; overflow:hidden; text-align:center; font:9px/12px lobby-mincho,'Noto Serif CJK TC',serif; letter-spacing:1px; color:black; text-shadow:-1px 0 1px white,1px 0 1px white,0 -1px 1px white,0 1px 1px white; }
.scene .deck-card-art > img.deck-article-star { inset:auto; left:10px; top:9px; width:10px; height:10px; }
.scene .shared-deck-case .deck-case-slot > .deck-card-art { position:absolute; left:0; top:0; transform:scale(.5); }
.scene .deck-event-slot { position:absolute; box-sizing:border-box; width:30px; height:45px; border:2px solid; pointer-events:none; }
.scene .deck-event-slot > img { position:absolute; left:8px; top:15px; width:10px; height:10px; }
/* Weapon/EventCardDeckClip: _deckCase.alpha = 0.5 (includes the case's own tabs). */
.scene .shared-deck-case:not([data-case-tab="0"]) .deck-case-art,
.scene .shared-deck-case:not([data-case-tab="0"]) .deck-case-tabs img { opacity:.5; }
.scene .shared-deck-case .deck-case-event { position:absolute; width:26px; height:41px; z-index:1; }
.scene .shared-deck-case .deck-case-event img { display:block; width:26px; height:41px; }
/* ActionCardClip.__colorSet[0]: inner GlowFilter(white, .5, 3, 3, 2) before the clip's .5 scale. */
.scene .deck-event-thumb > img { display:block; width:26px; height:41px; }
.scene .deck-event-thumb::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 1.5px 1px rgba(255,255,255,.5); pointer-events:none; }
/* CharaCardDeckClip: 168x240 faces at 0.5 scale, 89px between positions. */
.scene .deck-preview { display:flex; gap:var(--deck-preview-gap,5px); }
.scene .deck-preview-slot { position:relative; flex:none; width:var(--deck-preview-width,84px); height:var(--deck-preview-height,120px); }
.scene .deck-preview-slot>.card-face { display:block; width:100%; height:100%; }
/* BuySendPanel single-item Flex skin; shared mechanics do not alter scene skins. */
.shared-confirm-dialog { position: fixed; inset: auto; left: var(--confirm-left, 50vw); top: var(--confirm-top, 50vh); margin: 0; transform: translate(-50%, -50%); box-sizing: border-box; width: 250px; height: 150px; padding: 0; color-scheme: light; color: white; border: 0; background: transparent url('/img/flash/shop_buy/confirm-single.png') no-repeat; font: bold 12px 'Noto Serif CJK TC', serif; overflow: hidden; }
.shared-confirm-dialog h3 { height: 26px; margin: 0; padding: 5px 10px; font-size: 12px; line-height: 16px; color: black; }
.shared-confirm-dialog p { position: absolute; left: 13px; top: 44px; width: 224px; margin: 0; text-align: center; line-height: 20px; }
/* UL.css Button: Flex default skin, borderColor #666, cornerRadius 3,
   themeColor #660000, Palatino black text (white on rollover). Not the
   OS-native button, which renders blue/white. */
.shared-confirm-dialog button { position: absolute; top: 100px; width: 60px; height: 23px; margin: 0; padding: 0; background: linear-gradient(#fdfdfd, #d6d6d6); color: #000; border: 1px solid #666; border-radius: 3px; font: bold 12px Palatino, Georgia, serif; letter-spacing: 1px; cursor: pointer; }
.shared-confirm-dialog button:hover { background: linear-gradient(#8a4a4a, #660000); color: #fff; }
#shared-confirm-yes { left: 56px; }
#shared-confirm-no { left: 136px; }

.shared-confirm-dialog[data-notice="true"] #shared-confirm-yes { left: 95px; }
.shared-confirm-dialog[data-notice="true"] p { white-space: pre-line; }
/* gene.swf: title strip at (0,0), long bar at (240.1,0), back at (712,0).
   View title fields: English (15,5), localized (100,12); Lot uses x=135. */
.scene [data-scene-header] { position: absolute; left: 0; top: 0; width: 760px; height: 32px; z-index: 25; pointer-events: none; }
.scene .scene-header { position: relative; width: 100%; height: 100%; }
.scene .scene-header-bar { position: absolute; left: 240.1px; top: 0; width: 520px; height: 32px; }
.scene .scene-header-strip { position: absolute; left: 0; top: 0; width: 240px; height: 32px; }
.scene .scene-header-en { position: absolute; left: 15px; top: 5px; height: 25px; color: white; font: 24px/25px 'bradley', serif; white-space: nowrap; }
.scene .scene-header-zh { position: absolute; left: var(--scene-header-title-offset, 100px); top: 9px; height: 25px; color: #111; font: 12px/25px 'Microsoft JhengHei', sans-serif; text-shadow: 0 0 3px rgba(255,255,255,.9), 0 0 2px white; white-space: nowrap; }
.scene [data-scene-header] .scene-header-back { position: absolute; left: 712px; top: 0; width: 48px; height: 32px; background: transparent; border: 0; border-radius: 0; outline: 0; margin: 0; padding: 0; box-shadow: none; transition: none; cursor: pointer; pointer-events: auto; }
.scene .scene-header-back img { position: absolute; inset: 0; width: 48px; height: 32px; }
.scene .scene-header-hover { visibility: hidden; }
.scene .scene-header-back:is(:hover, :focus-visible):not(:disabled) .scene-header-normal { visibility: hidden; }
.scene .scene-header-back:is(:hover, :focus-visible):not(:disabled) .scene-header-hover { visibility: visible; }
.scene .scene-header-back:focus-visible { outline: 1px solid white; outline-offset: -1px; }
/* Cover exactly the game stage (.stage: min(96vw,780px) x 780/680, centred
   under the body's 2rem top padding), not the whole viewport. No viewport-
   height term: that shrank the box narrower than the fixed-size stage. */
#scene-loading{position:fixed;top:2rem;left:50%;transform:translateX(-50%);width:min(96vw,780px);aspect-ratio:780/680;z-index:200;background:#000}
#scene-loading[hidden]{display:none}
#scene-loading-art{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){#scene-loading-art{opacity:.85}}
/* Visuals are generated from original Flex Halo skins, never native browser art. */
.scene .flash-slider { position:relative; width:200px; height:21px; user-select:none; }
.scene .flash-slider .flash-slider-track { position:absolute; left:0; top:0; width:200px; height:21px; pointer-events:none; }
.scene .flash-slider .flash-slider-highlight { position:absolute; left:6px; top:8px; width:0; height:2px; overflow:hidden; pointer-events:none; }
.scene .flash-slider .flash-slider-highlight img { position:absolute; left:0; top:0; width:188px; height:2px; max-width:none; }
.scene .flash-slider .flash-slider-thumb { position:absolute; left:0; top:9px; width:12px; height:12px; pointer-events:none; }
.scene .flash-slider .flash-slider-thumb img { position:absolute; inset:0; width:12px; height:12px; max-width:none; }
.scene .flash-slider .flash-slider-thumb img:not([data-state="up"]) { visibility:hidden; }
.scene .flash-slider:is([data-thumb-over="true"],[data-thumb-down="true"],:has(input:focus-visible)) .flash-slider-thumb img[data-state="up"] { visibility:hidden; }
.scene .flash-slider[data-thumb-over="true"] .flash-slider-thumb img[data-state="over"] { visibility:visible; }
.scene .flash-slider:is([data-thumb-down="true"],:has(input:focus-visible)) .flash-slider-thumb img[data-state="over"] { visibility:hidden; }
.scene .flash-slider:is([data-thumb-down="true"],:has(input:focus-visible)) .flash-slider-thumb img[data-state="down"] { visibility:visible; }
.scene .flash-slider:has(input:disabled) .flash-slider-thumb img { visibility:hidden; }
.scene .flash-slider:has(input:disabled) .flash-slider-thumb img[data-state="disabled"] { visibility:visible; }
/* SliderThumb.drawFocus uses the DOWN skin instead of a surrounding focus rectangle. */
.scene .flash-slider input[type="range"] { appearance:none; -webkit-appearance:none; position:absolute; inset:0; width:200px; height:21px; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
.scene .flash-slider input[type="range"]:disabled { cursor:default; }
.scene .flash-slider input[type="range"]::-webkit-slider-runnable-track { height:4px; border:0; }
.scene .flash-slider input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:12px; height:12px; margin-top:-4px; border:0; }
.scene .flash-slider input[type="range"]::-moz-range-track { height:4px; border:0; }
.scene .flash-slider input[type="range"]::-moz-range-thumb { width:12px; height:12px; border:0; }
/* Shared AvatarStatusBar. Layout comes from gene.swf and AvatarView.as. */
.param-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none; z-index: 24; }
.param-rank-bar { position: absolute; left: 0; bottom: 24px; width: 256px; height: 24px; display: block; pointer-events: none; }
.param-info-bar { position: absolute; left: 256px; bottom: 24px; width: 304px; height: 20px; display: block; pointer-events: none; }
.param-info-btn { position: absolute; left: 378px; bottom: 25px; width: 92px; height: 18px; display: block; pointer-events: auto; cursor: pointer; }
.param-gene-bar { position: absolute; left: 0; bottom: 0; width: 760px; height: 24px; display: block; pointer-events: none; }
.param-lv-name { position: absolute; left: 58px; bottom: 3px; width: 122px; font-family: Palatino, "Palatino Linotype", Georgia, serif; font-weight: bold; font-size: .78rem; color: #ffffff; text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.param-gems-val { position: absolute; left: 252px; bottom: 3px; width: 108px; text-align: right; font-family: Palatino, "Palatino Linotype", Georgia, serif; font-weight: bold; font-size: .82rem; color: #ffffff; text-shadow: 0 1px 2px #000; }
.param-exp-val { position: absolute; left: 430px; bottom: 3px; width: 158px; font-family: Palatino, "Palatino Linotype", Georgia, serif; font-weight: bold; font-size: .78rem; color: #ffffff; text-shadow: 0 1px 2px #000; }
.param-ap-crest { position: absolute; right: 8px; bottom: 2px; width: 96px; height: 80px; pointer-events: auto; }
.param-ap-bg, .param-ap-frame { position: absolute; inset: 0; width: 96px; height: 80px; display: block; pointer-events: none; }
.param-ap-fill { position: absolute; left: 24px; top: 24px; width: 48px; height: 42px; background: radial-gradient(circle at 50% 45%, #ff2a2a 0%, #c80000 70%, #7a0000 100%); clip-path: polygon(50% 18%, 68% 2%, 92% 8%, 100% 30%, 92% 55%, 50% 98%, 8% 55%, 0% 30%, 8% 8%, 32% 2%); pointer-events: none; }
#ap-heart { position: absolute; left: 0; right: 0; top: 27px; text-align: center; font-family: 'bradley', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 28px; font-weight: normal; line-height: 1; color: #ffffff; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 4px #000; letter-spacing: 1px; pointer-events: none; }
#free-stars { position: absolute; right: 4px; bottom: 1px; font-size: .82rem; color: #ffdc4a; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; letter-spacing: 2px; pointer-events: none; z-index: 6; }
.param-bar dl, .param-actions { display: none; }

/* Scene differences are configuration, never separate copies of this component. */
#param-bar[data-scene]:not([data-scene="scene-lobby"]) .param-rank-bar,
#param-bar[data-scene]:not([data-scene="scene-lobby"]) .param-info-bar,
#param-bar[data-scene]:not([data-scene="scene-lobby"]) .param-info-btn,
#param-bar[data-scene]:not([data-scene="scene-lobby"]) #free-stars,
#param-bar[data-ap="false"] .param-ap-crest { display: none; }
#param-bar[hidden] { display: none !important; }

/* RankingArea/RankingList and entrance_rank.swf: root (0,656), panel y=-216. */
#param-bar .param-rank-bar { height:216px;pointer-events:auto; }
.lobby-ranking-art { position:absolute;inset:0;width:256px;height:216px;pointer-events:none; }
#lobby-ranking-tabs button { position:absolute;top:0;height:31.95px; }
#param-bar #lobby-ranking button { background:transparent;border:0;margin:0;padding:0;box-shadow:none;transition:none;cursor:pointer; }
#lobby-ranking-tabs img { width:100%;height:100%; }
#lobby-ranking-tabs button.is-selected img { visibility:hidden; }
#lobby-ranking-previous,#lobby-ranking-next { position:absolute;left:232px;width:16px;height:16px; }
#lobby-ranking-previous { top:32px; } #lobby-ranking-next { top:172px; }
#lobby-ranking-previous img,#lobby-ranking-next img { width:16px;height:16px; }
#lobby-ranking button:disabled { opacity:.45;cursor:default; }
.lobby-ranking-row { position:absolute;left:0;width:224px;height:20px;font:10px/20px Verdana,sans-serif;color:#ccc;pointer-events:none; }
.lobby-ranking-position { position:absolute;left:4px;width:32px;text-align:center;color:#000;font:16px/20px bradley,serif;text-shadow:0 0 1.5px #fff; }
.lobby-ranking-name { position:absolute;left:54px;width:118px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.lobby-ranking-score { position:absolute;left:54px;width:170px;text-align:right; }
.lobby-ranking-arrow { position:absolute;left:32px;top:0;width:16px;height:16px; }
#lobby-ranking-mine { position:absolute;left:48px;top:195px;width:60px;text-align:center;color:#000;font:18px/24px bradley,serif;text-shadow:0 0 1.8px #fff;letter-spacing:1px; }
#lobby-ranking-point { position:absolute;left:163px;top:195px;width:60px;text-align:center;color:#ccc;font:12px/20px Verdana,sans-serif; }
#param-bar #lobby-ranking-status { position:absolute;left:4px;top:64px;width:220px;color:#ccc;font:12px Arial,sans-serif; }
#lobby-ranking-top { position:absolute;left:8px;top:32px;width:23.95px;height:47.95px;pointer-events:none; }

/* BG.as leaves the disabled event button visible; hiding it exposes selected red art. */
#lobby-ranking-event { position:absolute;left:206px;top:0;width:50px;height:32px;pointer-events:none; }
/* Names and row points inherit mx.controls.Label's Halo defaults (Verdana 10px).
   See https://flex.apache.org/asdoc/mx/controls/Label.html . Explicit rank numerals
   and the player's 12px point label keep their original overrides. */
/* =========================================================
 * LIBRARY SCENE (1:1 Flash 760x680 Pixel Layout)
 * Sources: library_cost_ch.swf, library_select.swf, story.swf, gene.swf
 * All element positions are PlaceObject2 coordinates from the SWFs.
 * ========================================================= */
.scene-library {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 10;
  background: #000;
  box-sizing: border-box;
}

.library-stage {
  position: relative;
  width: 760px;
  height: 680px;
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
}

/* Anti-pitfall 4: Scene button resets (no gold borders/backgrounds on Flash buttons) */
#scene-library button {
  background-color: transparent;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  transition: none;
  cursor: pointer;
}
#scene-library button:hover,
#scene-library button:active,
#scene-library button:focus,
#scene-library button:focus-visible {
  background-color: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}
#scene-library [hidden] {
  display: none !important;
}

/* Stage background & gene.swf chrome */
.library-bg-base {
  position: absolute;
  inset: 0;
  width: 760px;
  height: 680px;
  object-fit: fill;
  z-index: 0;
  pointer-events: none;
}

/* 4 Main Tabs at Y = 32px, X = 0/96/192/288, 96x16 (tab_queststory/charastory/characard/monstercard) */
.library-tabs {
  position: absolute;
  left: 0;
  top: 32px;
  width: 384px;
  height: 16px;
  z-index: 5;
}
.library-tab {
  position: absolute;
  top: 0;
  width: 96px;
  height: 16px;
}
.library-tab img {
  display: block;
  width: 96px;
  height: 16px;
  pointer-events: none;
}
.library-tab .tab-img-hover { display: none; }
.library-tab:hover:not(.is-active) .tab-img-norm { display: none; }
.library-tab:hover:not(.is-active) .tab-img-hover { display: block; }
/* No dedicated "active" art in the SWF: the over/hover frame is the selected state */
.library-tab.is-active .tab-img-norm { display: none; }
.library-tab.is-active .tab-img-hover { display: block; }

/* Tab icon at (254, 52), 36x39 */
.library-tab-icon {
  position: absolute;
  left: 254px;
  top: 52px;
  width: 36px;
  height: 39px;
  z-index: 4;
  pointer-events: none;
}

/* List header strip at (32, 88), 480x16 */
.library-list-header {
  position: absolute;
  left: 32px;
  top: 88px;
  width: 480px;
  height: 16px;
  z-index: 3;
  pointer-events: none;
}

/* library_select.swf header buttons btn_select_u (32,88) / btn_select_r (272,88), 240x16 */
.library-select-btn {
  position: absolute;
  top: 88px;
  width: 240px;
  height: 16px;
  z-index: 5;
}
.library-select-btn img {
  display: block;
  width: 240px;
  height: 16px;
  pointer-events: none;
}
/* In the story tabs the plain header strip shows instead of the select buttons */
.library-stage.mode-story .library-select-btn { display: none; }
.library-stage.mode-card .library-list-header { visibility: hidden; }

.library-page-indicator {
  position: absolute;
  left: 40px;
  top: 89px;
  width: 120px;
  height: 14px;
  line-height: 14px;
  font-family: 'bradley', monospace;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  z-index: 6;
  pointer-events: none;
}

/* Column strip at (216, 120), 272x16 */
.library-col-strip {
  position: absolute;
  left: 216px;
  top: 120px;
  width: 272px;
  height: 16px;
  z-index: 3;
  pointer-events: none;
}

/* 20 list rows at (32, 136 + 24k), 480x24 */
.library-rows {
  position: absolute;
  left: 32px;
  top: 136px;
  width: 480px;
  height: 480px;
  z-index: 4;
}
.library-row {
  position: relative;
  width: 480px;
  height: 24px;
  background: url('/img/flash/library_cost_ch/43.png') no-repeat 0 0 / 480px 24px;
  cursor: pointer;
  user-select: none;
}
.library-row:hover,
.library-row.selected {
  filter: brightness(1.6);
}
.library-row.empty {
  cursor: default;
  background-image: none;
  pointer-events: none;
}
.library-row-name {
  position: absolute;
  left: 12px;
  top: 3px;
  width: 300px;
  height: 18px;
  line-height: 18px;
  font-size: 13px;
  font-weight: bold;
  color: #f0e8d8;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.library-row-sub {
  position: absolute;
  right: 10px;
  top: 5px;
  width: 150px;
  height: 14px;
  line-height: 14px;
  text-align: right;
  font-size: 11px;
  color: #c8bfa8;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.library-row.owned .library-row-sub { color: #ffd875; }

/* 20 right-edge mark cells at (512, 128 + 24k), 16x24 */
.library-row-marks {
  position: absolute;
  left: 512px;
  top: 128px;
  width: 16px;
  height: 480px;
  z-index: 3;
  pointer-events: none;
}
.library-row-mark {
  width: 16px;
  height: 24px;
  background: url('/img/flash/library_cost_ch/52.png') no-repeat 0 0 / 16px 24px;
}
.library-row-mark.off {
  visibility: hidden;
}

/* Right detail panel at (580, 342), 168x228 ('parameter' sprite) */
.library-parameter {
  position: absolute;
  left: 580px;
  top: 342px;
  width: 168px;
  height: 228px;
  z-index: 3;
  pointer-events: none;
}
.library-detail {
  position: absolute;
  left: 580px;
  top: 342px;
  width: 168px;
  height: 228px;
  z-index: 4;
}
.library-detail-art {
  position: absolute;
  left: 92px;
  top: 12px;
  width: 68px;
  height: 96px;
  object-fit: contain;
  pointer-events: none;
}
.library-detail-name {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 156px;
  height: 18px;
  line-height: 18px;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #fff8e8;
  text-shadow: 0 1px 1px #151719, 1px 0 1px #151719, -1px 0 1px #151719;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* DataArea.as owns the value positions; library_cost_ch/47.png owns labels. */
#library-detail .library-detail-params {
  position: absolute;
  inset: 0;
  width: 168px;
  height: 228px;
  display: block;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
#library-detail .library-detail-params dd {
  position: absolute;
  width: 40px;
  height: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  letter-spacing: 0;
  color: #f7f8fa;
  text-shadow: 0 1px 1px #151719, 1px 0 1px #151719, -1px 0 1px #151719;
}
#library-detail .library-detail-params dd:nth-child(-n+3) { width: 125px; font-size: 11px; font-weight: 500; color: #f1f2f4; }
#library-detail .library-detail-params dd[aria-label="ID"] { color: #e3e6e9; font-weight: 500; }
#library-detail .library-detail-params dd[data-long-value] { font-size: 10px; }
#library-detail .library-detail-params dd[aria-label="ID"] { width: 112px; }
.library-detail-desc {
  position: absolute;
  left: 17px;
  top: 166px;
  width: 136px;
  height: 62px;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0;
  color: #f5f3ed;
  text-shadow: 0 1px 1px #151719, 1px 0 1px #151719, -1px 0 1px #151719;
  overflow-y: auto;
  scrollbar-width: thin;
  overflow-wrap: break-word;
  pointer-events: auto;
  user-select: text;
}

/* btn_story at (584, 585), 64x56 */
.library-btn-story {
  position: absolute;
  left: 584px;
  top: 585px;
  width: 64px;
  height: 56px;
  z-index: 5;
}
.library-btn-story img,
.library-btn-page img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.library-btn-story:disabled,
.library-btn-page:disabled {
  opacity: 0.35;
  cursor: default;
}

/* btn_back (544, 88) / btn_next (544, 552), 16x72 */
.library-btn-page {
  position: absolute;
  left: 544px;
  width: 16px;
  height: 72px;
  z-index: 5;
}
.library-btn-back { top: 88px; }
.library-btn-next { top: 552px; }

/* Story Reader Overlay (story.swf) */
.library-story-modal {
  position: absolute;
  inset: 0;
  width: 760px;
  height: 680px;
  z-index: 30;
}
.library-story-svg {
  position: absolute;
  inset: 0;
  width: 760px;
  height: 680px;
}
.library-story-title {
  position: absolute;
  left: 321px;
  top: 88px;
  width: 117px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #ffe9b0;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.library-story-text {
  position: absolute;
  left: 86px;
  top: 106px;
  width: 540px;
  height: 460px;
  padding: 18px 22px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.9;
  color: #efe6d0;
  text-shadow: 0 1px 2px #000;
  white-space: pre-line;
  overflow-y: auto;
}
.story-nav-btn {
  position: absolute;
  top: 68px;
  width: 24px;
  height: 24px;
  z-index: 31;
}
.story-nav-btn img {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.story-btn-back { left: 644px; }
.story-btn-next { left: 676px; }
.story-btn-exit { left: 712px; }
.story-nav-btn:disabled { opacity: 0.35; cursor: default; }


/* --- Global helpers (kept from original module) --- */
#error { border-left: 3px solid #df8989; padding: 1rem; color: #ffc1b6; background: #321f29; overflow-wrap: anywhere; }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
dt { color: #aaa6b2; } dd { margin: 0; text-align: right; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { #butterfly, .entrance-btn, .entrance-btn .btn-art, .quest-pin, .top-dirs button, .lobby-side-btn { transition: none; animation: none; } }

/* AS3 CharaCardListScene (20,132), CardListImage name (35,1), marks (194,3). */
.library-rows { left: 20px; top: 132px; width: 508px; }
.library-row { width: 508px; background-position: 12px 4px; }
.library-row-name { left: 35px; top: 1px; width: 155px; }
.library-row:hover, .library-row.selected { filter: none; }
#scene-library .library-card-mark { position: absolute; top: 3px; width: 16px; height: 16px; }
.library-card-mark img { display: block; pointer-events: none; }
/* Unowned variants leave their column empty; only owned cards show the
   getcard sparkle (a dimmed black blob in every cell reads as broken). */
#scene-library .library-card-mark:disabled { visibility: hidden; cursor: default; }
.library-stage:not(.mode-story) .library-page-indicator { display: none; }

/* library_cost_ch frames 3/4/5 retain the empty row artwork. */
.library-row.empty { background-image: url('/img/flash/library_cost_ch/43.png'); }
.library-stage[data-library-tab="monstercard"] .library-row { background-image: url('/img/flash/library_cost_ch/54.png'); }
.library-stage.mode-reborn .library-row { background-image: url('/img/flash/library_cost_ch/58.png'); }
.library-stage[data-library-tab="monstercard"] .library-row-marks,
.library-stage.mode-reborn .library-row-marks,
.library-stage.mode-story .library-col-strip,
.library-stage.mode-story .library-list-header,
.library-stage.mode-story .library-parameter,
.library-stage.mode-story .library-row-marks { display: none; }
.library-stage.mode-story .library-row { background: none; }
.library-stage:not([data-library-tab="queststory"]) .library-tab-icon { display: none; }
/* DataArea.as places the shared card face at (580,38). */
.library-detail-art { left: 0; top: -304px; width: 168px; height: 240px; }
.library-detail-name { left: 42px; top: 0; width: 125px; }
#scene-library .library-tab:disabled { filter: brightness(.3); cursor: default; }
.library-story-text { user-select: text; }

.library-story-image { position: absolute; left: 20px; top: 96px; width: 720px; height: 512px; }
.library-story-text { left: 38px; top: 113px; width: 695px; height: 475px; padding: 0; }
.library-story-svg { pointer-events: none; }
.library-story-modal { background: #000; }
.library-stage.mode-story .library-detail { visibility: hidden; }

/* CharaStoryListScene: origin (272,130), 30 titles/page, 16px pitch.
   StoryListImage mirrors the plate, keeping its label upright. */
.library-stage[data-library-tab="charastory"] .library-rows {
  left: 272px; top: 130px; width: 243px; height: 480px;
}
#scene-library .library-story-entry {
  position: absolute; left: -3px; width: 243px; height: 24px;
  color: #fff; text-align: left; overflow: visible;
}
.library-story-plate { position: absolute; inset: 0; pointer-events: none; }
.library-story-plate-up, .library-story-plate-over { position: absolute; left: 0; top: 0; width: 243px; height: 24px; }
.library-story-plate-over { display: none; }
.library-story-face { position: absolute; left: 179px; top: 0; width: 64px; height: 24px; }
.library-story-entry.is-turned { transform: translateX(-237px); }
.library-story-entry.is-turned .library-story-plate { transform: scaleX(-1); }
.library-story-entry-title {
  position: absolute; left: 23px; top: 2px; width: 170px; height: 20px;
  font-size: 11px; line-height: 20px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; pointer-events: none; text-shadow: 0 1px 2px #111;
}
.library-story-entry.is-turned .library-story-entry-title { left: 60px; }
#scene-library .library-story-entry:disabled { cursor: default; }
.library-story-entry:disabled .library-story-plate { filter: brightness(.3); }
.library-story-entry:hover:not(:disabled) .library-story-plate-up { display: none; }
.library-story-entry:hover:not(:disabled) .library-story-plate-over { display: block; }
.library-stage[data-library-tab="charastory"] .library-page-indicator { display: none; }
.library-detail-art.card-view { pointer-events: auto; }

/* CardListImage._FAVORITE_X/Y = (492,2), relative to the row at (20,132). */
#scene-library .library-favorite {
  position: absolute; left: 492px; top: 2px; width: 16px; height: 16px;
}
#scene-library .library-favorite img { pointer-events: none; }

/* Hover is not confirmation: red is reserved for the server-confirmed favorite. */
#scene-library .library-favorite:not([aria-pressed="true"]) > .flash-button-normal { display: block; }
#scene-library .library-favorite:not([aria-pressed="true"]) > .flash-button-hover { display: none; }
#scene-library .library-favorite[aria-busy="true"] { opacity: .45; cursor: wait; }

.library-load-message { position: absolute; left: 32px; top: 60px; width: 480px; z-index: 10; font: 12px/20px sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#scene-library #library-retry { margin-left: 8px; color: #fff; text-decoration: underline; font: inherit; }
#scene-library .library-result-select { position: absolute; left: 172px; top: 3px; width: 16px; height: 16px; }
#scene-library .library-result-select img { pointer-events: none; }

.library-story-text { cursor:pointer; }
.library-story-future { visibility:hidden; }
.library-story-read-mark { position:absolute; pointer-events:none; max-width:none; }
.scene-regist { padding: 0; overflow: hidden; background: #0a0a0c; }
.regist-step { position: absolute; inset: 0; z-index: 2; }
.regist-bg, .regist-layer, .regist-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.regist-bg { z-index: 0; object-fit: cover; }
.regist-layer { z-index: 1; }
.regist-frame { z-index: 3; pointer-events: none; }
.regist-phase { position: absolute; left: 2.1%; width: 15.8%; z-index: 4; }
#phase-a { top: 21.2%; } #phase-b { top: 36.5%; } #phase-c { top: 51.8%; }
.scene-regist input.regist-name, .scene-regist input.regist-invite { position: absolute; left: 47.6%; width: 22.9%; height: 3.4%; padding: .1rem .3rem; font-size: .85rem; color: #111; background: rgba(232,226,210,.92); border: 1px solid #555; z-index: 2; }
.scene-regist input.regist-name { top: 51.5%; }
.scene-regist input.regist-invite { top: 80.9%; }
.regist-avatar-preview { position: absolute; left: 20.1%; top: 39.4%; width: 37.6%; height: 46.3%; z-index: 2; }
.pv-stage { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); }
.regist-types { position: absolute; left: 57.9%; top: 20%; width: 40%; height: 7.1%; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 5.3%; z-index: 2; }
.scene-regist .regist-types button { padding: 0; color: transparent; background: transparent; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.scene-regist .regist-types button:hover { background: rgba(255, 255, 255, 0.12); }
.scene-regist .regist-types button.on { background: rgba(153, 184, 193, 0.35); border-color: #fff; box-shadow: 0 0 6px #ffffaa; }
#regist-type-label { position: absolute; left: 63.7%; top: 30%; width: 28.4%; color: #2a2c33; letter-spacing: .1em; z-index: 2; }
.regist-items { position: absolute; left: 61.1%; top: 34.1%; width: 33.7%; height: 50.6%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); column-gap: 1.6%; row-gap: 1.2%; z-index: 2; }
.scene-regist .regist-items button { padding: 0; background: transparent; border: 2px solid transparent; cursor: pointer; background-size: contain; background-repeat: no-repeat; background-position: center; }
.regist-note { position: absolute; left: 5%; bottom: 14%; width: 42%; font-size: .72rem; color: #c9c2ae; z-index: 2; }
.scene-regist .chara-select { position: absolute; left: 21.05%; top: 24.71%; width: 25.26%; height: 56.47%; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; }
.scene-regist .chara-btn { position: relative; height: 16.67%; padding: 0; margin: 0; cursor: pointer; border: none; outline: none; box-shadow: none; display: block; background-image: url('/img/flash/make_3card_ch/1.png'); background-size: 100% 100%; background-repeat: no-repeat; }
.scene-regist .chara-btn:hover { background-image: url('/img/flash/make_3card_ch/18.png'); }
.scene-regist .chara-btn:has(input:checked) { background-image: url('/img/flash/make_3card_ch/18.png'); }
.scene-regist .chara-btn input { position: absolute; opacity: 0; pointer-events: none; }
.scene-regist .chara-btn-img { position: absolute; left: 2.08%; top: 6.25%; z-index: 1; width: 62.5%; height: 87.5%; object-fit: fill; display: block; }
#regist-chara-img { position: absolute; right: 0; top: 19.6%; width: 56.3%; height: 75.7%; object-fit: contain; object-position: right bottom; transform: scaleX(-1); z-index: 2; pointer-events: none; }
.scene-regist .chara-info-panel { position: absolute; right: 3.5%; top: 73.5%; width: 44%; text-align: right; z-index: 3; pointer-events: none; }
.scene-regist .chara-name { font-size: 1.7rem; font-weight: bold; color: #f5f0e6; letter-spacing: .15em; text-shadow: 0 2px 4px #000, 0 0 8px #000; margin-bottom: .25rem; }
.scene-regist .chara-stats { font-size: 1.15rem; letter-spacing: .08em; margin-bottom: .35rem; text-shadow: 0 1px 3px #000; }
.scene-regist .chara-stats .stat-lbl { font-size: .88rem; font-weight: bold; color: #e5c158; margin-left: .65rem; vertical-align: baseline; }
.scene-regist .chara-stats .stat-val { font-size: 1.25rem; font-weight: bold; color: #ffffff; margin-left: .18rem; vertical-align: baseline; }
.scene-regist #card-desc { margin: 0; font-size: .85rem; color: #e8e2d2; line-height: 1.4; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.scene-prestory { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; background: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; }
.prestory-line { font-size: 1.5rem; letter-spacing: .12em; color: #fff; text-align: center; text-shadow: 0 2px 6px #000; margin: 0 8%; line-height: 2; }
.prestory-skip { position: absolute; right: 4%; bottom: 6%; padding: 0; background: none; border: none; cursor: pointer; z-index: 12; }
.prestory-skip img { display: block; width: 80px; }
.scene-tutorial-start { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; background-color: #b0ada6; background-image: url('/img/flash/tutorial/diamond_tile.png'); background-repeat: repeat; overflow: hidden; z-index: 10; }
.tutorial-title, .tutorial-guide { display: none !important; }
.tutorial-exit { position: absolute; right: 2%; top: 2%; padding: 0 !important; background: none !important; border: none !important; cursor: pointer; z-index: 25; transition: transform .1s, filter .15s; }
.tutorial-exit img { display: block; width: 68px; }
.tutorial-exit:hover { transform: scale(1.05); filter: brightness(1.15); }
.tutorial-exit:active { transform: scale(0.96); }
.tutorial-tabs { position: absolute; top: 3.5%; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 20; }
.tut-tab-btn { width: 62px; height: 62px; border-radius: 50% !important; background: #141416 !important; border: 2px solid #28282c !important; color: #f0f0f0 !important; font-size: 0.72rem !important; font-weight: bold !important; line-height: 1.25 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; cursor: pointer; padding: 0 !important; margin: 0 !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); transition: background .18s, border-color .18s, transform .1s; }
.tut-tab-btn:hover { background: #26262e !important; border-color: #4a4a58 !important; transform: scale(1.04); }
.tut-tab-btn.active { background: #686084 !important; border-color: #8c82b0 !important; box-shadow: 0 0 10px rgba(140, 130, 176, 0.6); }
.tutorial-standing-blau { position: absolute; right: 4%; bottom: 110px; height: 72%; max-height: 486px; width: auto; z-index: 5; pointer-events: none; transform: scaleX(-1); filter: drop-shadow(4px 4px 12px rgba(0, 0, 0, 0.45)); transition: right .2s, bottom .2s; }
.tutorial-visual { position: absolute; left: 5%; right: 26%; top: 16%; bottom: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 4; pointer-events: auto; transition: all .2s; }
.scene-tutorial-start.is-battle .tutorial-visual { right: 5%; }
.tutorial-visual img#tutorial-illustration,
.tutorial-visual video#tutorial-video { max-width: 90%; max-height: 82%; object-fit: contain; border: 1px solid #5a5040; box-shadow: 0 4px 20px rgba(0, 0, 0, .85); border-radius: 4px; }
.tutorial-visual img#tutorial-sub-illustration { max-width: 90%; height: auto; margin-top: 6px; }
.tutorial-dialog { position: absolute; left: 0; right: 0; bottom: 0; height: 115px; background: #dadad4; border-top: 2px solid #555550; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35); cursor: pointer; z-index: 15; box-sizing: border-box; }
.tutorial-avatar-bust { position: absolute; left: 20px; bottom: 0; width: 88px; height: 116px; object-fit: contain; z-index: 16; pointer-events: none; }
.tutorial-nameplate { position: absolute; left: 82px; bottom: 6px; width: 56px; height: 24px; z-index: 17; pointer-events: none; }
.tutorial-name-text { position: absolute; left: 90px; bottom: 8px; font-family: "Hiragino Kaku Gothic ProN", "Meiryo", "Microsoft JhengHei", sans-serif; font-weight: 900; font-size: 15px; color: #6b1414; text-shadow: -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff, 0 1px 3px rgba(0,0,0,0.3); letter-spacing: 2px; z-index: 17; pointer-events: none; }
.tutorial-line-box { position: absolute; left: 175px; right: 85px; top: 12px; bottom: 10px; display: flex; align-items: center; pointer-events: none; }
.tutorial-dialog p { margin: 0; font-size: 1.05rem; font-weight: bold; line-height: 1.75; color: #1a1a1a; white-space: pre-line; }
.tutorial-continue-seal { position: absolute; right: 28px; bottom: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; z-index: 18; transition: transform .12s ease; }
.tutorial-continue-seal:hover { transform: scale(1.1); }
.tutorial-continue-seal .seal-arrow { width: 28px; height: 28px; display: block; animation: pulse-arrow 1.2s infinite alternate ease-in-out; }
.tutorial-continue-seal .seal-text { width: 32px; height: 9px; display: block; margin-top: 3px; }
@keyframes pulse-arrow { 0% { transform: translateY(-2px); } 100% { transform: translateY(2px); } }
.tutorial-next, #tutorial-next-indicator, .tutorial-next-btn { display: none !important; }
.scene-regist .regist-nav { position: absolute; z-index: 5; padding: 0; background: none; border: none; cursor: pointer; }
.scene-regist .regist-nav:disabled { cursor: not-allowed; opacity: .55; pointer-events: none; }
.scene-regist .regist-nav img { width: 100%; display: block; }
#regist-prev { left: 21.1%; top: 88.2%; width: 10.5%; }
#regist-ok { left: 51.6%; top: 87.1%; width: 14.7%; }
#regist-next { left: 86.3%; top: 88.2%; width: 10.5%; }
.scene-regist .regist-items button { background: #4e4e4e; border-radius: 2px; color: #e8e2d2; font-size: .68rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .2rem; text-shadow: 0 1px 2px #000; transition: background .15s ease, border-color .15s ease; overflow: hidden; }
.scene-regist .regist-items button:hover { background: #696969; }
.scene-regist .regist-items button.on { background: #556268; border-color: #fff; box-shadow: 0 0 6px #ffffaa; }

/* Shop Scene Reconstruction (Strict 1:1 Flash 760x680 Layout) */
.scene-shop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 10;
  background: #000;
  box-sizing: border-box;
}

.shop-stage {
  position: relative;
  width: 760px;
  height: 680px;
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
}

/* Anti-pitfall 4: Reset all button styling inside #scene-shop */
#scene-shop button {
  background-color: transparent;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  transition: none;
  cursor: pointer;
}
#scene-shop button:hover,
#scene-shop button:active,
#scene-shop button:focus,
#scene-shop button:focus-visible {
  background-color: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* Flash decors and base backgrounds */
.shop-bg {
  position: absolute;
  inset: 0;
  width: 760px;
  height: 680px;
  object-fit: fill;
  z-index: 0;
  pointer-events: none;
}

.shop-panel-base {
  position: absolute;
  inset: 0;
  width: 760px;
  height: 680px;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
}

.shop-trim {
  position: absolute;
  left: 488px;
  top: 632px;
  width: 272px;
  height: 24px;
  z-index: 2;
  pointer-events: none;
}

.shop-banner {
  position: absolute;
  left: 528px;
  top: 56px;
  width: 232px;
  height: 32px;
  z-index: 2;
  pointer-events: none;
}

/* Main Category Tabs (Y = 32px) */
.shop-tabs {
  position: absolute;
  left: 0;
  top: 32px;
  width: 672px;
  height: 22px;
  z-index: 5;
}
.shop-tab-btn {
  position: absolute;
  top: 0;
  width: 96px;
  height: 22px;
}
.shop-tab-btn .tab-img-norm { display: block; width: 100%; height: 100%; }
.shop-tab-btn .tab-img-hover { display: none; width: 100%; height: 100%; }
.shop-tab-btn .tab-img-active { display: none; width: 100%; height: 100%; }
.shop-tab-btn:hover:not(.active) .tab-img-norm { display: none; }
.shop-tab-btn:hover:not(.active) .tab-img-hover { display: block; }
.shop-tab-btn.active .tab-img-norm,
.shop-tab-btn.active .tab-img-hover { display: none; }
.shop-tab-btn.active .tab-img-active { display: block; }

/* Sub-Tabs (Y = 56px) */
.shop-subtabs {
  position: absolute;
  left: 0;
  top: 56px;
  width: 500px;
  height: 32px;
  z-index: 5;
}
.shop-subtab-btn {
  position: absolute;
  top: 0;
  width: 96px;
  height: 32px;
}
.shop-subtab-btn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.shop-subtab-btn .subtab-label {
  position: absolute;
  left: 22px;
  top: 7px;
  width: 68px;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 1px 2px #000000;
  pointer-events: none;
}

/* 15-Slot Tile Grid (X = 24, Y = 104) */
.shop-grid {
  position: absolute;
  left: 24px;
  top: 104px;
  width: 468px;
  height: 278px;
  display: grid;
  grid-template-columns: repeat(5, 88px);
  grid-template-rows: repeat(3, 88px);
  gap: 7px 7px;
  z-index: 4;
}

.shop-slot {
  position: relative;
  width: 88px;
  height: 88px;
  box-sizing: border-box;
  background: url('/img/flash/shopitem_base/slot_normal.png') no-repeat center / 100% 100%;
  cursor: pointer;
  user-select: none;
}

.shop-slot:hover {
  background-image: url('/img/flash/shopitem_base/slot_hover.png');
}

.shop-slot.active {
  background-image: url('/img/flash/shopitem_base/slot_selected.png');
}

.shop-slot.empty {
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}

#scene-shop .shop-slot .article-missing-image {
  display: block;
  padding-top: 28px;
  color: #333;
  font-size: 12px;
  text-align: center;
}

.shop-slot-icon {
  position: absolute;
  pointer-events: none;
}

.shop-slot-icon.kind-item {
  left: 12px;
  top: 12px;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.shop-slot-icon.kind-card {
  left: 23px;
  top: 13px;
  width: 42px;
  height: 60px;
  object-fit: fill;
}

.shop-slot-price {
  position: absolute;
  left: 7px;
  top: 72px;
  width: 78px;
  height: 13px;
  text-align: right;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  line-height: 13px;
  pointer-events: none;
}

.shop-slot-coin {
  position: absolute;
  left: 3px;
  top: 74px;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.shop-slot-equip {
  position: absolute;
  left: 43px;
  top: 3px;
  width: 41px;
  height: 9px;
  pointer-events: none;
}

/* Pagination Bar (Y = 394px) */
.shop-pagination {
  position: absolute;
  left: 16px;
  top: 394px;
  width: 496px;
  height: 16px;
  z-index: 5;
}

.shop-page-btn {
  position: absolute;
  top: 0;
  width: 24px;
  height: 16px;
}
.shop-page-btn:disabled { opacity: 0.35; cursor: default; }

.shop-page-first { left: 0px; }
.shop-page-prev  { left: 24px; }
.shop-page-next  { left: 448px; }
.shop-page-last  { left: 472px; }

.shop-page-indicator {
  position: absolute;
  left: 60px;
  top: 0;
  width: 376px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  color: #e8dcc4;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

/* Lower Detail & Currency Panel (Y = 416..632) */
.shop-detail-panel {
  position: absolute;
  left: 0;
  top: 416px;
  width: 488px;
  height: 230px;
  z-index: 4;
}

.shop-ex-coin-bar {
  position: absolute;
  left: 0;
  top: 160px;
  width: 448px;
  height: 48px;
  pointer-events: none;
  z-index: 1;
}

.shop-detail-icon-wrap {
  position: absolute;
  left: 320px;
  top: 0;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-detail-icon-wrap > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.shop-detail-name {
  position: absolute;
  left: 106px;
  top: 8px;
  width: 200px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-detail-time {
  position: absolute;
  left: 15px;
  top: 46px;
  width: 110px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
}

.shop-detail-timing {
  position: absolute;
  left: 15px;
  top: 78px;
  width: 110px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
}

.shop-detail-count-before {
  position: absolute;
  left: 15px;
  top: 110px;
  width: 70px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
}

.shop-detail-count-after {
  position: absolute;
  left: 95px;
  top: 110px;
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
}

.shop-detail-desc {
  position: absolute;
  left: 145px;
  top: 47px;
  width: 165px;
  height: 80px;
  font-size: 11px;
  line-height: 1.35;
  color: #ffffff;
  margin: 0;
  overflow-y: auto;
}

.shop-before-gems {
  position: absolute;
  left: 96px;
  top: 158px;
  width: 100px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-family: monospace;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
}

.shop-after-gems {
  position: absolute;
  left: 211px;
  top: 158px;
  width: 100px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-family: monospace;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
}

.shop-buy-btn {
  position: absolute;
  left: 344px;
  top: 160px;
  width: 80px;
  height: 24px;
  z-index: 5;
}
.shop-buy-btn:disabled { opacity: 0.4; cursor: default; }

.shop-coin-val {
  position: absolute;
  top: 186px;
  width: 26px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-family: monospace;
  font-size: 10px;
  color: #ffffff;
}
.shop-before-coin-5 { left: 17px; }
.shop-after-coin-5  { left: 47px; }

.shop-msg {
  position: absolute;
  left: 16px;
  top: 210px;
  width: 460px;
  font-size: 11px;
  font-weight: bold;
  min-height: 16px;
}
.shop-msg.success { color: #81c784; }
.shop-msg.error { color: #e57373; }

/* Right Panel: Avatar Doll Stage and Fitting Reset */
.shop-avatar-stage {
  position: absolute;
  left: 488px;
  top: 120px;
  width: 260px;
  height: 500px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 4;
}

.shop-doll-stage {
  position: relative;
  height: 353px;

  pointer-events: auto;

}
.shop-fit-reset-btn {
  position: absolute;
  left: 392px;
  top: 635px;
  width: 96px;
  height: 18px;
  z-index: 8;
}

/* Bottom Status HUD (Y = 656..680) */
/* BuySendPanel.as and UL.css.cn: original panel_gene nine-slice skin. */
#scene-shop .shop-buy-modal { box-sizing: border-box; width: 550px; height: 250px; padding: 0; margin: 0; color-scheme: light; color: white; border: 0; background: transparent url("/img/flash/shop_buy/confirm-bulk.png") no-repeat; font: bold 12px "Noto Serif CJK TC", serif; overflow: hidden; }
#scene-shop .shop-buy-modal h3 { box-sizing: border-box; height: 26px; margin: 0; padding: 5px 10px; font-size: 12px; line-height: 16px; background: transparent; color: black; }
#scene-shop .shop-modal-content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
#scene-shop #shop-modal-name { position: absolute; left: 35px; top: 50px; width: 230px; height: 50px; line-height: 20px; }
#scene-shop .shop-modal-quantity { position: absolute; left: 285px; top: 50px; height: 20px; display: flex; align-items: center; gap: 0; }
#scene-shop .shop-modal-quantity > select { box-sizing: border-box; width: 35px; height: 18px; margin: 0 5px; padding: 0; font: 11px Arial, sans-serif; color: FieldText; background: Field; border: 1px solid ButtonBorder; }
#scene-shop .shop-modal-param-bar { position: absolute; left: 55px; top: 90px; width: 448px; height: 48px; }
#scene-shop .shop-modal-gems { position: absolute; top: 89px; width: 100px; height: 20px; line-height: 20px; text-align: center; color: white; font: 22px/20px "bradley", serif; letter-spacing: 1px; }
#scene-shop #shop-modal-before-gems { left: 155px; }
#scene-shop #shop-modal-after-gems { left: 270px; }
#scene-shop .shop-modal-coin { position: absolute; top: 117px; width: 40px; height: 20px; font: 10px/20px "Noto Serif CJK TC", serif; color: white; text-align: center; }
#scene-shop #shop-modal-question { position: absolute; left: 161px; top: 160px; width: 228px; height: 50px; margin: 0; text-align: center; line-height: 20px; }
#scene-shop .shop-buy-modal button { position: absolute; top: 200px; box-sizing: border-box; width: 60px; height: 23px; background: linear-gradient(#fdfdfd, #d6d6d6); color: #000; border: 1px solid #666; border-radius: 3px; cursor: pointer; padding: 0; margin: 0; font: bold 12px Palatino, Georgia, serif; letter-spacing: 1px; }
#scene-shop .shop-buy-modal button:hover { background: linear-gradient(#8a4a4a, #660000); color: #fff; }
#scene-shop #shop-buy-confirm { left: 186px; }
#scene-shop #shop-buy-cancel { left: 296px; }
#scene-shop .shop-buy-modal[data-single="true"] { width: 250px; height: 150px; background-image: url("/img/flash/shop_buy/confirm-single.png"); }
#scene-shop .shop-buy-modal[data-single="true"] .shop-modal-bulk { display: none; }
#scene-shop .shop-buy-modal[data-single="true"] #shop-modal-question { left: 13px; top: 60px; }
#scene-shop .shop-buy-modal[data-single="true"] button { top: 100px; }
#scene-shop .shop-buy-modal[data-single="true"] #shop-buy-confirm { left: 40px; }
#scene-shop .shop-buy-modal[data-single="true"] #shop-buy-cancel { left: 150px; }
#scene-shop .shop-modal-gems.is-spent, #scene-shop .shop-modal-coin.is-spent, #scene-shop .shop-after-gems.is-spent, #scene-shop .shop-coin-val.is-spent { color: #ffff00; }
#scene-shop .shop-modal-gems.insufficient, #scene-shop .shop-modal-coin.insufficient { color: #ff0000; }
#scene-shop [hidden] { display: none !important; }
#scene-shop .shop-detail-icon-wrap > .shop-slot-icon { position: static; width: 104px; height: 104px; object-fit: contain; }
#scene-shop button:focus-visible { outline: 1px solid white; }
/* Match the shared gene bottom bar values, including the player's level. */
/* ShopBaseInventoryClip price field (7,72), 80x30, right aligned. */
#scene-shop .shop-slot-price { left: 7px; top: 72px; width: 80px; height: 30px; font: 10px/18px Verdana, Arial, sans-serif; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
#scene-shop .shop-price-unit { margin-left: 2px; font-size: 10px; }

/* UL.css.cn currency fields: Bradley 22px, letter spacing 1. */
#scene-shop .shop-before-gems, #scene-shop .shop-after-gems { font: 22px/20px "bradley", serif; letter-spacing: 1px; }
#scene-shop .shop-coin-val { width: 40px; height: 20px; font: 10px/20px "Noto Serif CJK TC", serif; }
/* SelectedImage uses the original 0.5 card scale, independent of grid thumbnails. */
#scene-shop .shop-detail-icon-wrap > .card-view { width: 84px; height: 120px; --card-view-scale: .5; }
/* Geometry: gacha_base_ch.swf, LotView.as and LotItemPreview.as. */
.scene-lot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 20;
}
#scene-lot [hidden] { display: none !important; }
#scene-lot .lot-backdrop-wrap { position: absolute; inset: 0; pointer-events: none; }
#scene-lot .lot-backdrop-wrap img { position: absolute; display: block; }
#scene-lot .lot-bg-top { left: 0; top: 24px; width: 760px; height: 184px; }
#scene-lot .lot-bg-bot { left: 0; top: 472px; width: 760px; height: 184px; }
#scene-lot .lot-bg-mid { left: 0; top: 128px; width: 760px; height: 344px; }
#scene-lot .lot-ticket-box-bg { left: 0; top: 597px; width: 128px; height: 51px; }
#scene-lot .lot-banner-bg { left: 0; top: 32px; width: 760px; height: 96px; }
#scene-lot .lot-guide { left: 0; top: 37px; width: 144px; height: 486px; }
#scene-lot button {
  background-color: transparent; border: 0; outline: 0; margin: 0; padding: 0;
  box-shadow: none; transition: none; cursor: pointer;
}
#scene-lot button:focus-visible { outline: 1px solid white; }
#scene-lot button img { position: absolute; inset: 0; width: 100%; height: 100%; }
#scene-lot .lot-over { visibility: hidden; }
#scene-lot button:is(:hover, :focus-visible) .lot-up { visibility: hidden; }
#scene-lot button:is(:hover, :focus-visible) .lot-over { visibility: visible; }
#scene-lot .lot-caption-text { position: absolute; left: 140px; top: 48px; width: 600px; height: 80px; margin: 0; padding: 0; white-space: pre-line; font-size: 13px; line-height: 1.5; color: black; }
#scene-lot .lot-ticket-count { position: absolute; left: 85px; top: 613px; width: 45px; height: 20px; text-align: center; font: 24px/24px 'bradley', serif; letter-spacing: 2px; color: #000000; text-shadow: 0 0 2px #ffffff; white-space: nowrap; }
#scene-lot .lot-doors-container { position: absolute; inset: 0; pointer-events: none; }
#scene-lot .lot-door-btn { position: absolute; top: 328px; width: 86px; height: 120px; pointer-events: auto; }
#scene-lot .lot-door-gold { left: 216px; }
#scene-lot .lot-door-silver { left: 336px; }
#scene-lot .lot-door-bronze { left: 456px; }
#scene-lot #lot-preview-panel { position: absolute; left: 142px; top: 470px; width: 520px; height: 180px; overflow: hidden; pointer-events: none; }
#scene-lot #lot-preview-ribbon { display: flex; width: max-content; }
#scene-lot .lot-preview-item { position: relative; flex: 0 0 127px; height: 180px; overflow: hidden; }
#scene-lot .lot-preview-item img { width: 126px; height: 180px; object-fit: contain; }
#scene-lot #lot-prob-image { position: absolute; left: 192px; top: 136px; width: 376px; height: 168px; pointer-events: none; }
#scene-lot #lot-draw-stage { position: absolute; inset: 0; pointer-events: none; }
#scene-lot .lot-wheel-card { position: absolute; left: 0; top: 0; width: 126px; height: 180px; }
#scene-lot .lot-card-back { position: absolute; inset: 0; width: 126px; height: 180px; }
#scene-lot .lot-card-face { position: absolute; inset: 0; }
#scene-lot .lot-card-face img { width: 100%; height: 100%; object-fit: contain; }
#scene-lot .lot-card-name { position: absolute; left: 0; bottom: 4px; width: 100%; text-align: center; color: white; font-size: 11px; text-shadow: 0 0 2px black; }
#scene-lot .lot-part-art { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#scene-lot .lot-part-art img { max-width: none; max-height: none; }
#scene-lot .lot-article { position: absolute; left: 0; top: 0; width: 168px; height: 240px; transform: scale(.75); transform-origin: 0 0; }
#scene-lot .lot-article .lot-article-frame, #scene-lot .lot-article .lot-chara-art { position: absolute; left: 0; top: 0; width: 168px; height: 240px; }
#scene-lot .lot-article .lot-article-art { position: absolute; max-width: none; max-height: none; }
#scene-lot .lot-article .lot-card-name { left: 0; top: 5px; bottom: auto; width: 164px; font-size: 12px; color: black; text-shadow: 0 0 2px white; }
#scene-lot .lot-article .lot-card-caption { position: absolute; left: 15px; top: 180px; width: 144px; height: 60px; overflow: hidden; font-size: 10px; color: black; text-shadow: 0 0 2px white; }
#scene-lot .lot-card-count { position: absolute; left: -35px; top: 180px; width: 190px; text-align: right; font-size: 54px; color: white; text-shadow: 0 0 6px red; }
/* LotItemPreview.ScrollThread.createMask: 240px reflected ramp, final 40px clear. */
#scene-lot #lot-preview-panel { mask-image: url('/img/lot/preview-mask.svg'); mask-size: 520px 180px; }
#scene-lot .lot-genre { position: absolute; inset: 0; width: 127.5px; height: 180px; pointer-events: none; }
/* DefineSprite 10: 34 original morph frames at the SWF's 24fps. */
#scene-lot .lot-door-glow { position: absolute; left: -2px; top: -2px; width: 90px; height: 124px; background-image: url('/img/lot/door-glow.svg'); animation: lot-door-glow 1.416666667s steps(34) infinite; pointer-events: none; }
#scene-lot button:is(:hover,:focus-visible) .lot-door-glow { display: none; }
@keyframes lot-door-glow { from { background-position-x: 0; } to { background-position-x: -3060px; } }

/* Darkroom additions: original probability-frame border and gacha wall texture. */
#scene-lot .lot-controls { display:contents; }
#scene-lot .lot-controls button, #scene-lot .lot-collection-dialog button {
  position:relative; width:112px; height:36px; color:#d8cebc;
  font:12px lobby-mincho,serif; letter-spacing:1px; text-shadow:0 1px 2px #000;
  background:url('/img/lot/collection-control.png') no-repeat, url('/img/lot/collection-texture.png') center;
}
#scene-lot .lot-controls button { position:absolute; }
#scene-lot #lot-single-btn { left:608px; top:160px; }
#scene-lot #lot-ten-btn { left:608px; top:202px; }
#scene-lot #lot-list-btn { left:608px; top:320px; }
/* Last-results is frontend-only for now; hidden until it has a backend record. */
#scene-lot #lot-results-btn { left:608px; top:362px; display:none; }
#scene-lot [data-flash-button] > img { visibility:hidden; }
#scene-lot [data-flash-button] span { position:relative; z-index:1; }
#scene-lot [data-flash-button]:is(:hover,:focus-visible,[aria-pressed="true"]):not(:disabled) { color:#ffdf9d; }
#scene-lot [data-flash-button][aria-pressed="true"] { font-weight:bold; }
#scene-lot .lot-draw-cost { position:absolute; left:600px; top:248px; width:128px; margin:0; text-align:center; font:11px/18px lobby-mincho,serif; color:#cbbba0; letter-spacing:1px; text-shadow:0 1px 2px #000; }
#scene-lot .lot-controls button:disabled { opacity:.38; }
/* Original Information frame: identical size, header, footer and controls in both modes. */
#scene-lot .lot-collection-dialog {
  position:fixed; inset:auto; left:var(--lot-dialog-x,50vw); top:var(--lot-dialog-y,50vh);
  margin:0; padding:0; border:0; width:528px; height:416px; max-width:none; max-height:none;
  box-sizing:border-box; overflow:hidden; transform:translate(-50%,-50%) scale(var(--lot-dialog-scale,1));
  /* Frame-only composition of info_login.swf (notice-pool.svg, full
     760x680 stage layers); the plate sits at stage (116,144), so the
     528x416 dialog crops it at -116,-144 like the results mode. */
  background:transparent url('/img/flash/lobby_controls/notice-pool.svg') no-repeat -116px -144px / 760px 680px;
  color:#000; font:12px lobby-mincho,serif;
}
#scene-lot .lot-collection-dialog::backdrop { background:rgba(12,8,7,.72); }
/* Original LoginInfoPanel title: stage (310,166), 145 wide -> (194,22)
   relative to the plate; .LoginInfoTitle white 16px with black glow. */
#scene-lot .lot-collection-dialog h3 { position:absolute; left:194px; top:22px; width:145px; height:30px; margin:0; text-align:center; color:#fff; font:16px/24px lobby-mincho,serif; text-shadow:-1px -1px 1px #000,1px 1px 1px #000; }
#scene-lot #lot-collection-note { position:absolute; left:24px; top:56px; width:480px; margin:0; max-height:56px; overflow:hidden; white-space:pre-line; text-align:center; font:12px/18px Arial,"PMingLiU",sans-serif; }
#scene-lot #lot-pool-tabs { position:absolute; left:120px; top:82px; display:flex; }
#scene-lot #lot-pool-tabs button { width:96px; height:24px; background:none; color:#29211e; font:14px/24px lobby-mincho,serif; text-shadow:none; }
#scene-lot #lot-pool-tabs button:is(:hover,:focus-visible,[aria-pressed="true"]) { color:#6b1717; text-decoration:underline; }
#scene-lot #lot-pool-tabs button[aria-pressed="true"] { font-weight:bold; }
#scene-lot .lot-collection-grid { position:absolute; left:24px; top:104px; width:480px; display:grid; grid-template-columns:repeat(5,96px); grid-auto-rows:140px; }
#scene-lot .lot-collection-cell { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden; padding:0 3px; }
#scene-lot .lot-collection-art { position:relative; margin:0 auto; width:67.2px; height:96px; flex:none; }
#scene-lot .lot-collection-art .lot-article { transform:scale(.4); }
#scene-lot .lot-collection-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding-top:2px; font-size:11px; line-height:14px; }
#scene-lot .lot-collection-detail { display:block; margin-top:1px; font:11px/16px lobby-mincho,serif; color:#491313; }
#scene-lot .lot-collection-footer { position:absolute; inset:0; width:528px; display:block; pointer-events:none; }
#scene-lot .lot-collection-dialog .lot-collection-footer button { position:absolute; pointer-events:auto; }
#scene-lot .lot-collection-footer button span { display:none; }
#scene-lot .lot-collection-dialog button:disabled { visibility:hidden; }
#scene-lot #lot-collection-close { left:192px; top:385px; width:144px; height:24px; background:transparent url('/img/flash/info_login/3.jpg') no-repeat; }
#scene-lot #lot-collection-close:is(:hover,:focus-visible) { background-image:url('/img/flash/info_login/5.jpg'); }
#scene-lot #lot-page-prev { left:148px; top:389px; width:24px; height:16px; background:transparent url('/img/flash/shopitem_panel_ch/10.png') no-repeat; }
#scene-lot #lot-page-prev:is(:hover,:focus-visible) { background-image:url('/img/flash/shopitem_panel_ch/12.png'); }
#scene-lot #lot-page-next { left:356px; top:389px; width:24px; height:16px; background:transparent url('/img/flash/shopitem_panel_ch/20.png') no-repeat; }
#scene-lot #lot-page-next:is(:hover,:focus-visible) { background-image:url('/img/flash/shopitem_panel_ch/22.png'); }
#scene-lot #lot-page-number { position:absolute; left:414px; top:388px; width:60px; text-align:center; color:#fff; font:14px/20px 'bradley',serif; }
#scene-lot #lot-notice-dismiss { display:block; position:absolute; left:502px; top:2px; width:21px; height:21px; background:transparent url('/img/flash/friendlist_ch/23.png') center / 21px 21px no-repeat; z-index:2; }
#scene-lot #lot-notice-dismiss:is(:hover,:focus-visible) { background-image:url('/img/flash/friendlist_ch/25.png'); }
#scene-lot #lot-collection-status { display:none; }
/* The original reward composition adds Braw and a full-size TreasureCardClip. */
#scene-lot .lot-collection-dialog[data-mode="results"] { background:transparent url('/img/flash/lobby_controls/notice-news.svg') no-repeat -116px -144px / 760px 680px; }
#scene-lot .lot-collection-dialog[data-mode="results"] #lot-collection-note { left:94px; width:400px; text-align:left; font-size:14px; line-height:22px; letter-spacing:1px; }
#scene-lot .lot-collection-dialog[data-mode="results"] .lot-collection-grid { left:179px; top:119px; width:168px; height:240px; display:block; }
#scene-lot .lot-collection-dialog[data-mode="results"] .lot-collection-cell:only-child { width:168px; margin:0; padding:0; overflow:visible; }
#scene-lot .lot-collection-dialog[data-mode="results"] .lot-collection-art { width:168px; height:240px; }
#scene-lot .lot-collection-dialog[data-mode="results"] .lot-article { transform:scale(1); }
#scene-lot .lot-collection-dialog[data-mode="results"] .lot-collection-name,
#scene-lot .lot-collection-dialog[data-mode="results"] .lot-collection-detail { display:none; }
#scene-lot .lot-collection-dialog[data-mode="results"] #lot-collection-status:not(:empty) { display:block; position:absolute; left:20px; top:332px; width:145px; margin:0; color:#000; font:11px/16px lobby-mincho,serif; }
/* ==========================================================================
   Deck Editor (卡冊 / 牌組編輯) Scene Styles
   Strict Flash alignment (760x680) based on edit_deck_base_cost_ch.swf & deckcase.swf
   ========================================================================== */

.scene-deck {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 20;
  background: none;
  box-sizing: border-box;
}

.deck-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 760px;
  height: 680px;
  overflow: hidden;
}

.deck-bg-base {
  position: absolute;
  left: 0;
  top: 0;
  width: 760px;
  height: 680px;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* 5 Binder Tabs at Y = 32px (btn48@0, btn63@96, btn53@192, btn58@288, btn68@384) */
.deck-binder-tabs {
  position: absolute;
  left: 0;
  top: 32px;
  height: 22px;
  z-index: 5;
}

.deck-tab {
  position: absolute;
  top: 0;
  width: 96px;
  height: 22px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
}

.deck-tab img {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 22px;
  display: block;
}

.deck-tab .tab-img-active {
  display: none;
}

.deck-tab.is-active .tab-img-normal {
  display: none;
}

.deck-tab.is-active .tab-img-active {
  display: block;
}

/* Tab absolute positions matching Flash btn placements */
.deck-tab[data-tab="0"] { left: 0px; }   /* btn48: Chara */
.deck-tab[data-tab="1"] { left: 96px; }  /* btn63: Monster */
.deck-tab[data-tab="2"] { left: 192px; } /* btn53: Equip */
.deck-tab[data-tab="3"] { left: 288px; } /* btn58: Event */
.deck-tab[data-tab="4"] { left: 384px; } /* btn68: Other */

/* Binder Book: 18 slots across 2 pages */
.deck-binder-book {
  position: absolute;
  left: 0;
  top: 55px;
  width: 560px;
  height: 366px;
  z-index: 5;
}

.binder-page {
  position: absolute;
  top: 0;
  width: 260px;
  height: 366px;
  display: grid;
  grid-template-columns: repeat(3, 84px);
  grid-template-rows: repeat(3, 120px);
  column-gap: 4px;
  row-gap: 2px;
}

.binder-page-left {
  left: 24px;
}

.binder-page-right {
  left: 288px;
}

.binder-slot {
  position: relative;
  width: 84px;
  height: 120px;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  background: rgba(10, 8, 12, 0.4);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.binder-slot.has-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 8px rgba(255, 230, 150, 0.7);
}

.binder-slot-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.binder-slot-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.binder-slot-lv {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  line-height: 1;
  z-index: 2;
}

.binder-slot-name {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: #f0e6d2;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  line-height: 1.1;
  z-index: 2;
  background: rgba(0, 0, 0, 0.45);
}

.binder-slot-in-deck {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9px;
  background: rgba(180, 40, 40, 0.85);
  color: #fff;
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
  z-index: 2;
}

/* Original arrows at (224,424)/(332,424), native page text at (258,424). */
.deck-binder-pagination {
  position: absolute;
  left: 224px;
  top: 424px;
  width: 228px;
  height: 16px;
  z-index: 6;
}

.binder-arrow-btn {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  outline: 0;
  cursor: pointer;
}

#binder-prev {
  left: 0;
}

#binder-next {
  left: 108px;
}

.binder-arrow-btn img {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
}

/* btn33's up-state matrix is a horizontal mirror of bmp30 */
.binder-arrow-flip img {
  transform: scaleX(-1);
}

.binder-arrow-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.binder-page-label-group {
  position: absolute;
  left: 34px;
  top: 0;
  width: 60px;
  height: 16px;
}

.binder-page-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 16px;
  pointer-events: none;
}

.binder-page-label {
  position: absolute;
  left: 0;
  top: 2px;
  width: 60px;
  font-size: 9px;
  line-height: 12px;
  font-family: monospace;
  font-weight: bold;
  color: #e5dbc5;
  text-shadow: 0 1px 2px #000;
  text-align: center;
  user-select: none;
}

/* Deck Case Area */
.deck-case-container {
  position: absolute;
  left: 115px;
  top: 443px;
  width: 315px;
  height: 152px;
  z-index: 5;
}



.deck-slot {
  position: relative;
  width: 84px;
  height: 120px;
  border: 1px dashed rgba(160, 140, 100, 0.35);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 12, 0.45);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.deck-slot.has-card {
  border-style: solid;
  border-color: rgba(220, 190, 130, 0.6);
}

.deck-slot.has-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 8px rgba(255, 180, 80, 0.7);
}

.deck-slot-empty-label {
  font-size: 10px;
  color: #7b7160;
  user-select: none;
}

/* Cost Indicator at Pos (412, 600) */
.deck-cost-indicator {
  position: absolute;
  left: 412px;
  top: 600px;
  z-index: 6;
  font-size: 12px;
  color: #e5dbc5;
  text-shadow: 0 1px 2px #000;
  display: flex;
  gap: 6px;
}

.deck-cost-indicator .cost-title {
  color: #cca660;
  font-weight: bold;
}

.deck-cost-indicator .cost-num {
  font-family: monospace;
  font-weight: bold;
}

/* Deck Bottom Bar (Y = 628..660) */
.deck-bottom-bar {
  position: absolute;
  left: 8px;
  top: 630px;
  width: 740px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 6;
}

/* Flash elements: btn19 arrows @ (8,632), bmp25 separator @ (24,632), btn24 @ (40,632) */
.deck-arrow-btn {
  position: absolute;
  left: 0;
  top: 2px;
  background: none;
  border: none;
  outline: 0;
  padding: 0;
  width: 16px;
  height: 24px;
  cursor: pointer;
}

#deck-next {
  left: 32px;
}

.deck-arrow-btn img {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 24px;
}

.deck-arrow-btn .arrow-img-hover {
  display: none;
}

.deck-arrow-btn:hover .arrow-img-normal {
  display: none;
}

.deck-arrow-btn:hover .arrow-img-hover {
  display: block;
}

.deck-arrow-sep {
  position: absolute;
  left: 16px;
  top: 2px;
  width: 16px;
  height: 24px;
  pointer-events: none;
}

.deck-num-indicator {
  position: absolute;
  left: 56px;
  top: 8px;
  width: 56px;
  font-size: 11px;
  color: #e5dbc5;
  font-weight: bold;
  text-align: center;
  user-select: none;
}

#deck-rename {
  position: absolute;
  left: 276px;
  top: 4px;
  width: 110px;
  height: 22px;
  background: #18141d;
  border: 1px solid #5a4f3e;
  border-radius: 2px;
  color: #f0e6d2;
  font-size: 12px;
  padding: 0 6px;
  outline: none;
  box-sizing: border-box;
}

#deck-rename:focus {
  border-color: #cca660;
  box-shadow: 0 0 4px rgba(204, 166, 96, 0.5);
}

.deck-rename-btn {
  position: absolute;
  left: 392px;
  top: 5px;
  height: 22px;
  background: #3a3227;
  border: 1px solid #6b5c47;
  color: #e5dbc5;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 2px;
  cursor: pointer;
}

.deck-rename-btn:hover {
  background: #544737;
}

/* Deck Delete Button: btn14 @ (216,632), 64x24, up=bmp9 (dark) / over=bmp11 (bright) */
.deck-delete-btn {
  position: absolute;
  left: 208px;
  top: 2px;
  width: 64px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  outline: 0;
  cursor: pointer;
}

.deck-delete-btn img {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 24px;
}

.deck-delete-btn .btn-img-hover {
  display: none;
}

.deck-delete-btn:hover .btn-img-normal {
  display: none;
}

.deck-delete-btn:hover .btn-img-hover {
  display: block;
}

.deck-delete-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Lv & EXP dynamic text (flash x=338,425 → bar-relative 330) */
.deck-lv-exp-group {
  position: absolute;
  left: 120px;
  top: 5px;
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: #e5dbc5;
  font-family: monospace;
}

.deck-set-current-btn {
  position: absolute;
  left: 576px;
  top: -46px;
  width: 64px;
  height: 56px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.deck-set-current-btn img {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 56px;
}

.deck-set-current-btn .btn-img-hover {
  display: none;
}

.deck-set-current-btn:hover .btn-img-normal {
  display: none;
}

.deck-set-current-btn:hover .btn-img-hover {
  display: block;
}

.deck-set-current-btn .active-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: #2a7e32;
  color: #fff;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
}

/* Detail Panel on Right: sprite43 @ stage (580,342) (X = 580, Y = 342..680) */
.deck-detail-panel {
  position: absolute;
  left: 580px;
  top: 342px;
  width: 168px;
  height: 338px;
  z-index: 5;
}

.detail-art-wrap {
  position: relative;
  width: 168px;
  height: 228px;
  overflow: hidden;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 12, 0.6);
}

.detail-art-frame {
  position: absolute;
  inset: 0;
  width: 168px;
  height: 228px;
  pointer-events: none;
  z-index: 2;
}

.detail-art-img {
  width: 144px;
  height: 206px;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.detail-art-empty {
  font-size: 11px;
  color: #7b7160;
  letter-spacing: 0.1em;
  user-select: none;
}

.detail-data-area {
  position: absolute;
  left: 0;
  top: 0;
  width: 168px;
}

.detail-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid #4a3e2f;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.detail-name-text {
  font-size: 13px;
  font-weight: bold;
  color: #f5edd8;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-rank-text {
  font-size: 11px;
  color: #cca660;
  font-weight: bold;
}

.detail-stats-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 8px;
}

.detail-stat-cell {
  background: rgba(30, 24, 34, 0.7);
  padding: 3px 6px;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.detail-stat-cell .lbl {
  color: #cca660;
  font-weight: bold;
}

.detail-stat-cell .val {
  color: #fff;
  font-family: monospace;
}

.detail-caption-text {
  font-size: 11px;
  color: #b5aa94;
  line-height: 1.4;
  min-height: 40px;
  margin: 0 0 8px 0;
}

.detail-action-buttons {
  display: flex;
  gap: 6px;
}

.deck-slot-act-btn {
  flex: 1;
  height: 26px;
  background: #3e3224;
  border: 1px solid #7c684a;
  color: #f0e6d2;
  font-size: 11px;
  font-weight: bold;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.deck-slot-act-btn:hover {
  background: #5a4935;
  border-color: #ffd700;
  color: #fff;
}

/* Card Combine button: btn38 @ stage (591,281) → panel-relative (11,-61), 146x54, up=bmp34 / over=bmp36 */
.deck-compo-open-btn {
  position: absolute;
  left: 11px;
  top: -61px;
  width: 146px;
  height: 54px;
  padding: 0;
  background: none;
  border: none;
  outline: 0;
  cursor: pointer;
  z-index: 3;
}

.deck-compo-open-btn img {
  position: absolute;
  left: 0;
  top: 0;
  width: 146px;
  height: 54px;
}

.deck-compo-open-btn .btn-img-hover {
  display: none;
}

.deck-compo-open-btn:hover .btn-img-normal {
  display: none;
}

.deck-compo-open-btn:hover .btn-img-hover {
  display: block;
}


/* Source-backed geometry: BinderArea (24,55; 88/122 pitch), DataArea (580,38). */
#scene-deck [hidden] { display: none !important; }
#scene-deck button { background-color: transparent; border: 0; outline: 0; margin: 0; padding: 0; box-shadow: none; transition: none; color: white; }
#scene-deck button:not(.binder-slot):focus-visible { outline: 1px solid white; }
#deck-dot-timeline { position: absolute; inset: 0; width: 760px; height: 680px; z-index: 4; pointer-events: none; }
#scene-deck .binder-slot, #scene-deck .deck-slot { border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; transition: none; }
#scene-deck .binder-slot.has-card:hover, #scene-deck .deck-slot.has-card:hover { transform: none; box-shadow: none; }
#scene-deck .binder-slot > .deck-card-art, #scene-deck .deck-attached-card > .deck-card-art { position: absolute; left: 0; top: 0; transform: scale(.5); }
/* BinderArea: label (32,90), 56×20, CharaCardValueNum; CardStock x=-8, scaleX=1.08. */
#scene-deck .binder-slot-stock { position: absolute; left: 37.36px; top: 90px; width: 45.36px; height: 16px; pointer-events: none; }
#scene-deck .binder-slot-count { position: absolute; left: 32px; top: 90px; width: 56px; height: 20px; text-align: center; color: #000; font: 14px/20px 'bradley', serif; letter-spacing: 2px; font-kerning: normal; text-shadow: -1px 0 1px white, 1px 0 1px white, 0 -1px 1px white, 0 1px 1px white; pointer-events: none; }
#scene-deck .deck-case-container { overflow: visible; }
#scene-deck .deck-attached-card { position: absolute; left: 0; top: 0; width: 84px; height: 120px; }
#scene-deck .deck-attached-card.is-event { width: 26px; height: 41px; }
#scene-deck .deck-attached-card.is-event > img { width: 26px; height: 41px; }
#scene-deck .deck-slot[data-case="2"] { overflow: visible; }
#scene-deck .deck-detail-panel { left: 580px; top: 38px; width: 168px; height: 546px; }
#scene-deck .detail-art-wrap { position: absolute; left: 0; top: 0; width: 168px; height: 240px; border: 0; border-radius: 0; background: none; }
#scene-deck .detail-param-art { position: absolute; left: 0; top: 304px; width: 168px; height: 228px; }
/* DataArea.as _STATE_*_SET (CHARA_COST_DRAW_ON), relative to (580,342). Each value is a
   Flex Text box (2px gutter) styled UL.css EditCharaCardParam: white 10px, centre,
   letterSpacing 1; EditCharaCardParamSmall (9px) for the first four fields over 15 chars. */
#scene-deck .detail-data-area { position: absolute; left: 0; top: 304px; width: 168px; height: 228px; font: normal 10px/12px Palatino, 'Palatino Linotype', 'Noto Serif CJK TC', serif; letter-spacing: 1px; color: white; }
#scene-deck .detail-data-area > span, #scene-deck .detail-data-area > h3 { position: absolute; box-sizing: border-box; margin: 0; width: 40px; height: 16px; padding: 2px 2px 0; font: inherit; text-align: center; white-space: nowrap; overflow: hidden; }
#scene-deck .detail-data-area > .is-small { font-size: 9px; }
#scene-deck #deck-card-name { left: 42px; top: 0; width: 125px; }
#scene-deck #deck-card-english { left: 42px; top: 18px; width: 125px; }
#scene-deck #deck-card-alias { left: 42px; top: 36px; width: 125px; }
#scene-deck #deck-card-cv { left: 42px; top: 54px; width: 125px; }
#scene-deck #deck-card-id { left: 50px; top: 130px; width: 112px; }
#scene-deck #deck-card-rank { left: 42px; top: 76px; }
#scene-deck #deck-stat-hp { left: 127px; top: 76px; }
#scene-deck #deck-stat-atk { left: 42px; top: 94px; }
#scene-deck #deck-stat-def { left: 127px; top: 94px; }
#scene-deck #deck-stat-rarity { left: 42px; top: 112px; }
#scene-deck #deck-stat-cost { left: 127px; top: 112px; }
#scene-deck #deck-card-caption { position: absolute; left: 17px; top: 166px; width: 136px; height: 62px; box-sizing: border-box; margin: 0; padding: 2px 2px 0; overflow: auto; font-size: 10px; line-height: 12px; text-align: center; }
#scene-deck .detail-action-buttons { position: absolute; left: 0; top: 532px; width: 168px; height: 14px; }
#scene-deck .detail-action-buttons button { font-size: 12px; width: 168px; height: 14px; }
#scene-deck .deck-compo-open-btn { position: absolute; left: 591px; top: 281px; width: 146px; height: 54px; z-index: 10; }
#scene-deck .deck-compo-open-btn img { width: 146px; height: 54px; }
#scene-deck .deck-compo-open-btn .btn-img-hover { display: none; }
#scene-deck .deck-compo-open-btn:hover .btn-img-normal { display: none; }
#scene-deck .deck-compo-open-btn:hover .btn-img-hover { display: block; }
#scene-deck .deck-message { position: absolute; left: 12px; top: 612px; width: 550px; height: 18px; margin: 0; font-size: 11px; line-height: 18px; color: white; z-index: 12; overflow: hidden; }
#scene-deck .deck-message.error { color: #ffb2b2; }
/* DeckArea.as text fields are independent of the navigation arrows. */
#scene-deck .deck-bottom-bar { left: 0; top: 630px; width: 760px; height: 26px; display: block; }
#scene-deck #deck-prev { left: 8px; top: 2px; }
#scene-deck #deck-next { left: 40px; top: 2px; }
#scene-deck .deck-arrow-sep { left: 24px; top: 2px; }
#scene-deck .deck-num-indicator { left: 60px; top: 6px; width: 20px; text-align: left; }
#scene-deck #deck-rename { left: 80px; top: 6px; width: 110px; height: 18px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 12px; }
#scene-deck #deck-rename-btn { left: 190px; top: 6px; width: 24px; height: 18px; font-size: 11px; }
#scene-deck .deck-delete-btn { left: 216px; top: 2px; }
#scene-deck .deck-lv-exp-group { position: static; display: block; }
#scene-deck #deck-level { position: absolute; left: 338px; top: 5px; width: 80px; height: 18px; font-size: 12px; }
#scene-deck #deck-exp { position: absolute; left: 425px; top: 5px; width: 140px; height: 18px; font-size: 12px; }
#scene-deck .deck-set-current-btn { left: 280px; top: 2px; width: 54px; height: 24px; font-size: 11px; }
#scene-deck .deck-set-current-btn:disabled { cursor: default; }
#scene-deck .deck-set-current-btn #deck-active-badge { position: static; transform: none; background: none; padding: 0; border: 0; font-size: 11px; }
#scene-deck .deck-cost-indicator { left: 412px; top: 600px; width: 150px; text-align: right; }
#scene-deck .cost-title { display: none; }
#scene-deck .deck-message { left: 250px; top: 8px; width: 450px; }
/* CharaCardClip's original label registration points, before the .5 binder scale. */
#scene-deck .deck-face-value { position: absolute; width: 42px; height: 26px; color: white; font-size: 24px; line-height: 26px; text-align: center; text-shadow: 0 0 2px black; }
#scene-deck .deck-face-hp { left: 18px; top: 214px; }
#scene-deck .deck-face-ap { left: 66px; top: 214px; }
#scene-deck .deck-face-dp { left: 127px; top: 214px; }
#scene-deck .deck-face-level { left: 15px; top: 13px; width: 24px; }
#scene-deck .deck-face-name { left: 32px; top: 10px; width: 110px; height: 20px; line-height: 20px; font-size: 12px; overflow: hidden; white-space: nowrap; }

/* DataArea.as uses a separate parameter frame for equipment and event cards. */
/* TYPE_WEAPON/EQUIP/EVENT rows: name, colour, cost, timing, durability, restriction,
   level limit at x=636 (125 wide), y=342/360/378/450/396/414/432; caption (597,490). */
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-card-name { left: 56px; width: 125px; }
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-card-english,
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-card-cv,
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-card-alias,
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-card-rank,
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-stat-hp,
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-stat-atk,
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-stat-def,
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-stat-cost,
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-stat-rarity { display: none; }

#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-card-id { display: none; }

#scene-deck .deck-slot-stat { display: none; }
#scene-deck .deck-detail-panel[data-card-kind="slot"] .deck-slot-stat { display: block; left: 56px; width: 125px; }
#scene-deck #deck-slot-color { top: 18px; }
#scene-deck #deck-slot-cost { top: 36px; }
#scene-deck #deck-slot-durability { top: 54px; }
#scene-deck #deck-slot-restriction { top: 72px; }
#scene-deck #deck-slot-limit { top: 90px; }
#scene-deck #deck-slot-timing { top: 108px; }
#scene-deck .deck-detail-panel[data-card-kind="slot"] #deck-card-caption { top: 148px; }

/* DeckArea.as / UL.css: total only, Bradley 34px, right aligned at (412,600). */
#scene-deck .deck-cost-indicator { display: block; height: 32px; color: white; }
#scene-deck .deck-cost-indicator .cost-num { display: block; width: 150px; font: 34px/32px 'bradley', serif; text-align: right; }
#scene-deck #deck-rename:focus { box-shadow: none; outline: 1px solid white; }
#scene-deck #deck-rename-btn:disabled, #scene-deck .deck-set-current-btn:disabled { opacity: .55; }

/* Disabled controls include empty slots; only an active request is busy. */
#scene-deck button:disabled { cursor: default; }
#scene-deck #deck-stage[aria-busy="true"] button:disabled { cursor: wait; }

/* Explicit name editor: requested usability adjustment to the original bottom bar. */
#scene-deck .deck-name-label { position: absolute; margin: 0; padding: 0; left: 84px; top: 2px; width: 52px; height: 22px; font-size: 11px; line-height: 22px; color: #fff; }
#scene-deck #deck-rename { left: 140px; top: 2px; width: 164px; height: 22px; padding: 0 7px; border: 1px solid #a4aaa7; background: rgba(0,0,0,.4); color: #fff; font-size: 12px; box-sizing: border-box; }
#scene-deck #deck-rename::placeholder { color: #c3c8c5; }
#scene-deck #deck-rename:focus { outline: 1px solid #fff; outline-offset: 1px; box-shadow: none; }
#scene-deck #deck-rename[aria-invalid="true"] { border-color: #ffb2b2; }
#scene-deck #deck-rename-btn { left: 312px; top: 2px; width: 76px; height: 22px; border: 1px solid #9ba39e; background: #d3d8d4; color: #171b19; font-size: 11px; }
#scene-deck #deck-rename-btn:hover:not(:disabled) { background: #eef1ee; }
#scene-deck #deck-rename-btn:disabled { opacity: .45; cursor: default; }
#scene-deck .deck-name-status { position: absolute; left: 398px; top: 2px; width: 100px; height: 22px; font-size: 11px; line-height: 22px; color: #d8dfdc; white-space: nowrap; overflow: hidden; }
#scene-deck .deck-name-status.is-dirty { color: #f4d48a; }
#scene-deck .deck-name-status.is-error { color: #ffb2b2; }
#scene-deck .deck-name-status.is-saved { color: #d1efc6; }
#scene-deck .deck-set-current-btn { left: 510px; width: 76px; }
#scene-deck .deck-delete-btn { left: 620px; }

/* Widen arrow hit areas while keeping the original artwork at x=8 / x=40. */
#scene-deck #deck-prev { left: 4px; width: 24px; }
#scene-deck #deck-next { left: 36px; width: 24px; }
#scene-deck .deck-arrow-btn img { left: 4px; }

/* Compact actions: original Deck category plate bitmaps44/46, with HTML labels.
   Retain the original 22px height, edge pixels and shadow. */
#scene-deck #deck-rename-btn,
#scene-deck #deck-set-current,
#scene-deck #deck-delete,
#scene-deck .detail-action-buttons button.deck-action-button {
  height: 22px; border: 0; border-radius: 0; margin: 0; padding: 0;
  background: none; box-shadow: none; text-shadow: none; transition: none;
  color: #eee6d5; font: normal 12px/19px Palatino, 'Palatino Linotype', 'Noto Serif CJK TC', serif;
  letter-spacing: 0; text-align: center; white-space: nowrap;
}
#scene-deck #deck-rename-btn,
#scene-deck #deck-set-current,
#scene-deck #deck-delete { top: 2px; width: 88px; }
#scene-deck .deck-name-status { left: 452px; width: 100px; }
/* Plate: compo_result_ch btn_ok (bitmaps 3/5) without its baked label, built by
   tools/build_deck_buttons.py. 160x34 source; the 28px end ornaments stay fixed
   (scaled to the 22px row) and only the plain body stretches. */
#scene-deck .deck-action-button > .deck-plate {
  position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; pointer-events: none;
  border-style: solid; border-width: 0 16px; border-image: url('/img/deck/plate-up.png') 0 28 fill / 0 16px stretch;
}
#scene-deck .deck-action-button > .deck-plate-over { border-image-source: url('/img/deck/plate-over.png'); }
/* The original OK label: light serif with spacing and a dark outline glow. */
#scene-deck .deck-action-label {
  position: relative; z-index: 1; pointer-events: none; color: #e9e1cf; letter-spacing: .5px;
  text-shadow: 0 0 1px #000, 0 0 2px #000, 0 1px 1px #000;
}
#scene-deck button.deck-action-button:focus-visible { outline: 0; }
#scene-deck button.deck-action-button:is(:hover, :focus-visible):not(:disabled) .deck-action-label { color: #fff; text-shadow: 0 0 1px #000, 0 0 3px #1c2233, 0 1px 1px #000; }
#scene-deck button.deck-action-button:disabled { opacity: .45; cursor: default; }
#scene-deck #deck-set-current[aria-pressed="true"] { opacity: 1; color: #eee6d5; }
#scene-deck #deck-set-current #deck-active-badge { font: inherit; color: inherit; }
/* Centred under the data area; the plate grows with longer labels (e.g. the weapon
   "配置至第 N 位角色") so the label always stays between the 16px end ornaments. */
#scene-deck .detail-action-buttons { top: 540px; left: 0; width: 168px; height: 22px; justify-content: center; }
#scene-deck .detail-action-buttons button.deck-action-button { position: relative; width: auto; min-width: 104px; flex: 0 0 auto; padding: 0 20px; }

/* Active deck is a quiet navigation marker; destructive action lives in management. */
#scene-deck #deck-active-badge { position: absolute; left: 76px; top: 6px; width: 10px; font-size: 9px; line-height: 14px; color: #eee6d5; }
#scene-deck .deck-name-label { left: 88px; width: 52px; }
/* Adjacent name/delete actions share the same original plate and typography. */
#scene-deck #deck-delete { left: 408px; }
#scene-deck .deck-name-status { left: 504px; width: 100px; }
#scene-deck .deck-set-current-btn { left: 620px; }

/* BinderArea.loadInventory: a card group with no binder copy left is drawn at alpha .3
   (card, CardStock and count together); it is still selectable for viewing. */
#scene-deck .binder-slot.is-depleted { opacity: .3; }

/* Added controls (name editor, status, messages) follow DeckArea's own text styling:
   UL.css DeckNameLabelForDeckArea (#CCCCEE, 11px, Palatino) and
   CurrentDeckNameLabelForDeckArea (#EEEEFF), drawn directly on the bottom bar. */
#scene-deck .deck-num-indicator,
#scene-deck .deck-name-label,
#scene-deck #deck-active-badge,
#scene-deck .deck-name-status,
#scene-deck .deck-message { font-family: Palatino, 'Palatino Linotype', 'Noto Serif CJK TC', serif; font-weight: normal; }
#scene-deck .deck-num-indicator { color: #ccccee; font-size: 11px; }
#scene-deck .deck-name-label { color: #ccccee; font-size: 11px; letter-spacing: 1px; text-align: right; width: 48px; }
#scene-deck #deck-active-badge { color: #eeeeff; }
#scene-deck #deck-rename {
  left: 140px; top: 3px; width: 164px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border: 0; border-bottom: 1px solid #6f7690; border-radius: 0;
  background: rgba(0, 0, 0, .28); box-shadow: none;
  color: #ccccee; caret-color: #eeeeff;
  font: 11px/19px Palatino, 'Palatino Linotype', 'Noto Serif CJK TC', serif; letter-spacing: 0;
}
#scene-deck:has(#deck-active-badge:not([hidden])) #deck-rename { color: #eeeeff; }
#scene-deck #deck-rename::placeholder { color: #7d8299; }
#scene-deck #deck-rename:hover { border-bottom-color: #9a9fb8; }
#scene-deck #deck-rename:focus { outline: 0; box-shadow: none; border-bottom-color: #ccccee; background: rgba(0, 0, 0, .42); }
#scene-deck #deck-rename[aria-invalid="true"] { border-bottom-color: #c86464; }
#scene-deck .deck-name-status { top: 3px; height: 20px; line-height: 20px; font-size: 11px; color: #9a9fb8; }
#scene-deck .deck-name-status.is-dirty { color: #e6d6a6; }
#scene-deck .deck-name-status.is-error { color: #e89a9a; }
#scene-deck .deck-name-status.is-saved { color: #b9d2b0; }
#scene-deck .deck-message.error { color: #f0a0a0; }
#scene-deck .deck-num-indicator,
#scene-deck #deck-active-badge { top: 3px; height: 20px; line-height: 20px; }
/* The status line used to sit under the scene header (z-order hid it). It now uses the
   free strip right of the deck case, above Total Cost, in the same DeckArea text style. */
#scene-deck .deck-message {
  left: 448px; top: 458px; width: 114px; height: 124px; margin: 0; overflow: hidden;
  font-size: 11px; line-height: 15px; color: #ccccee; text-align: left; white-space: normal; word-break: break-all;
  text-shadow: 0 0 2px #1d2128; pointer-events: none; z-index: 12;
}
#scene-deck .deck-message.error { color: #f0a0a0; }
/* --- Card Combine / Weapon Synthesis Sub-Scene (compo_bg_ch.swf) --- */
.deck-compo-modal {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 8, 0.85);
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deck-compo-modal[hidden] { display: none !important; }

.compo-box {
  position: relative;
  width: 640px;
  height: 440px;
  background: #141218;
  border: 2px solid #8c734b;
  border-radius: 4px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.compo-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  pointer-events: none;
}

.compo-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(20, 16, 12, 0.92);
  border-bottom: 1px solid #6e5a3a;
}

.compo-title {
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: bold;
  color: #ffd875;
  letter-spacing: 1px;
}

.compo-close-btn {
  width: 26px;
  height: 26px;
  background: #8c1c1c !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 50% !important;
  font-weight: bold;
  cursor: pointer;
}

.compo-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  padding: 16px;
}

.compo-slots-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(10, 10, 14, 0.72);
  border: 1px solid #3e362a;
  border-radius: 4px;
  padding: 12px;
}

.compo-base-slot {
  width: 150px;
  height: 110px;
  border: 1px dashed #b89b5e;
  background: rgba(28, 24, 20, 0.85);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  text-align: center;
}

.compo-mat-slots {
  display: flex;
  gap: 8px;
}

.compo-mat-slot {
  width: 96px;
  height: 86px;
  border: 1px solid #5a4b36;
  background: rgba(22, 20, 18, 0.85);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-align: center;
}

.compo-slot-lbl {
  font-size: 0.72rem;
  color: #bfa980;
  margin-bottom: 4px;
}

.compo-slot-card {
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
}

.compo-plus-sign {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffd875;
}

.compo-preview-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(10, 10, 14, 0.72);
  border: 1px solid #3e362a;
  border-radius: 4px;
  padding: 14px;
}

.compo-recipe-title {
  font-size: 0.92rem;
  font-weight: bold;
  color: #ffd875;
  border-bottom: 1px solid #4a3e2c;
  padding-bottom: 6px;
}

.compo-recipe-desc {
  font-size: 0.82rem;
  color: #d4caa8;
  line-height: 1.5;
  flex: 1;
  margin-top: 10px;
}

.compo-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.compo-act-btn {
  flex: 1;
  padding: 6px 10px !important;
  background: #3a3022 !important;
  border: 1px solid #8c734b !important;
  color: #f0e6d2 !important;
  border-radius: 3px !important;
  font-size: 0.82rem;
  font-weight: bold;
  cursor: pointer;
}

.compo-exec-primary:not(:disabled) {
  background: #7c5820 !important;
  border-color: #ffd875 !important;
  color: #fff !important;
}

.compo-act-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.compo-msg {
  font-size: 0.8rem;
  color: #85d685;
  min-height: 18px;
  margin: 6px 0 0;
}
/* Native controls replace the previous non-functional mock synthesis panel. */
#scene-deck dialog.deck-compo-modal { position: fixed; inset: 0; display: none; width: 560px; height: auto; max-height: 85vh; margin: auto; padding: 16px; overflow: auto; color-scheme: light; color: CanvasText; background: Canvas; }
#scene-deck dialog.deck-compo-modal[open] { display: block; }
#scene-deck dialog.deck-compo-modal button { background: linear-gradient(#fdfdfd, #d6d6d6); color: #000; border: 1px solid #666; border-radius: 3px; cursor: pointer; font: bold 12px Palatino, Georgia, serif; letter-spacing: 1px; padding: 3px 12px; margin: 8px 8px 0 0; }
#scene-deck dialog.deck-compo-modal button:hover { background: linear-gradient(#8a4a4a, #660000); color: #fff; }
#scene-deck dialog.deck-compo-modal select { appearance: auto; color: CanvasText; background: Canvas; padding: 3px; }
#scene-deck dialog.deck-compo-modal label { display: block; margin: 8px 0; }
#scene-deck dialog.deck-compo-modal h3 { margin: 0; }
#scene-deck dialog.deck-compo-modal #compo-recipe-desc { white-space: pre-line; }
#scene-deck dialog.deck-compo-modal[open] { inset: auto; left: 50%; top: 50%; transform: translate(-50%,-50%); height: auto; margin: 0; }

/* RequirementsView.as: all coordinates are on the original 760×680 stage. */
#scene-deck .deck-levelup { position: absolute; inset: 0; width: 760px; height: 680px; z-index: 40; overflow: hidden; color: white; outline: 0; }
#scene-deck .deck-levelup img { pointer-events: none; }
#scene-deck .levelup-base, #scene-deck .levelup-preview { position: absolute; left: 580px; width: 168px; height: 240px; }
#scene-deck .levelup-base { top: 38px; }
#scene-deck .levelup-preview { top: 304px; }
#scene-deck .levelup-base img, #scene-deck .levelup-preview img, #scene-deck #levelup-result-card img { width: 168px; height: 240px; }
#scene-deck .levelup-target { position: absolute; top: 160px; width: 84px; height: 120px; cursor: pointer; }
#scene-deck .levelup-target img, #scene-deck .levelup-material img { width: 84px; height: 120px; }
#scene-deck .levelup-target[aria-pressed="true"] { outline: 1px solid white; }
#scene-deck .levelup-material { position: absolute; top: 407px; width: 84px; height: 120px; }
#scene-deck .levelup-required { position: absolute; top: 349px; width: 100px; height: 100px; font: 48px 'bradley', serif; text-align: center; letter-spacing: 2px; text-shadow: 0 0 3px black; }
#scene-deck .levelup-required.is-missing { color: #ff0000; }
/* Keep owned counts below the 407..527 card face, clear of its HP/ATK/DEF. */
/* RequirementsView._labelLowNum: (412-100i, 304+208), 100x15, UL.css UnlockCharaCardNumLabel
   (Palatino 10, right, letterSpacing 2, white) + GlowFilter(0x000000,1,2,2,16). Flex Label gutter 2px. */
#scene-deck .levelup-owned { position: absolute; top: 512px; width: 100px; height: 15px; box-sizing: border-box; padding: 0 2px; color: #fff; font: normal 10px/15px Palatino, 'Palatino Linotype', 'Noto Serif CJK TC', serif; text-align: right; letter-spacing: 2px; white-space: nowrap; pointer-events: none; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 2px #000, 0 0 2px #000; }
#scene-deck .levelup-quantity { position: absolute; left: 568px; top: 560px; width: 64px; text-align: center; font: 48px 'bradley', serif; text-shadow: 0 0 3px black; }
#scene-deck #levelup-up { position: absolute; left: 640px; top: 556px; width: 16px; height: 16px; }
#scene-deck #levelup-down { position: absolute; left: 640px; top: 597px; width: 16px; height: 16px; }
#scene-deck #levelup-exec { position: absolute; left: 672px; top: 552px; width: 80px; height: 64px; }
#scene-deck .deck-levelup button { cursor: pointer; }
#scene-deck .deck-levelup button:disabled { cursor: default; opacity: .4; }
#scene-deck .deck-levelup[aria-busy="true"] button:disabled { cursor: wait; }
#scene-deck .levelup-hover-art { visibility: hidden; }
#scene-deck .deck-levelup button:is(:hover,:focus-visible):not(:disabled) > .levelup-hover-art { visibility: visible; }
#scene-deck #levelup-message { position: absolute; left: 12px; top: 630px; width: 720px; height: 24px; margin: 0; font-size: 12px; }
#scene-deck #levelup-result { position: absolute; inset: 32px 0 24px; z-index: 30; background: rgba(0,0,0,.2); }
#scene-deck #levelup-result-art { position: absolute; left: 0; top: -32px; }
#scene-deck #levelup-result-card { position: absolute; left: 204px; top: 315px; }
#scene-deck #levelup-ok { position: absolute; left: 216px; top: 563px; width: 144px; height: 24px; }
#scene-deck #levelup-result-message { position: absolute; left: 176px; top: 595px; width: 380px; font-size: 12px; }

#scene-deck .levelup-target { overflow: visible; }
#scene-deck .levelup-target .card-face { position: absolute; inset: 0; }
#scene-deck .levelup-chain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#scene-deck .levelup-target-art { position: absolute; inset: 0; width: 168px; height: 240px; transform: scale(.5); transform-origin: 0 0; }
#scene-deck .levelup-target .card-face { width: 168px; height: 240px; }
#scene-deck .levelup-target .levelup-card-selected { visibility: hidden; }
#scene-deck .levelup-target[aria-pressed="true"] { outline: 0; }
#scene-deck .levelup-target[aria-pressed="true"] .levelup-card-selected { visibility: visible; }
#scene-deck #levelup-result-card { width: 168px; height: 240px; }

/* CombinesView.as: all coordinates are on the 760x680 stage. The overlay lets
   pointer events through to the deck's weapon binder except where the compo
   panel, set list or result screens are drawn. */
#scene-deck .deck-weapon-levelup { position: absolute; inset: 0; width: 760px; height: 680px; z-index: 40; overflow: hidden; color: white; outline: 0; pointer-events: none; }
#scene-deck .deck-weapon-levelup img { pointer-events: none; }
#scene-deck .deck-weapon-levelup > :not(.weapon-levelup-panel-art) { pointer-events: auto; }
#scene-deck .deck-weapon-levelup button { position: absolute; background-color: transparent; border: 0; outline: 0; margin: 0; padding: 0; box-shadow: none; transition: none; cursor: pointer; }
#scene-deck .deck-weapon-levelup button:disabled { cursor: default; }
#scene-deck .deck-weapon-levelup[aria-busy="true"] button { cursor: wait; }
#scene-deck .deck-weapon-levelup button:is(:hover,:focus-visible):not(:disabled) > .levelup-hover-art { visibility: visible; }
#scene-deck .weapon-levelup-panel-art { position: absolute; inset: 0; }
/* compo_bg frame 2 clipDepth mask (shape 29 bounds). */
#scene-deck .weapon-levelup-panel-hit { position: absolute; left: 566px; top: 32px; width: 194px; height: 624px; }
#scene-deck .weapon-levelup-data, #scene-deck .weapon-levelup-result-clip { position: absolute; left: 580px; top: 38px; width: 168px; height: 240px; }
#scene-deck #weapon-levelup-result-new { top: 304px; }
#scene-deck #weapon-levelup-exec { left: 672px; top: 552px; width: 80px; height: 64px; }
#scene-deck .weapon-levelup-set { position: absolute; left: 0; top: 430px; width: 566px; height: 228px; }
#scene-deck .weapon-set-card { position: absolute; width: 84px; height: 120px; cursor: pointer; }
#scene-deck .weapon-set-card > .deck-card-art { position: absolute; left: 0; top: 0; transform: scale(.5); }
#scene-deck .weapon-art-button img { position: absolute; }
/* Flex Label: 2px text gutter inside the original x/y/width/height box. */
#scene-deck .weapon-label { position: absolute; box-sizing: border-box; padding: 2px 2px 0; overflow: visible; white-space: pre; line-height: 1.15; pointer-events: none; }
/* UL.css UnlockCharaCardLabel (bradley, centre, letterSpacing 2) at 48px + GlowFilter(0x000000,1,3,3,16). */
#scene-deck .weapon-use-count, #scene-deck .weapon-exchange-num { font: 48px/1.15 'bradley', serif; text-align: center; letter-spacing: 2px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000, 0 0 3px #000; }
#scene-deck .weapon-exchange-num { left: 568px; top: 560px; width: 100px; height: 100px; }
/* UL.css UnlockCharaCardNumLabel (Palatino 10, right, letterSpacing 2) + GlowFilter(0x000000,1,2,2,16). */
#scene-deck .weapon-owned-count { color: #fff; font: 10px/13px Palatino, 'Palatino Linotype', 'Noto Serif CJK TC', serif; text-align: right; letter-spacing: 2px; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 2px #000, 0 0 2px #000; }
/* LevelUpBase: full-stage mouse lock with compo_lvupbase at (176,312), clip (204,347), OK (216,595). */
#scene-deck .weapon-levelup-lvup { position: absolute; inset: 0; z-index: 2; }
#scene-deck .weapon-levelup-lvup-card { position: absolute; left: 204px; top: 347px; width: 168px; height: 240px; }
#scene-deck #weapon-levelup-lvup-ok { left: 216px; top: 595px; width: 144px; height: 24px; }
/* CombineResult: result image (0,32), labels in stage coordinates, OK (204,600). */
#scene-deck .weapon-levelup-result { position: absolute; inset: 0; z-index: 3; }
#scene-deck #weapon-levelup-result-skip { position: absolute; left: 0; top: 30px; width: 570px; height: 630px; }
#scene-deck #weapon-levelup-ok { left: 204px; top: 600px; width: 160px; height: 40px; z-index: 1; }
/* UL.css ResultLabel: bradley 24, #e0e0e0, right, letterSpacing 2. */
#scene-deck .weapon-result-value { color: #e0e0e0; font-family: 'bradley', serif; letter-spacing: 2px; }
/* UL.css ResultNameLabel: minchoB 12, letterSpacing 1; name black + white glow, others white + black glow. */
#scene-deck .weapon-result-name, #scene-deck .weapon-result-restriction, #scene-deck .weapon-result-passive, #scene-deck .weapon-result-exp-base { font-family: lobby-mincho, 'Noto Serif CJK TC', serif; letter-spacing: 1px; }
#scene-deck .weapon-result-name { color: #000; text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 2px #fff; }
#scene-deck .weapon-result-restriction, #scene-deck .weapon-result-passive { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 2px #000, 0 0 2px #000; }
#scene-deck .weapon-result-exp-base { color: #fff; }
/* UL.css CharaCardFeatInfoLabel: mincho 10 white, letterSpacing 1 (11px here per _PSV_CAPTION_SIZE). */
#scene-deck .weapon-result-caption { color: #fff; font-family: lobby-mincho, 'Noto Serif CJK TC', serif; letter-spacing: 1px; white-space: pre-wrap; }
/* ExpGauge TYPE_RESULT bar at (285,121), 258x7. */
#scene-deck .weapon-result-gauge { position: absolute; left: 285px; top: 121px; height: 7px; background: #ec9d03; pointer-events: none; }
#scene-deck .weapon-result-image { position: absolute; }
#scene-deck .weapon-result-lvup { position: absolute; left: -100px; top: 0; width: 760px; height: 680px; pointer-events: none; overflow: visible; }
/* Geometry: quest_base / questlist_ch / quest_search_ch / map_data SWFs,
   QuestDeck.as, CharaCardDeckClip.as and QuestLandClip.as. Artwork is exported. */
#scene-quest { position:absolute; inset:0; padding:0; background:transparent; overflow:hidden; user-select:none; }
#scene-quest .quest-stage { position:relative; width:760px; height:680px; }
#scene-quest button { position:absolute; background:transparent; border:0; border-radius:0; outline:0; margin:0; padding:0; box-shadow:none; transition:none; cursor:pointer; }
#scene-quest button:focus-visible { outline:1px solid white; }
#scene-quest button:disabled { cursor:default; }
#scene-quest img { max-width:none; }
#quest-world-map, #quest-route-overlay { position:absolute; inset:0; }
#quest-world-map > img, #quest-base-art, #quest-land-data-bg { position:absolute; pointer-events:none; }
#quest-base-art { z-index:2; }
#quest-world-map .quest-map-button { position:absolute; }
/* WorldMapImage.setFade: ColorTransform(0.3,0.3,0.3) and mouse disabled while a quest map is open.
   Opaque black at alpha .7 over the map gives the same 0.3x per channel without filtering the large SVG. */
#quest-world-map.is-faded { pointer-events:none; }
#quest-world-map.is-faded::after { content:''; position:absolute; inset:0; background:#000; opacity:.7; }
#quest-world-map .quest-map-button img { position:absolute; max-width:none; }
#quest-route-overlay { z-index:1; }
#quest-route-overlay[hidden] { display:none; }
#quest-route-nodes { position:absolute; inset:0; }
#scene-quest .quest-land-node { width:80px; height:64px; }
#scene-quest .quest-land-node img { position:absolute; pointer-events:none; }
#scene-quest .quest-land-node .quest-land-over { visibility:hidden; }
#scene-quest .quest-land-node:is(:hover,:focus-visible) .quest-land-over { visibility:visible; }
#scene-quest .quest-land-node:is(:hover,:focus-visible) .quest-land-up { visibility:hidden; }
#quest-btn-back-map { left:0; top:32px; }
#quest-btn-start, #quest-btn-giveup, #quest-btn-delete { left:16px; }
#quest-btn-start, #quest-btn-giveup { top:72px; }
#quest-btn-delete { top:112px; }
/* QuestDataClip: QuestLandDataLabel (#fff, 10px Palatino, left) name Label (468,335,90x20) and
   caption Text (473,412,80x70); the hovered land's stage/events are a QuestLandClip at (472,347). */
#land-data-name, #land-data-desc { position:absolute; padding:2px; box-sizing:border-box; color:#fff; font:10px/13px Palatino,'Palatino Linotype','Microsoft JhengHei',serif; text-align:left; overflow:hidden; }
#land-data-name { left:468px; top:335px; width:90px; height:20px; white-space:nowrap; }
#land-data-desc { left:473px; top:412px; width:80px; height:70px; overflow-wrap:anywhere; }
#quest-land-data-preview { position:absolute; left:472px; top:347px; width:0; height:0; pointer-events:none; }
#quest-land-data-preview img { position:absolute; }
#quest-list-panel { position:absolute; left:464px; top:36px; width:296px; height:195px; z-index:4; }
#quest-list-bg { position:absolute; pointer-events:none; }
#quest-list-counter { position:absolute; right:12px; top:176px; color:white; font:12px/16px bradley,serif; }
#quest-list-items { position:absolute; top:8px; left:0; width:296px; }
#scene-quest .quest-list-item { position:relative; display:block; width:296px; height:16px; color:white; text-align:left; font:11px/16px 'Microsoft JhengHei',sans-serif; }
#scene-quest .quest-list-item > img { position:absolute; pointer-events:none; }
/* QuestItem.as labels (Flex Label: 10px, 2px gutter, colour #AAAAAA): level x38 8px, name x72 w150,
   remaining time x100 w100 right (QuestItemTimer), rarity x235 w20 centred, AP x270 w20. */
#scene-quest .quest-list-item span { position:absolute; top:0; height:16px; padding:0 2px; box-sizing:border-box; white-space:nowrap; overflow:hidden; color:#aaa; font-size:10px; line-height:16px; }
#scene-quest .quest-item-level { left:38px; width:40px; font-size:8px; }
#scene-quest .quest-item-title { left:72px; width:150px; }
#scene-quest .quest-item-remain { left:100px; width:100px; text-align:right; }
#scene-quest .quest-item-status { left:235px; width:20px; text-align:center; letter-spacing:-1px; }
#scene-quest .quest-item-ap { left:270px; width:20px; }
#quest-list-prev { left:24px; top:176px; }
#quest-list-next { left:216px; top:176px; transform:scaleX(-1); }
#quest-list-page { position:absolute; top:176px; left:100px; width:70px; text-align:center; color:white; font:12px/16px bradley,serif; }
#quest-btn-shop-a { left:464px; top:231px; z-index:4; }
#quest-btn-shop-b { left:562px; top:231px; z-index:4; }
#quest-btn-shop-c { left:660px; top:231px; z-index:4; }
/* AvatarView QUEST (785-260,330-100) + cache (130,410) + bounds (-54,-343)..(54,9.95). */
#quest-avatar-stage { position:absolute; left:601px; top:297px; width:108px; height:352.95px; z-index:3; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
#quest-pv-stage { position:relative; height:352.95px; flex:none; }
#quest-deck-slots { left:25px; top:475px; z-index:3; }
#quest-deck-prev { left:8px; top:632px; z-index:3; }
#quest-deck-next { left:40px; top:632px; z-index:3; }
#quest-deck-name { position:absolute; left:65px; top:635px; width:290px; color:white; font:12px/20px 'Microsoft JhengHei',sans-serif; z-index:3; }
#quest-select-map-btn { left:0; top:416px; z-index:3; }
#scene-quest dialog { position:absolute; border:0; padding:0; margin:0; background:transparent; color:white; overflow:visible; }
#scene-quest dialog::backdrop { background:rgba(0,0,0,.5); }
#quest-search-modal { left:270px; top:280px; width:368px; height:152px; }
#scene-quest .quest-search-box { position:relative; width:368px; height:152px; }
#quest-search-bg { position:absolute; left:0; top:0; width:368px; height:152px; }
#quest-search-close { left:340px; top:0; }
#quest-search-ok { left:104px; top:112px; }
/* GetSendPanel.as: GetSendPanelLabel (12px minchoB, centred, black glow) for map name (230,30,w135)
   and time (25,43,w200); SearchThumbnail at (252,58); GetSendPanelMapApLabel (20px bradley, black,
   white glow) at (100,87,w28). */
#quest-search-map-name { position:absolute; left:230px; top:30px; width:135px; padding:2px; box-sizing:border-box; text-align:center; font:12px/16px lobby-mincho,serif; text-shadow:0 0 2px #000,0 0 2px #000; }
#quest-search-thum { position:absolute; left:252px; top:58px; width:88px; height:44px; }
#quest-search-time { position:absolute; left:25px; top:43px; width:200px; padding:2px; box-sizing:border-box; text-align:center; font:12px/16px lobby-mincho,serif; text-shadow:0 0 2px #000; }
#quest-search-slider-control { position:absolute; left:23px; top:80px; }
#quest-search-ap-cost { position:absolute; left:100px; top:87px; width:28px; padding:2px 0; text-align:center; color:#000; font:20px/24px bradley,serif; text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 2px #fff; pointer-events:none; }
#quest-map-modal { left:32px; top:64px; width:384px; height:384px; }
#scene-quest .quest-map-box { position:relative; width:384px; height:384px; }
#quest-map-box-bg { position:absolute; left:0; top:0; width:384px; height:384px; }
#quest-map-modal-close { left:332px; top:12px; }
#quest-map-grid { position:absolute; inset:0; pointer-events:none; }
#scene-quest .quest-region-button { position:absolute; pointer-events:auto; }
#scene-quest .quest-region-button img { position:absolute; }

#scene-quest .quest-row-selection { visibility:hidden; }
#scene-quest .quest-list-item:is(:hover,:focus-visible,[aria-pressed="true"]) .quest-row-selection { visibility:visible; }

/* QuestCaption: title (200,33,w250) QuestCaptionTitleLabel 16px right with a <font size=10> region/point
   block; caption (11,446,w400) and gift sender (11,420) QuestCaptionLabel 13px. */
#quest-caption { position:absolute; inset:0; z-index:2; pointer-events:none; }
#quest-caption p { position:absolute; margin:0; padding:2px; color:#fff; font-family:lobby-mincho,serif; }
#quest-caption-head { left:200px; top:33px; width:250px; text-align:right; font-size:16px; letter-spacing:2px; text-shadow:0 0 3px #000,0 0 3px #000; white-space:pre-line; }
#quest-caption-head span { display:block; }
#quest-caption-region,#quest-caption-point { font-size:10px; }
#quest-caption-text { left:11px; top:446px; width:400px; font-size:13px; }
#quest-caption-ba { left:11px; top:420px; width:400px; font-size:13px; }
#quest-item-btn { left:712px; top:576px; z-index:5; }
/* Result/treasure containers sit above the quest container and block its input. */
#quest-result-layer { position:absolute; inset:0; z-index:20; }
#quest-result-layer[hidden],#quest-result-panel[hidden],#quest-treasure-panel[hidden] { display:none; }
#quest-result-panel,#quest-treasure-panel,#scene-quest .quest-treasure-box { position:absolute; inset:0; }
#quest-result-panel > img,#scene-quest .quest-treasure-box > img { position:absolute; pointer-events:none; }
/* TreasureCardClip at (224,260); frame registration (84,120) inside a 168x240 card. */
#scene-quest .quest-treasure-card { position:absolute; left:144px; top:140px; width:168px; height:240px; transform-style:preserve-3d; }
#scene-quest .quest-treasure-card .quest-treasure-back { left:0 !important; top:0 !important; backface-visibility:hidden; }
#scene-quest .quest-treasure-front { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:rotateY(180deg); backface-visibility:hidden; color:#fff; font:24px bradley,serif; }
#scene-quest .quest-treasure-front img { max-width:168px; max-height:240px; }
#scene-quest .quest-treasure-card.is-flipped { transform:rotateY(180deg); }
/* =========================================================
 * ITEM INVENTORY SCENE (1:1 Flash 760x680 Pixel Layout)
 * Sources: item_inventory_ch.swf, item_panel_ch.swf, item_base.swf, gene.swf
 * ========================================================= */
.scene-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 10;
  background: #000;
  box-sizing: border-box;
}

.item-stage {
  position: relative;
  width: 760px;
  height: 680px;
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
}

/* Anti-pitfall 4: Scene button resets */
#scene-item button {
  background-color: transparent;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  transition: none;
  cursor: pointer;
}
#scene-item button:hover,
#scene-item button:active,
#scene-item button:focus,
#scene-item button:focus-visible {
  background-color: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}
#scene-item [hidden] {
  display: none !important;
}

/* Stage Backgrounds & Flash Panel Base (760x680) */
.item-bg-base {
  position: absolute;
  inset: 0;
  width: 760px;
  height: 680px;
  object-fit: fill;
  z-index: 0;
  pointer-events: none;
}

.item-panel-base {
  position: absolute;
  inset: 0;
  width: 760px;
  height: 680px;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
}

/* 4 Main Category Tabs at Y = 32px, X = 0, 96, 192, 288 (96x22) */
.item-tabs {
  position: absolute;
  left: 0;
  top: 32px;
  width: 384px;
  height: 22px;
  z-index: 5;
}
.item-tab {
  position: absolute;
  top: 0;
  width: 96px;
  height: 22px;
}
.item-tab img {
  display: block;
  width: 96px;
  height: 22px;
  pointer-events: none;
}
.item-tab .tab-img-norm { display: block; }
.item-tab .tab-img-hover,
.item-tab .tab-img-active { display: none; }

.item-tab:hover:not(.is-active) .tab-img-norm { display: none; }
.item-tab:hover:not(.is-active) .tab-img-hover { display: block; }

.item-tab.is-active .tab-img-norm,
.item-tab.is-active .tab-img-hover { display: none; }
.item-tab.is-active .tab-img-active { display: block; }

/* 5 Sub-Tabs at Y = 56px, X = 16 + 96 * i (96x32) */
.item-subtabs {
  position: absolute;
  left: 0;
  top: 56px;
  width: 500px;
  height: 32px;
  z-index: 5;
}
.item-subtab-btn {
  position: absolute;
  top: 0;
  width: 96px;
  height: 32px;
}
.item-subtab-btn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.item-subtab-btn .subtab-label {
  position: absolute;
  left: 22px;
  top: 7px;
  width: 68px;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 1px 2px #000000;
  pointer-events: none;
}

/* 15-Slot Tile Grid (ItemListPanel.as: X = 24, Y = 104, 5 cols x 3 rows, 95x95 pitch, 88x88 tiles) */
.item-grid {
  position: absolute;
  left: 24px;
  top: 104px;
  width: 468px;
  height: 278px;
  display: grid;
  grid-template-columns: repeat(5, 88px);
  grid-template-rows: repeat(3, 88px);
  gap: 7px 7px;
  z-index: 4;
}

.item-slot {
  position: relative;
  width: 88px;
  height: 88px;
  box-sizing: border-box;
  background: url('/img/flash/item_base/slot_normal.png') no-repeat center / 100% 100%;
  cursor: pointer;
  user-select: none;
}

.item-slot:hover:not(.empty) {
  background-image: url('/img/flash/item_base/slot_hover.png');
}

.item-slot.selected {
  background-image: url('/img/flash/item_base/slot_selected.png');
}

.item-slot.empty {
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}

.item-slot-icon {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  pointer-events: none;
}

.item-slot-equip {
  position: absolute;
  left: 43px;
  top: 3px;
  width: 41px;
  height: 9px;
  z-index: 3;
  pointer-events: none;
}

.item-slot-count {
  position: absolute;
  left: 7px;
  top: 72px;
  width: 78px;
  height: 14px;
  line-height: 14px;
  text-align: right;
  font-family: 'bradley', monospace;
  font-size: 13px;
  font-weight: normal;
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  z-index: 3;
  pointer-events: none;
}

/* Pagination Bar at Y = 394px (item_panel_ch.swf) */
.item-pagination {
  position: absolute;
  left: 16px;
  top: 394px;
  width: 496px;
  height: 16px;
  z-index: 5;
}

.item-page-btn {
  position: absolute;
  top: 0;
  width: 24px;
  height: 16px;
}
.item-page-btn:disabled { opacity: 0.35; cursor: default; }

.item-page-first { left: 0px; }
.item-page-prev  { left: 24px; }
.item-page-next  { left: 448px; }
.item-page-last  { left: 472px; }

.item-page-indicator {
  position: absolute;
  left: 60px;
  top: 0;
  width: 376px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-family: 'bradley', monospace;
  font-size: 13px;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

/* Lower Detail Area (Y = 416..632, ItemListPanel.as / BodyListPanel.as coordinates) */
.item-detail-area {
  position: absolute;
  left: 0;
  top: 416px;
  width: 488px;
  height: 216px;
  z-index: 4;
}

.item-detail-icon-wrap {
  position: absolute;
  left: 320px;
  top: 0;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-detail-icon {
  max-width: 104px;
  max-height: 104px;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}

.item-value-name {
  position: absolute;
  left: 106px;
  top: 8px;
  width: 200px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-value-duration {
  position: absolute;
  left: 15px;
  top: 46px;
  width: 110px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  font-weight: bold;
}

.item-value-location {
  position: absolute;
  left: 15px;
  top: 78px;
  width: 110px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  font-weight: bold;
}

.item-value-count {
  position: absolute;
  left: 15px;
  top: 110px;
  width: 110px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-family: 'bradley', monospace;
  font-size: 15px;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  font-weight: bold;
}

.item-detail-desc {
  position: absolute;
  left: 145px;
  top: 47px;
  width: 165px;
  height: 80px;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  font-weight: bold;
  overflow-y: auto;
}

.item-msg {
  position: absolute;
  left: 12px;
  top: 163px;
  width: 220px;
  font-size: 11px;
  font-weight: bold;
  min-height: 16px;
  line-height: 18px;
  text-shadow: 0 1px 2px #000;
  z-index: 6;
}
.item-msg.success { color: #b9f6ca; }
.item-msg.error { color: #ff8a80; }

/* Action Buttons at Y = 576px (relative top: 160px) */
.item-action-btn {
  position: absolute;
  top: 160px;
  width: 80px;
  height: 24px;
  z-index: 5;
}
.item-action-btn:disabled { opacity: 0.4; cursor: default; }

/* btn_use & btn_remove both sit at X = 344 in item_panel_ch.swf; btn_drop sits at X = 240 */
.item-btn-use   { left: 344px; }
.item-btn-equip { left: 344px; }
.item-btn-drop  { left: 240px; }

/* Bottom Parts Counter (ItemInventoryImage.as: 3.png at 352,632; _partsNum at 449,630) */
.item-bot-decor {
  position: absolute;
  left: 352px;
  top: 632px;
  width: 184px;
  height: 24px;
  z-index: 2;
  pointer-events: none;
}

.item-parts-num {
  position: absolute;
  left: 449px;
  top: 632px;
  width: 78px;
  height: 24px;
  line-height: 24px;
  text-align: right;
  font-family: 'bradley', monospace;
  font-size: 16px;
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  z-index: 6;
  pointer-events: none;
}
.item-parts-num.is-full {
  color: #ff3b30;
}

/* Right Side: Avatar Doll Stage & Fitting Reset */
.item-doll-stage-wrap {
  position: absolute;
  left: 488px;
  top: 120px;
  width: 260px;
  height: 500px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
}

.item-doll-stage {
  position: relative;
  height: 353px;

  pointer-events: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
.item-fit-reset-btn {
  position: absolute;
  left: 540px;
  top: 635px;
  width: 96px;
  height: 18px;
  z-index: 8;
}

/* UseSendPanel.as + UL.css.cn Panel skin, in 760x680 stage coordinates. */
#scene-item .item-use-modal {
  position: absolute;
  left: 255px;
  top: 230px;
  box-sizing: border-box;
  width: 250px;
  height: 150px;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent url('/img/flash/shop_buy/confirm-single.png') no-repeat;
  color: white;
  color-scheme: light;
  overflow: hidden;
  z-index: 100;
}
#scene-item .item-use-modal h3 {
  height: 26px;
  box-sizing: border-box;
  margin: 0;
  padding: 5px 10px;
  color: black;
  font: bold 12px/16px Arial, sans-serif;
  text-align: left;
}
#scene-item .item-use-modal p {
  position: absolute;
  left: 13px;
  top: 50px;
  width: 224px;
  height: 50px;
  margin: 0;
  color: white;
  font: bold 12px/20px 'Noto Serif CJK TC', serif;
  text-align: center;
}
#scene-item .item-modal-actions { position: static; }
/* Flex Button has no custom image skin in UL.css.cn; retain its label styling. */
#scene-item .item-use-modal button {
  position: absolute;
  top: 100px;
  box-sizing: border-box;
  width: 60px;
  height: 23px;
  background: linear-gradient(#fdfdfd, #d6d6d6);
  color: black;
  border: 1px solid #666;
  border-radius: 3px;
  cursor: pointer;
  padding: 0 2px;
  margin: 0;
  font: bold 12px Palatino, Georgia, serif;
  letter-spacing: 1px;
}
#scene-item .item-use-modal button:hover { background: linear-gradient(#8a4a4a, #660000); color: #fff; }
#scene-item #item-modal-yes { left: 40px; }
#scene-item #item-modal-no { left: 150px; }
/* OptionView.as / SoundPanel.as / HelpPanel.as / TutorialView.as. */
#scene-option,#scene-tutorial { position:absolute; inset:0; padding:0; margin:0; width:760px; height:680px; overflow:hidden; background:#000; box-sizing:border-box; }
.option-source-bg,.tutorial-menu-bg { position:absolute; inset:0; width:760px; height:680px; pointer-events:none; }
.option-help-panel,.option-sound-panel { position:absolute; left:230px; width:300px; }
.option-help-panel { top:100px; height:100px; }
.option-sound-panel { top:210px; height:275px; }
.option-panel-skin { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.option-panel-title { position:absolute; left:10px; top:5px; margin:0; height:25px; color:#000; font:bold 12px/25px Georgia,serif; }
.option-help-check { margin:0; position:absolute; left:60px; color:#fff; font:12px/20px lobby-mincho,serif; white-space:nowrap; }
.option-help-check input { margin:0 4px 0 0; width:13px; height:13px; accent-color:#f00; vertical-align:middle; }
.option-audio-label { margin:0; position:absolute; left:50px; width:200px; height:24px; text-align:center; color:#fff; font:16px/24px bradley,serif; letter-spacing:1px; }
.option-audio-control { position:absolute; left:50px; width:200px; height:42px; }
.option-slider { display:block; width:200px; height:20px; margin:0; padding:0; accent-color:#f00; cursor:pointer; }
.option-slider-ticks { display:flex; justify-content:space-between; width:200px; color:#fff; font:11px/16px Georgia,serif; }
.option-tutorial-doll { position:absolute; left:601px; top:297px; width:108px; height:352.95px; pointer-events:none; }
#tutorial-menu-list { position:absolute; left:192px; top:176px; width:336px; height:320px; }
#scene-tutorial .tutorial-menu-button { position:absolute; width:159.95px; height:32px; background:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; border-radius:0; transition:none; cursor:pointer; }
.tutorial-menu-button img { position:absolute; inset:0; width:100%; height:100%; }
.tutorial-menu-button span { position:absolute; left:19px; top:6px; width:125px; height:25px; color:#fff; font:12px/25px lobby-mincho,serif; text-shadow:0 0 2px #000,0 0 2px #000; text-align:center; pointer-events:none; }
.tutorial-menu-button:disabled span { opacity:.5; }
#scene-tutorial .tutorial-menu-button:focus-visible { outline:1px solid #fff; outline-offset:2px; }
.tutorial-movie { position:absolute; inset:0; z-index:30; background:#000; }
#tutorial-movie-host { width:760px; height:680px; }
#tutorial-movie-host ruffle-player { width:760px; height:680px; display:block; }
#tutorial-movie-status { position:absolute; left:180px; top:310px; width:400px; margin:0; text-align:center; color:#fff; font:14px/22px lobby-mincho,serif; pointer-events:none; }
#scene-tutorial .tutorial-movie-control { position:absolute; width:80px; height:80px; margin:0; padding:0; border:0; background:transparent; box-shadow:none; cursor:pointer; }
#scene-tutorial .tutorial-movie-control:focus-visible { outline:1px solid #fff; }
.tutorial-movie[hidden] { display:none; }

#scene-option label { margin:0; }

/* Keep the shared return button above the original full-stage tutorial movies. */
#scene-tutorial [data-scene-header] { z-index:40; }
#scene-tutorial:has(#tutorial-movie:not([hidden])) [data-scene-header] :is(.scene-header-bar,.scene-header-strip,.scene-header-en,.scene-header-zh) { visibility:hidden; }

/* Regist tutorials enter the source movie directly, without exposing the replay menu. */
#scene-tutorial[data-onboarding="true"] :is(.tutorial-menu-bg,#tutorial-menu-list,#tutorial-menu-doll) { visibility:hidden; }
/* AchievementListView (52,100); all panel art and row states come from SWF. */
@font-face { font-family:lobby-mincho; src:url('/fonts/hanwang-ming-heavy.ttf') format('truetype'); font-display:swap; }
.lobby-modal-backdrop.record-modal { background:transparent; }
#record-modal button { background:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; border-radius:0; transition:none; cursor:pointer; }
.record-panel { position:absolute; left:52px; top:100px; width:648px; height:520px; color:#000; font:12px Georgia,'Times New Roman',serif; }
.record-frame { position:absolute; inset:0; width:648px; height:520px; pointer-events:none; }
.record-tab { position:absolute; width:96px; height:24px; z-index:5; }
#record-tab-a { left:8px; top:24px; }
#record-tab-b { left:104px; top:24px; }
.record-tab img { width:96px; height:24px; }
.record-tab .tab-img-hover { display:none; }
.record-tab:hover .tab-img-norm { display:none; }
.record-tab:hover .tab-img-hover { display:block; }
/* AS hides the selected button, revealing the selected label baked into the panel. */
.record-tab.is-active { visibility:hidden; }
.record-close { position:absolute; left:624px; top:0; width:24px; height:24px; z-index:6; }
.record-close img,.record-page-btn img { display:block; width:100%; height:100%; pointer-events:none; }
.record-page-btn { position:absolute; left:608.1px; top:327.95px; width:16px; height:16px; z-index:6; }
#record-page-back { left:592.2px; }
.record-close .btn-img-hover,.record-page-btn .btn-img-hover { display:none; }
.record-close:hover .btn-img-norm,.record-page-btn:hover .btn-img-norm { display:none; }
.record-close:hover .btn-img-hover,.record-page-btn:hover .btn-img-hover { display:block; }
.record-page-indicator { position:absolute; left:320px; top:328px; width:24px; height:20px; line-height:20px; text-align:center; color:#000; font-size:12px; z-index:6; }
.record-strip { position:absolute; left:8px; top:344px; width:632px; height:32px; pointer-events:none; }
.record-name-label { position:absolute; left:40px; top:348px; width:580px; height:30px; line-height:30px; color:#fff; font: bold 18px/30px lobby-mincho,serif; white-space:nowrap; overflow:hidden; pointer-events:none; }
.record-list { position:absolute; left:16px; top:63px; width:616px; height:256px; z-index:4; }
.record-row { position:absolute; left:0; width:616px; height:16px; text-align:left; color:#000; }
.record-row::before { content:''; position:absolute; left:31px; top:-1px; width:576px; height:16px; pointer-events:none; }
.record-row.selected::before { background:url('/img/flash/lobby_controls/record-select.svg') no-repeat; }
.record-row:hover:not(:disabled)::before { background:url('/img/flash/lobby_controls/record-hover.svg') no-repeat; }
.record-row-icon { position:absolute; left:0; top:0; width:32px; height:16px; pointer-events:none; }
.record-row-name,.record-row-state { position:absolute; top:0; height:16px; line-height:16px; font:11px/16px lobby-mincho,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.record-row-name { left:34px; width:355px; }
.record-row-state { left:415px; width:195px; }
.record-row.failed { opacity:.3; }
.record-detail { position:absolute; left:0; top:340px; width:648px; height:172px; color:#fff; font:12px Georgia,'Times New Roman',serif; pointer-events:none; }
.record-description { position:absolute; left:20px; top:40px; width:600px; height:50px; margin:0; opacity:.5; font:12px/17px lobby-mincho,serif; white-space:pre-line; overflow:hidden; }
.record-progress { position:absolute; left:27px; top:83px; width:597px; height:48px; font:12px/16px lobby-mincho,serif; white-space:pre-line; }
.record-expiry { position:absolute; left:345px; top:147px; width:278px; height:20px; display:flex; justify-content:space-between; font:12px/20px lobby-mincho,serif; }
.record-code { position:absolute; left:20px; top:147px; width:278px; height:20px; color:#ff0; font:12px/20px lobby-mincho,serif; }
/* FriendListView.as + FriendListContainer.as: 528×408 panel at (125,150). */
.lobby-modal-backdrop.friend-modal { background:transparent; }
#friend-modal button { background:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; border-radius:0; transition:none; cursor:pointer; }
.friend-panel { position:absolute; left:125px; top:150px; width:528px; height:408px; color:#000; font:12px lobby-mincho,serif; }
.friend-frame { position:absolute; inset:0; width:528px; height:408px; pointer-events:none; }
.friend-tab { position:absolute; width:72px; height:24px; z-index:5; }
.friend-tab img { display:block; width:72px; height:24px; pointer-events:none; }
.friend-tab-icon,.friend-tab-icon img { width:32px; }
.friend-tab .tab-img-hover { display:none; }
.friend-tab:hover .tab-img-norm,.friend-tab.is-active .tab-img-norm { display:none; }
.friend-tab:hover .tab-img-hover,.friend-tab.is-active .tab-img-hover { display:block; }
.friend-close { position:absolute; left:502px; top:2px; width:21px; height:21px; z-index:6; }
.friend-close img,.friend-page-btn img,.friend-invite-btn img,.friend-row-action img { display:block; width:100%; height:100%; pointer-events:none; }
.friend-close .btn-img-hover,.friend-page-btn .btn-img-hover,.friend-invite-btn .btn-img-hover { display:none; }
.friend-close:hover .btn-img-norm,.friend-page-btn:hover .btn-img-norm,.friend-invite-btn:hover .btn-img-norm { display:none; }
.friend-close:hover .btn-img-hover,.friend-page-btn:hover .btn-img-hover,.friend-invite-btn:hover .btn-img-hover { display:block; }
.friend-page-btn { position:absolute; left:504px; top:360px; width:16px; height:16px; z-index:6; }
#friend-page-back { left:488px; }
.friend-counter { position:absolute; left:432px; top:50px; width:90px; height:32px; text-align:center; color:#000; font:12px/20px lobby-mincho,serif; z-index:5; pointer-events:none; }
.friend-page-indicator { position:absolute; left:253px; top:360px; width:50px; height:20px; text-align:center; font:12px/20px lobby-mincho,serif; z-index:6; pointer-events:none; }
.friend-list { position:absolute; left:32px; top:70px; width:470px; height:290px; z-index:4; }
.friend-row { position:absolute; width:98px; height:145px; }
/* AvatarClip draws Matrix(-1,0,0,1,50,340) into a 98×120 bitmap. */
.friend-row-portrait { position:absolute; left:0; top:0; width:98px; height:120px; overflow:hidden; pointer-events:none; }
.friend-row-doll { position:absolute; left:-4px; top:-3px; height:352.95px; width:108px; transform:scaleX(-1); pointer-events:none; }
.friend-row-name { position:absolute; left:0; top:100px; width:87px; height:28px; text-align:center; color:#000; font:bold 12px/20px lobby-mincho,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:2; pointer-events:none; }
.friend-row-name::before { content:''; position:absolute; left:0; top:2px; width:87px; height:15px; background:#eee; opacity:.5; z-index:-1; }
.friend-row-level { position:absolute; left:2px; top:15px; width:88px; height:16px; color:#fff; font:16px/20px bradley,serif; letter-spacing:3px; text-shadow:0 0 2px #000,0 0 2px #000; pointer-events:none; }
.friend-row-status { position:absolute; left:2px; top:48px; width:88px; height:24px; text-align:center; color:#fff; font:14px/24px lobby-mincho,serif; letter-spacing:3px; pointer-events:none; }
.friend-online { position:absolute; left:0; top:0; width:87.95px; height:11.95px; pointer-events:none; }
#friend-modal .friend-row-action { position:absolute; left:8px; top:122px; width:78px; height:20px; }
.friend-row-action .friend-action-label,.friend-search-label { position:absolute; left:0; top:3px; width:78px; height:20px; color:#fff; font:12px/20px lobby-mincho,serif; text-align:center; text-shadow:0 0 2px #000,0 0 2px #000; pointer-events:none; z-index:1; }
.friend-row-action .btn-img-hover { display:none; }
.friend-row-action:hover .btn-img-norm { display:none; }
.friend-row-action:hover .btn-img-hover { display:block; }
#friend-modal .friend-row-action.delete { left:75px; top:0; width:14px; height:14px; visibility:hidden; }
.friend-row:hover .friend-row-action.delete,.friend-row:focus-within .friend-row-action.delete { visibility:visible !important; }
.friend-row-action:disabled { opacity:.5; cursor:default; }
.friend-empty-note { position:absolute; left:0; top:130px; width:470px; margin:0; text-align:center; color:#000; font:12px/20px lobby-mincho,serif; pointer-events:none; }
.friend-invite { display:none; }
.friend-search-bar { position:absolute; left:170px; top:381px; width:100px; height:21px; z-index:5; }
.friend-search-bar input { box-sizing:border-box; width:100%; height:21px; border:1px solid #aab3b3; outline:0; background:#fff; color:#000; padding:1px 2px; font:12px/18px lobby-mincho,serif; }
.friend-invite-btn { position:absolute; left:280px; top:381px; width:78px; height:20px; z-index:6; }
/* =========================================================
 * VIRTUAL-ITEM SERIAL CODE DIALOG (1:1 Flash reimplementation)
 * Source: common/info_login.swf — dialog frame 1.png (528x416) placed at
 * (116,144) on the 760x680 stage, btn_ok (144x24) at (308,529).
 * No dedicated serial SWF exists; the text input is an AS TextField.
 * Pops over the lobby like the other lobby dialogs (no dim layer in the SWF).
 * ========================================================= */

.serial-modal {
  background: transparent;
  display: block;
}

/* Anti-pitfall 4: reset buttons inside the serial modal */
#lobby-serial-modal button {
  background-color: transparent;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  transition: none;
  cursor: pointer;
}
#lobby-serial-modal button:hover,
#lobby-serial-modal button:active,
#lobby-serial-modal button:focus,
#lobby-serial-modal button:focus-visible {
  background-color: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* dialog frame at its SWF placement (116,144) on the 760x680 stage */
.serial-frame {
  position: absolute;
  left: 116px;
  top: 144px;
  width: 528px;
  height: 416px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

/* title on the frame's light top strip (frame-local y 0..24), covering the
   baked login-bonus title: dark text like the original title plate */
.serial-title {
  position: absolute;
  left: 116px;
  top: 149px;
  width: 528px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #2e2416;
  z-index: 3;
  pointer-events: none;
}

/* close button on the title strip, top-right of the frame */
.serial-close {
  position: absolute;
  left: 618px;
  top: 146px;
  width: 21px;
  height: 21px;
  z-index: 4;
}
.serial-close img,
.serial-ok-btn img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.serial-close .btn-img-hover,
.serial-ok-btn .btn-img-hover { display: none; }
.serial-close:hover .btn-img-norm,
.serial-ok-btn:hover .btn-img-norm { display: none; }
.serial-close:hover .btn-img-hover,
.serial-ok-btn:hover .btn-img-hover { display: block; }

/* content area of the frame is gray (125,121,120) -> dark text */
.serial-desc {
  position: absolute;
  left: 180px;
  top: 264px;
  width: 400px;
  margin: 0;
  font-size: 13px;
  color: #2e2416;
  z-index: 3;
  pointer-events: none;
}

/* AS TextField: plain light input box in the frame content area */
.serial-input {
  position: absolute;
  left: 230px;
  top: 320px;
  width: 300px;
  height: 30px;
  padding: 4px 10px;
  background: #f5f2e8;
  border: 1px solid #7c6848;
  color: #2e2416;
  font-size: 14px;
  box-sizing: border-box;
  z-index: 3;
}
.serial-input:focus { outline: 1px solid #8a6a30; }

.serial-msg {
  position: absolute;
  left: 230px;
  top: 360px;
  width: 300px;
  min-height: 18px;
  margin: 0;
  font-size: 12px;
  color: #2e2416;
  z-index: 3;
  pointer-events: none;
}
.serial-msg.error { color: #7a1c1c; font-weight: bold; }
.serial-msg.success { color: #2e5a2e; font-weight: bold; }

/* btn_ok at its SWF placement (308,529), 144x24 */
.serial-ok-btn {
  position: absolute;
  left: 308px;
  top: 529px;
  width: 144px;
  height: 24px;
  z-index: 4;
}
/* ItemListView (498,107), WindowItemListPanel and itemwindow_ch.swf. */
.lobby-modal-backdrop.itemwin-modal { background:transparent; }
#itemwin-modal button { background:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; border-radius:0; transition:none; cursor:pointer; }
.itemwin-panel { position:absolute; left:498px; top:107px; width:208px; height:360px; font:12px lobby-mincho,serif; }
.itemwin-frame { position:absolute; inset:0; width:208px; height:360px; pointer-events:none; }
.itemwin-close { position:absolute; left:180px; top:4px; width:24px; height:24px; z-index:5; }
.itemwin-use { position:absolute; left:32px; top:330px; width:80px; height:24px; z-index:5; }
.itemwin-page { position:absolute; top:345px; width:16px; height:14px; z-index:5; }
#itemwin-page-back { left:144px; }
#itemwin-page-next { left:191px; }
.itemwin-close img,.itemwin-use img,.itemwin-page img { display:block; width:100%; height:100%; pointer-events:none; }
.itemwin-close .btn-img-hover,.itemwin-use .btn-img-hover,.itemwin-page .btn-img-hover { display:none; }
.itemwin-close:hover .btn-img-norm,.itemwin-use:hover:not(:disabled) .btn-img-norm,.itemwin-page:hover:not(:disabled) .btn-img-norm { display:none; }
.itemwin-close:hover .btn-img-hover,.itemwin-use:hover:not(:disabled) .btn-img-hover,.itemwin-page:hover:not(:disabled) .btn-img-hover { display:block; }
.itemwin-use:disabled,.itemwin-page:disabled { visibility:hidden; }
.itemwin-page-indicator { position:absolute; left:156px; top:342px; width:30px; height:20px; text-align:right; color:#fff; font:12px/20px lobby-mincho,serif; z-index:5; }
.itemwin-list { position:absolute; left:152px; top:56px; width:48px; height:288px; z-index:4; }
#itemwin-modal .itemwin-row { position:absolute; left:0; width:48px; height:48px; background:url('/img/flash/lobby_controls/item-up.svg') no-repeat 0 0 / 40px 40px; }
#itemwin-modal .itemwin-row:hover { background-image:url('/img/flash/lobby_controls/item-over.svg'); }
#itemwin-modal .itemwin-row.selected { background-image:url('/img/flash/lobby_controls/item-selected.svg'); }
.itemwin-row-icon { position:absolute; left:6px; top:6px; width:28px; height:28px; pointer-events:none; }
.itemwin-row-count { position:absolute; left:10px; top:32px; width:40px; height:20px; text-align:right; color:#fff; font:12px/20px lobby-mincho,serif; text-shadow:0 0 3px #000,0 0 3px #000; pointer-events:none; }
.itemwin-name { position:absolute; left:10px; top:5px; width:165px; height:30px; color:#fff; font:bold 14px/22px lobby-mincho,serif; letter-spacing:1px; z-index:4; }
.itemwin-preview { position:absolute; left:24px; top:37px; width:98px; height:98px; object-fit:contain; pointer-events:none; z-index:4; }
.itemwin-count,.itemwin-time { position:absolute; left:5px; width:135px; height:30px; padding-right:2px; box-sizing:border-box; text-align:right; color:#000; font:12px/20px lobby-mincho,serif; z-index:4; }
.itemwin-count { top:154px; }
.itemwin-time { top:189px; }
.itemwin-caption { position:absolute; left:5px; top:227px; width:130px; height:100px; margin:0; color:#000; font:12px/17px lobby-mincho,serif; white-space:pre-line; overflow:hidden; z-index:4; }
.itemwin-msg { position:absolute; left:0; top:365px; width:208px; margin:0; color:#fff; font:12px/18px lobby-mincho,serif; text-shadow:0 1px 2px #000; }
/* LoginInfoImage.as and NoticePanel.as; art is the complete original SWF composition.
   LoginInfoTitle/Label font and colours are from UL.css.orig. */
#lobby-notice-modal { background:transparent;z-index:150; }
.lobby-notice-art { position:absolute;inset:0;width:760px;height:680px;pointer-events:none; }
#lobby-notice-title { position:absolute;left:300px;top:166px;width:150px;height:30px;text-align:center;color:#fff;font:16px/24px lobby-mincho,serif;text-shadow:-1px -1px 1px #000,1px 1px 1px #000; }
#lobby-notice-message { position:absolute;left:210px;top:200px;width:400px;max-height:300px;overflow:auto;margin:0;color:#000;font:16px/24px Arial,"PMingLiU",sans-serif;letter-spacing:1px;white-space:pre-line; }
/* TreasureCardClip is centred at (375,383), full 168×240; selectable at (375,371). */
#lobby-notice-rewards { position:absolute;left:295px;top:263px;width:168px;height:240px; }
#lobby-notice-modal[data-choice="true"] #lobby-notice-rewards { top:251px; }
.notice-treasure-card { position:relative;width:168px;height:240px; }
.notice-treasure-card > img:not(.notice-card-art) { position:absolute;inset:0;width:168px;height:240px; }
.notice-card-art { position:absolute;max-width:none;max-height:none; }
.notice-part-art { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); }
.notice-card-name { position:absolute;left:0;top:5px;width:164px;text-align:center;color:#000;font:12px lobby-mincho,serif;text-shadow:0 0 2px #fff; }
.notice-card-caption { position:absolute;left:15px;top:180px;width:144px;height:90px;overflow:hidden;color:#000;font:10px lobby-mincho,serif;text-shadow:0 0 2px #fff; }
.notice-gem-amount { top:178px;font:36px Georgia,serif;text-align:center; }
.notice-card-count { position:absolute;left:30px;top:200px;width:96px;height:48px;color:#fff;font:32px lobby-mincho,serif;text-shadow:-1px -1px 1px #000,1px 1px 1px #000; }
#lobby-notice-select { position:absolute;left:300px;top:493px;width:160px;height:18px;background:#fff;color:#000;font:12px lobby-mincho,serif; }
#lobby-notice-page { display:none; }
#scene-lobby #lobby-notice-modal button { background:transparent;border:0;margin:0;padding:0;box-shadow:none;cursor:pointer; }
#lobby-notice-modal button:disabled { opacity:.5;cursor:default; }

/* LoginInfoImage.as: sale value label (350,318), bradley 64px. */
#lobby-notice-sale-value { position:absolute;left:350px;top:318px;width:100px;height:100px;color:#fff;font:64px bradley,serif;text-shadow:-1px -1px 1px #000,1px 1px 1px #000; }
/* NoticePanel.createUpdateMessage: original update text area (260,200), 350×288. */
#lobby-notice-modal[data-update-news="true"] #lobby-notice-message { left:260px;width:350px;height:288px;max-height:288px;overflow:auto; }
/* MatchView / ChannelClip / RoomClip coordinates from original AS and SWF. */
#scene-duel { position:absolute; inset:0; overflow:hidden; }
#scene-duel .duel-stage { position:relative; width:760px; height:680px; margin:0 auto; font:12px 'Microsoft JhengHei',sans-serif; color:#111; }
#scene-duel .duel-base { position:absolute; inset:0; pointer-events:none; }
#scene-duel [hidden] { display:none !important; }
#scene-duel [data-flash-button] { position:absolute; z-index:3; background-color:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; transition:none; }
#duel-channels { position:absolute; left:0; top:0; width:368px; height:452px; z-index:5; }
#scene-duel .duel-channel-art { position:absolute; left:1px; top:32px; width:365.95px; height:419.9px; }
#scene-duel .duel-channel { position:absolute; width:162px; height:50px; padding:0; margin:0; border:0; border-radius:0; box-shadow:none; background:transparent url('/img/duel/channel.svg') no-repeat; color:#111; text-align:left; cursor:pointer; }
#scene-duel .duel-channel:is(:hover,:focus-visible):not(:disabled) { background-image:url('/img/duel/channel-over.svg'); }
#scene-duel .duel-channel:disabled { opacity:.3; cursor:default; }
#scene-duel .duel-channel-name { position:absolute; left:20px; top:2px; width:135px; height:20px; font-weight:bold; }
#scene-duel .duel-channel-caption { position:absolute; left:9px; top:17px; width:148px; height:31px; overflow:hidden; font-size:10px; white-space:pre-line; }
#duel-room-list { position:absolute; left:16px; top:56px; width:338px; height:336px; }
#scene-duel .duel-room { position:relative; display:block; width:336px; height:40px; margin:0 0 2px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent url('/img/duel/room.svg') no-repeat; color:#111; text-align:left; cursor:pointer; }
#scene-duel .duel-room[aria-selected=true]::before { content:''; position:absolute; left:-1px; top:-1px; width:338px; height:42px; background:url('/img/duel/room-selected.svg'); pointer-events:none; }
#scene-duel .duel-room-name { position:absolute; left:25px; top:2px; width:275px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#scene-duel .duel-room-host { position:absolute; left:14px; top:20px; width:145px; }
#scene-duel .duel-room-guest { position:absolute; left:187px; top:20px; width:145px; }
#scene-duel .duel-room-rule { position:absolute; left:313px; top:2px; width:18px; height:18px; }
#duel-channel-name { position:absolute; left:10px; top:31px; width:300px; color:white; text-shadow:0 0 2px #404040; }
#duel-page { position:absolute; left:151px; top:398px; width:60px; text-align:center; }
#duel-empty { position:absolute; left:25px; top:65px; width:310px; }
#scene-duel .duel-detail-art { position:absolute; left:384px; top:32px; width:352px; height:280px; }
#scene-duel .duel-player { position:absolute; width:255px; height:120px; }
#scene-duel .duel-player-name { position:absolute; left:0; top:0; width:90px; overflow:hidden; }
#scene-duel .duel-player-stats { position:absolute; left:0; top:24px; width:85px; white-space:pre-line; line-height:24px; }
#scene-duel .duel-player-cards { position:absolute; left:87px; top:-18px; --deck-preview-width:47px; --deck-preview-height:calc(47px * 10 / 7); --deck-preview-gap:0px; }
/* AvatarArea: deck=(432,543), DeckCase.x=-100, outer scale=.5. */
#duel-own-cards { left:382px; top:543px; width:168px; height:98px; --deck-case-scale:.5; z-index:2; }
/* AvatarView MATCH: (785-260+130,330-100+410)=(655,640); bounds=(-54,-343)..(54,9.95). */
#duel-doll { position:absolute; left:601px; top:297px; width:auto; height:352.95px; pointer-events:none; z-index:3; }
#duel-status { position:absolute; left:16px; top:466px; width:335px; height:128px; margin:0; white-space:pre-line; overflow:auto; color:white; }
#duel-cancel-quick { position:absolute; left:120px; top:545px; }
#scene-duel #duel-create-modal { position:absolute; inset:200px auto auto 230px; width:320px; height:225px; box-sizing:border-box; margin:0; padding:0; border:0; color:#111; background:transparent url('/img/duel/create-panel.png'); font:12px 'Microsoft JhengHei',sans-serif; }
#duel-create-modal::backdrop { background:rgba(0,0,0,.4); }
#duel-create-form { position:relative; width:320px; height:225px; }
#duel-create-title { position:absolute; left:30px; top:10px; margin:0; font-size:14px; }
#duel-create-form label { position:absolute; left:30px; }
#scene-duel .duel-name-label { top:50px; }
#scene-duel .duel-stage-label { top:90px; }
#scene-duel .duel-rule-label { top:130px; }
#duel-create-form input,#duel-create-form select { position:absolute; left:120px; width:150px; height:20px; box-sizing:border-box; font-size:12px; }
#duel-new-room-name { top:50px; }
#duel-new-room-stage { top:88px; }
#duel-new-room-rule { top:128px; }
#duel-create-form button { position:absolute; top:180px; width:80px; height:20px; margin:0; padding:0; font-size:12px; }
#duel-create-confirm { left:60px; }
#duel-create-cancel { left:160px; }
#scene-duel { padding:0; background:none; }
#duel-create-form label { margin:0; }
#duel-create-form input,#duel-create-form select { padding:0 3px; background:white; color:#111; }
#duel-rooms { position:absolute; left:0; top:0; width:368px; height:452px; }

#scene-duel .duel-room[aria-selected=true]::after { content:''; position:absolute; inset:0; width:336px; height:40px; background:url('/img/duel/room.svg'); pointer-events:none; }
#scene-duel .duel-room > * { z-index:2; }

/* UL.css.cn: GameLobbyRoomClipNameLabel / GameLobbyChannelCaptionLabel. */
#scene-duel .duel-room-name { color:#fff; }
#scene-duel .duel-channel-name { text-align:center; font-weight:normal; }
#scene-duel .duel-channel-caption { color:#fff; }
#scene-duel .duel-player-name { font-size:9px; text-align:right; }
#scene-duel .duel-player-stats { font-size:9px; text-align:right; }
/* Match ChatArea: public log at (7,468), input/send on the authored bottom row. */
#scene-duel #duel-status { left:7px; top:468px; width:357px; height:18px; font-size:11px; }
#duel-chat-log { position:absolute; left:7px; top:488px; width:357px; height:116px; overflow:auto; color:white; font-size:11px; }
#duel-chat-log p { margin:0 0 3px; overflow-wrap:anywhere; }
#scene-duel #duel-chat-input { position:absolute; left:8px; top:612px; width:323px; height:18px; box-sizing:border-box; padding:0 3px; margin:0; border:0; border-radius:0; background:transparent; color:white; font-size:11px; }
#scene-duel #duel-chat-send { left:338px; top:612px; width:22.95px; height:17.95px; }
/* Geometry: raid_base_ch/map_ch/list_panel SWF; text: RaidBG/RaidInfo/RaidDeck.as. */
.scene-raid { position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; overflow:hidden; background:#000; }
#scene-raid .raid-stage { position:relative; width:760px; height:680px; margin:0 auto; overflow:hidden; }
#scene-raid .raid-art { position:absolute; inset:0; width:760px; height:680px; pointer-events:none; }
#scene-raid .raid-art svg { width:760px; height:680px; display:block; overflow:visible; }
#scene-raid .raid-art [role="button"] { pointer-events:auto; cursor:pointer; }
#scene-raid .raid-art [role="button"][aria-disabled="true"] { pointer-events:none; cursor:default; }
#scene-raid .raid-art [role="button"]:focus-visible { outline:1px solid white; }
#scene-raid .raid-list-art { z-index:5; }
#scene-raid .raid-boss-list { position:absolute; left:23px; top:40px; width:632px; z-index:6; }
#scene-raid .raid-boss-row { position:relative; display:grid; grid-template-columns:173px 65px 70px 148px 30px 40px 100px; width:632px; height:16px; color:#fff; text-align:left; font:11px/16px 'Microsoft JhengHei',sans-serif; white-space:nowrap; }
#scene-raid button.raid-boss-row, #scene-raid button.raid-vortex { background:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; transition:none; border-radius:0; cursor:pointer; }
#scene-raid .raid-boss-row>span { overflow:hidden; text-overflow:ellipsis; }
#scene-raid .raid-boss-row svg { position:absolute; left:-23px; top:0; width:760px; height:680px; pointer-events:none; z-index:-1; }
#scene-raid .raid-info-panel { position:absolute; top:32px; left:0; width:760px; height:96px; z-index:7; color:#fff; font:12px/20px 'Microsoft JhengHei',sans-serif; pointer-events:none; }
#scene-raid .raid-info-panel>span { position:absolute; white-space:nowrap; }
#scene-raid .raid-boss-name { left:70px; top:8px; width:210px; }
#scene-raid .raid-boss-hp-text { left:95px; top:43px; width:180px; }
#scene-raid .raid-remain-time { left:115px; top:63px; width:160px; }
#scene-raid .raid-my-rank { left:325px; top:25px; width:165px; }
#scene-raid .raid-ranking-list { position:absolute; left:520px; top:8px; width:210px; margin:0; padding:0; list-style:none; font-size:11px; line-height:16px; }
/* AvatarView (785-260,330-100) + AvatarClip cache (130,410) + rig bounds (-54,-343). */
#scene-raid .raid-avatar { position:absolute; left:601px; top:297px; width:108px; height:352.95px; pointer-events:none; z-index:3; }
#scene-raid .raid-deck { left:25px; top:475px; z-index:3; }
#scene-raid .raid-deck-name { position:absolute; left:65px; top:635px; color:white; font:12px/20px sans-serif; z-index:3; }
#scene-raid .raid-count { position:absolute; left:430px; top:485px; width:50px; text-align:center; color:white; font:26px/40px bradley,serif; z-index:3; }
#scene-raid .raid-msg { position:absolute; left:408px; top:562px; width:340px; margin:0; color:white; font:12px/18px 'Microsoft JhengHei',sans-serif; z-index:3; }
#scene-raid .raid-vortices { position:absolute; inset:0; pointer-events:none; z-index:2; }
#scene-raid .raid-vortex { position:absolute; width:64px; height:96px; pointer-events:auto; }
#scene-raid .raid-vortex svg { width:100%; height:100%; overflow:visible; }
#scene-raid .raid-chat { position:absolute; left:24px; top:490px; width:344px; height:135px; overflow:auto; color:white; z-index:4; font:12px/18px sans-serif; }
#scene-raid .raid-stage[data-chat="true"] .raid-deck { left:375px; top:545px; --deck-case-scale:.5; }
#scene-raid .raid-stage[data-chat="true"] .raid-deck-name { left:435px; }
.raid-turn-dialog { position:fixed; width:352px; height:144px; margin:0; padding:0; border:0; background:transparent; color:black; overflow:visible; }
.raid-turn-dialog::backdrop { background:rgba(0,0,0,.35); }
.raid-turn-dialog .raid-art { position:absolute; inset:0; width:352px; height:144px; pointer-events:none; }
.raid-turn-dialog svg { width:352px; height:144px; }
.raid-turn-dialog [role="button"] { pointer-events:auto; cursor:pointer; }
.raid-turn-dialog select { position:absolute; left:45px; top:67px; width:40px; height:18px; font-size:12px; padding:0; }
.raid-turn-dialog output { position:absolute; left:170px; top:64px; width:200px; text-align:center; font:20px/24px bradley,serif; }
.raid-turn-dialog p { position:absolute; top:142px; width:352px; color:white; font:12px/18px sans-serif; text-align:center; }

.raid-turn-dialog #raid-turn-base-ap { position:absolute; left:160px; top:64px; width:28px; text-align:center; font:20px/24px bradley,serif; }

/* RaidMiniInfo.as: 128x48 SWF, origin offset (-60,+15), text (5,3)/(5,21). */
#scene-raid .raid-map-tip { position:absolute; width:128px; height:48px; z-index:20; pointer-events:none; color:white; font:12px/20px 'Microsoft JhengHei',sans-serif; }
#scene-raid .raid-map-tip svg { position:absolute; inset:0; width:128px; height:48px; }
#scene-raid #raid-map-tip-name { position:absolute; left:5px; top:3px; width:140px; white-space:nowrap; }
#scene-raid #raid-map-tip-hp { position:absolute; left:5px; top:21px; width:118px; text-align:center; }
/* RaidChatArea.as and original UL.css RaidChatArea/RaidChatInput. */
#scene-raid .raid-chat { left:1px; top:498px; width:363px; height:158px; overflow:visible; font:12px/16px Arial,sans-serif; }
#raid-chat-filter { position:absolute; left:7px; top:-17px; width:48px; height:14px; padding:0; font-size:9px; color:#000; }
#raid-chat-log { height:130px; overflow-y:auto; white-space:pre-wrap; overflow-wrap:anywhere; scrollbar-width:thin; }
#raid-chat-log p { margin:0; padding-left:1px; }
#raid-chat-log::-webkit-scrollbar { width:8px; }
#raid-chat-log::-webkit-scrollbar-track { background:url('/img/flash/raid_panels/scl_chat_guide.png'); }
#raid-chat-log::-webkit-scrollbar-thumb { border-image:url('/img/flash/raid_panels/scl_chat_bar0.png') 3 2 fill stretch; border-width:3px 2px; border-style:solid; }
#raid-chat-form { height:22px; display:flex; }
#raid-chat-input { min-width:0; flex:1; color:#000; background:transparent; border:0; font-size:12px; }
#scene-raid #raid-chat-send { margin:0; padding:0; border:0; background:transparent; color:#fff; font-size:12px; }
#scene-raid .raid-item-art { z-index:8; }
/* RaidCodeCopyPanel.as: original Flex Panel skin and authored control positions. */
.raid-panel { position:fixed; inset:auto; margin:0; padding:0; border:0; color:#fff; color-scheme:light; background:transparent url('/img/flash/raid_panels/code-owner.png') no-repeat; font:12px/20px 'Noto Serif CJK TC',serif; }
.raid-panel::backdrop,.raid-notice-dialog::backdrop { background:rgba(0,0,0,.35); }
.raid-panel h3 { height:26px; margin:0; padding:5px 10px; color:#000; font:bold 12px/16px serif; }
.raid-panel p { margin:0; }
.raid-panel button { position:absolute; width:60px; height:23px; font-size:12px; padding:0; }
.raid-panel .raid-panel-close { left:225px; top:3px; width:20px; height:20px; }
.raid-code-dialog { width:250px; height:380px; }
.raid-code-dialog[data-owner="false"] { height:150px; background-image:url('/img/flash/raid_panels/code-other.png'); }
.raid-code-explain { position:absolute; left:13px; top:40px; width:228px; height:50px; text-align:center; }
#raid-share-hash { position:absolute; left:13px; top:85px; width:224px; height:26px; padding:0; border:0; background:transparent; color:white; text-align:center; cursor:copy; }
.raid-help-caption { position:absolute; left:13px; top:115px; width:228px; text-align:center; }
#raid-help-send { left:95px; top:145px; }
.raid-copy-caption { position:absolute; left:13px; top:175px; width:228px; text-align:center; }
#raid-copy-type { position:absolute; left:55px; top:200px; width:140px; height:25px; }
.raid-reward-caption { position:absolute; left:13px; top:240px; width:228px; text-align:center; }
#raid-defeat-reward { position:absolute; left:55px; top:265px; width:140px; height:25px; }
#raid-config-save { left:95px; top:320px; }
#raid-code-msg { position:absolute; left:13px; bottom:5px; width:228px; text-align:center; }
.raid-code-enter-dialog { width:250px; height:150px; background-image:url('/img/flash/raid_panels/code-enter.png'); }
.raid-code-enter-dialog label { position:absolute; left:13px; top:35px; width:228px; text-align:center; }
#raid-code-input { position:absolute; left:50px; top:60px; width:150px; height:21px; box-sizing:border-box; }
#raid-code-join-confirm { left:40px; top:100px; }
#raid-code-join-cancel { left:150px; top:100px; }
/* ProfoundNoticePanel.as: raid_win_ch.swf 576x336, origin (100,140). */
.raid-notice-dialog { position:fixed; inset:auto; width:576px; height:336px; margin:0; border:0; padding:0; background:transparent; color:white; overflow:visible; font:12px/18px 'Microsoft JhengHei',sans-serif; }
#raid-notice-art { position:absolute; inset:0; pointer-events:none; }
#raid-notice-art svg { width:576px; height:336px; }
#raid-notice-art [role="button"] { pointer-events:auto; cursor:pointer; }
#raid-notice-message { position:absolute; left:120px; top:60px; width:340px; margin:0; white-space:pre-line; }
#raid-notice-content { position:absolute; left:35px; top:110px; width:500px; height:170px; overflow:auto; }
#raid-notice-content p { margin:0; }
#raid-notice-content .raid-result-row { display:grid; grid-template-columns:40px 160px 190px; height:16px; }
#raid-notice-content .raid-reward-entry { display:flex; align-items:center; gap:8px; min-height:50px; }
#raid-notice-content .raid-reward-entry img { max-width:40px; max-height:48px; object-fit:contain; }
#raid-notice-status { position:absolute; top:338px; width:576px; margin:0; text-align:center; }

#scene-raid .raid-boss-label { left:100px; top:25px; width:180px; }
#scene-raid .raid-boss-caption { left:285px; top:43px; width:220px; height:50px; white-space:normal; overflow:auto; }
#scene-raid .raid-boss-rewards { left:338px; top:8px; width:165px; overflow:hidden; text-overflow:ellipsis; }
.raid-notice-dialog[data-news="true"] { width:760px; height:680px; }
.raid-notice-dialog[data-news="true"] #raid-notice-art svg { width:760px; height:680px; }
.raid-notice-dialog[data-news="true"] #raid-notice-message { left:210px; top:200px; width:340px; }
.raid-notice-dialog[data-news="true"] #raid-notice-status { top:565px; width:760px; }

.raid-notice-dialog[data-notice-type="16"] #raid-notice-message { top:80px; width:300px; font-size:13px; }

#scene-raid .raid-ranking-list li { position:relative; height:16px; }
.raid-rank-number { position:absolute; left:0; width:28px; }
.raid-rank-arrow { position:absolute; left:28px; width:16px; height:16px; }
.raid-rank-name { position:absolute; left:46px; width:108px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.raid-rank-score { position:absolute; left:154px; width:52px; text-align:right; }
#scene-raid .raid-boss-caption { white-space:pre-line; }

/* ProfoundNoticePanel.createRewards / RankingLabelSet original coordinates. */
.raid-notice-dialog[data-notice-type="17"] #raid-notice-content { left:0; top:0; width:576px; height:280px; }
#raid-notice-content .raid-reward-entry { position:absolute; left:130px; width:210px; min-height:0; height:15px; font-size:10px; line-height:15px; }
.raid-notice-dialog[data-notice-type="18"] #raid-notice-message { left:35px; top:63px; width:500px; }
.raid-notice-dialog .raid-result-row { position:relative; display:block !important; height:16px; font-size:10px; line-height:16px; }
.raid-result-row span { position:absolute; top:0; }
.raid-result-rank { left:0; width:40px; }
.raid-result-name { left:40px; width:100px; overflow:hidden; white-space:nowrap; }
.raid-result-damage { left:0; width:190px; text-align:right; }
.raid-result-reward { left:200px; width:190px; }
/* game/base.swf; PlayerHand, FoeHand, DropTable and MoveButton registration points. */
#scene-game { position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; overflow:hidden; background:#000; z-index:10; }
#game-stage { position:relative; width:760px; height:680px; margin:0 auto; overflow:clip; color:white; font:12px 'Microsoft JhengHei',sans-serif; }
#game-stage [hidden] { display:none !important; }
#game-background,#game-near-background,#game-stand,#game-range-art,.game-base,#game-turn,#game-life,#game-phase-art,#game-timer,#game-points,#game-dice-result { position:absolute; inset:0; pointer-events:none; }
#game-stage .game-hud-image { position:absolute; max-width:none; pointer-events:none; }
/* GameView.bring: the table, stands and HUD appear only after the opening. */
#game-stage[data-opening="true"] :is(.game-base,#game-turn,#game-phase-art,#game-foe-name,#game-stand,#game-life,#game-range-art,#game-ok-btn) { opacity:0; }
#game-stage[data-opening="true"] #game-foe-card { opacity:1; }
#game-opening,#game-opening > div { position:absolute; inset:0; pointer-events:none; }
#game-opening .game-opening-stand img { position:absolute; left:0; top:0; transform-origin:0 0; max-width:none; max-height:none; }
#game-opening .game-opening-avatar { position:absolute; top:297px; width:108px; height:352.95px; transform-origin:54px 0; }
/* GameOpeningNameLabel (white, left) / GameOpeningSubNameLabel (#D0C0B0, right): 12px minchoB in 220x28,
   GlowFilter(black,1,2,2,16) and an inner DropShadow(10, 270, black, 0.3). */
#game-opening .game-opening-name,#game-opening .game-opening-sub { position:absolute; width:220px; height:28px; font:12px/28px lobby-mincho,serif; white-space:nowrap; overflow:hidden; text-shadow:0 0 1px #000,0 0 1px #000,0 0 2px #000,0 0 2px #000; }
#game-opening .game-opening-name { color:#fff; text-align:left; }
#game-opening .game-opening-sub { color:#d0c0b0; text-align:right; }
/* DialogueTextField 290x180 at (50,30) / (435,30): 18px minchoB black, leading 5, letterSpacing 2. */
#game-opening .game-opening-dialogue { position:absolute; left:50px; top:30px; width:290px; height:180px; color:#000; font:18px/23px lobby-mincho,serif; letter-spacing:2px; white-space:pre-wrap; overflow-wrap:anywhere; }
#game-opening .game-opening-dialogue.is-foe { left:435px; }
#game-opening .game-opening-dialogue .is-hidden { visibility:hidden; }
#game-opening .game-opening-dialogue .is-blur { filter:blur(2px); }
#game-stage .game-hud-movie { position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; }
#game-background img,#game-near-background img,#game-stand img { position:absolute; max-width:none; }
/* StandCharaImage: stand/shadow at (DIS_X_SET[side][distance-1], 416), foe scaleX -1;
   setDist tweens x in 0.3 s EASE_IN_QUAD, getBringOnThread slides in from x -500/+500 in 1 s EASE_OUT_SINE. */
#game-stage .game-stand-chara { position:absolute; left:0; top:0; width:0; height:0; }
#game-stage .game-stand-pos { position:absolute; left:0; top:416px; width:0; height:0; transition:left .3s cubic-bezier(.55,.085,.68,.53); }
#game-stage .game-stand-chara[data-side="foe"] .game-stand-layers { transform:scaleX(-1); }
#game-stage :is(.game-stand-up,.game-stand-fx) { position:absolute; left:0; top:0; width:0; height:0; }
#game-stage .game-stand-up img { position:absolute; left:0; top:0; transform-origin:0 0; max-width:none; max-height:none; }
/* BaseHitEffect / HitHealEffect / up holders: Flash x, y, rotation, scale around the clip origin. */
#game-stage .game-stand-fx-item { position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; }
/* CachedBaseImage: HitHealEffect frames are 150x200 bitmaps drawn from (-50,-50) of the SWF root. */
#game-stage .game-stand-heal-clip { position:absolute; left:-50px; top:-50px; width:150px; height:200px; overflow:hidden; }
/* StandCharaImage._damageLabel: 250x120 Label, UL.css .DamageLabel (black 120 bradley, right),
   GlowFilter(0xFFFFFF, 1, 2, 2, 16). */
#game-stage .game-stand-damage-label { position:absolute; left:0; top:0; width:250px; height:120px; color:#000; font:120px/1 bradley,serif; text-align:right; white-space:nowrap; filter:url(#game-filter-damage-glow); }
/* StandCharaImage.addFlash: GradientBevelFilter(0, 45, white x3, alpha 0.5, ratios 0, blur 0). */
#game-stage .game-stand-chara.is-flash { filter:url(#game-filter-stand-flash); }
/* FarBG ScrollThread: 760x350 bitmap, copyPixels shifts it 1 px per frame (24 fps) and wraps. */
#game-stage .game-bg-scroll { position:absolute; left:0; width:760px; overflow:hidden; }
#game-stage .game-bg-scroll-strip { position:absolute; left:0; top:0; width:1520px; height:100%; animation:game-bg-scroll var(--game-bg-period) steps(760) infinite; }
#game-stage .game-bg-scroll-strip[data-direction="-1"] { animation-direction:reverse; }
@keyframes game-bg-scroll { from { transform:translateX(0); } to { transform:translateX(-760px); } }
#game-phase-art svg { width:760px; height:680px; }
#game-stage p { margin:0; }
#game-stage .game-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#game-back-btn { position:absolute; right:8px; top:8px; z-index:15; font-size:11px; }
#game-stage .game-character { position:absolute; width:168px; height:240px; }
#game-player-card { left:0; top:440px; }
/* DuelCharaCards.enlargeCard: foe clip (0,-240) -> y 0, alpha 1 in 0.15 s Quad.easeOut while hovered;
   restoreCard returns it in 0.08 s with alpha 0 (_CHARA_CARD_ALPHA). The tab ignores alpha. */
#game-foe-clip { position:absolute; left:0; top:-240px; width:168px; height:272px; transition:top .08s cubic-bezier(.25,.46,.45,.94); }
#game-foe-clip:is(:hover,:focus-within) { top:0; transition-duration:.15s; }
#game-foe-card { left:0; top:0; opacity:0; transition:opacity .08s cubic-bezier(.25,.46,.45,.94); }
#game-foe-clip:is(:hover,:focus-within) #game-foe-card { opacity:1; transition-duration:.15s; }
/* CharaCardSelectTabImage labels (UL.css): CharaCardStatusTabLabel 9px Verdana bold #b3b3b3 (Lv/ATK/DEF #4c4c4c)
   19x14 at y 19; HP CharaCardParam 24px bradley at (138,-2) 30x25; name CharaCardStatusTabNameLabel 14px minchoB (8,2) 130x18. */
#game-stage .game-chara-tab { position:absolute; left:0; top:240px; width:168px; height:32px; pointer-events:auto; }
#game-stage .game-chara-tab img { position:absolute; left:0; top:0; width:168px; height:32px; }
#game-stage .game-chara-tab span { position:absolute; white-space:nowrap; overflow:hidden; }
#game-stage .game-chara-tab-name { left:8px; top:2px; width:130px; height:18px; color:#3c3c3c; font:14px/18px lobby-mincho,serif; letter-spacing:1px; }
#game-stage .game-chara-tab-hp { left:138px; top:-2px; width:30px; height:25px; color:#fff; font:24px/25px bradley,serif; letter-spacing:2px; text-align:center; }
#game-stage .game-chara-tab-hp[data-level="half"] { color:#ffff30; }
#game-stage .game-chara-tab-hp[data-level="low"] { color:#ff7070; }
#game-stage .game-chara-tab-value { top:19px; width:19px; height:14px; color:#4c4c4c; font:bold 9px/14px Verdana,sans-serif; text-align:center; }
#game-stage .game-chara-tab-value[data-field="level"] { left:14px; }
#game-stage .game-chara-tab-value[data-field="atk"] { left:61px; }
#game-stage .game-chara-tab-value[data-field="def"] { left:100px; }
#game-stage .game-chara-tab-value[data-field="max"] { left:150px; color:#b3b3b3; }
/* BaseCardFrameScene shows only the foe name: Label 168x20 at (600,36), UL.css GameChatName. */
#game-player-name { display:none; }
#game-foe-name { position:absolute; left:600px; top:36px; width:168px; height:20px; color:#fff; font-size:12px; text-align:center; }
/* HPGauge 354x3 at (0,436), foe mirrored from x=760; ColorTransform(1,1,1,1,255,0,0) on black. */
#game-stage .game-hp-gauge { position:absolute; left:0; top:436px; width:354px; height:3px; background:#f00; transform-origin:0 0; }
#game-stage .game-hp-gauge.is-foe { left:760px; }
/* HPPoint label 150x40 at (10,405-8) / (600,397) right aligned; UL.css MaxHitPoint; GlowFilter(0x111111,1,2,2,16). */
#game-stage .game-hp-point { position:absolute; left:10px; top:397px; width:150px; height:40px; margin:0; text-align:left; white-space:pre; color:#aaa; font:18px bradley,serif; letter-spacing:2px; text-shadow:0 0 1px #111,0 0 1px #111,0 0 1px #111,0 0 1px #111; }
#game-stage .game-hp-point.is-foe { left:600px; text-align:right; }
#game-stage .game-hp-current { color:#fff; font-size:36px; }
/* TimeGauge 353x2 at (405,338) and mirrored at x=355. */
#game-stage .game-time-gauge { position:absolute; left:405px; top:338px; width:353px; height:2px; transform-origin:0 0; }
#game-stage .game-time-gauge.is-left { left:355px; }
/* DropTableNum: foe digits use ColorTransform(-1,-1,-1,1,255,255,255,0), an exact colour inversion. */
#game-stage .game-point-digits { position:absolute; inset:0; }
#game-stage .game-point-digits.is-foe { filter:invert(1); }
#game-stage .game-dice-token { position:absolute; left:0; top:0; transform-origin:0 0; }
#game-hand,#game-foe-hand,#game-player-table,#game-foe-table { position:absolute; left:0; top:0; width:0; height:0; }
/* ActionCardClip: registration (28,43) in a 56x86 box. BaseHand moves cards in 0.2 s EASE_OUT_SINE;
   rotateTween turns the whole clip 0/180 deg in 0.2 s EASE_OUT_SINE. */
#game-stage .game-action-card { position:absolute; width:56px; height:86px; transform-origin:28px 43px; transition:left .2s cubic-bezier(.39,.575,.565,1),top .2s cubic-bezier(.39,.575,.565,1),transform .2s cubic-bezier(.39,.575,.565,1); }
#game-stage .game-action-card-body { position:absolute; inset:0; transform-origin:28px 43px; transition:transform .2s cubic-bezier(.39,.575,.565,1); }
#game-stage .game-action-card-body > img { position:absolute; pointer-events:none; max-width:none; }
#scene-game .game-action-card-hit { position:absolute; inset:0; width:56px; height:86px; margin:0; padding:0; border:0; border-radius:0; outline:0; box-shadow:none; background:transparent; transition:none; }
#game-stage .game-action-card-hit:focus-visible { outline:1px solid white; }
#game-stage .game-action-card-hit:disabled { cursor:default; }
#game-stage .game-action-card[data-locked=true] { opacity:.5; }
/* ActionCardButton sits at the clip's registration point: rotate button centred (-10.95,-10.95), arrow at y -40.
   Hidden until PlayerHand's mouse over (rotate shown, arrowBlinkStop); arrowBlinkStart shows only the
   arrow at alpha 0.8, tweening y -40 -> -44 -> -40 in 0.4 s steps. */
#game-stage .game-card-control { position:absolute; left:28px; top:43px; width:0; height:0; visibility:hidden; }
#game-stage .game-card-control > * { position:absolute; max-width:none; }
#scene-game .game-card-rotate { margin:0; padding:0; border:0; outline:0; box-shadow:none; background-color:transparent; transition:none; }
#scene-game .game-card-rotate img { position:absolute; inset:0; width:100%; height:100%; }
#game-stage .game-card-arrow { pointer-events:none; }
#game-stage .game-card-control[data-hint="true"] { visibility:visible; }
#game-stage .game-card-control[data-hint="true"] .game-card-rotate { visibility:hidden; }
#game-stage .game-card-control[data-hint="true"] .game-card-arrow { opacity:.8; animation:game-card-arrow-blink .8s linear infinite; }
#game-stage .game-card-control:not([data-hint="true"]) .game-card-arrow { visibility:hidden; }
#game-stage .game-action-card:is(:hover,:focus-within) .game-card-control:has(.game-card-rotate:not(:disabled)),
#game-stage .game-action-card:is(:hover,:focus-within) .game-card-control:has(.game-card-rotate:not(:disabled)) .game-card-rotate { visibility:visible; }
#game-stage .game-action-card:is(:hover,:focus-within) .game-card-control .game-card-arrow { visibility:hidden; animation:none; }
@keyframes game-card-arrow-blink { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
/* MoveButton at (x, 258): hit shape 48x54; [O]/[D] add the label bubble (chars 6/8); frame 2 = no-entry art. */
#game-drop-table,#game-move-arrows { position:absolute; inset:0; pointer-events:none; }
#game-move-controls { position:absolute; left:0; top:0; width:0; height:0; }
#scene-game #game-move-controls .game-move-button { position:absolute; top:258px; width:48px; height:54px; background-color:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; transition:none; overflow:visible; }
#scene-game #game-move-controls .game-move-button:focus-visible { outline:1px solid #fff; }
#game-stage .game-move-bubble,#game-stage .game-move-button[data-constrained="true"] .game-move-glow,#game-stage .game-move-button[data-constrained="true"] .game-move-icon { visibility:hidden; }
#game-stage .game-move-disabled { visibility:hidden; }
#game-stage .game-move-button[data-constrained="true"] .game-move-disabled { visibility:visible; }
#game-stage .game-move-button:is(:hover,:active,:focus-visible):not(:disabled) .game-move-bubble { visibility:visible; }
/* MoveArrowImage: 40x53 bitmap of arrow_right drawn at (20,25); the left arrow is its mirror. */
#game-stage .game-move-arrow { position:absolute; top:260px; width:40px; height:53px; overflow:hidden; }
#game-stage .game-move-arrow.is-left .game-hud-image { transform:scaleX(-1); transform-origin:20px 0; }
#scene-game #game-ok-btn { position:absolute; left:540px; top:574px; width:56px; height:56px; background-color:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; transition:none; }
#game-change-list { position:absolute; left:176px; top:320px; display:flex; gap:8px; z-index:8; }
#game-change-list button { margin:0; padding:0; width:84px; background:transparent; border:0; }
#game-change-list img { width:84px; height:120px; }
#game-message { position:absolute; left:174px; top:612px; width:560px; min-height:16px; pointer-events:none; }
#game-message[data-logged="true"] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ResultScene container (760x680). Fade: black at alpha 0.5; ResultFrame at y 5; ResultLabel bradley #e0e0e0,
   letterSpacing 2, right aligned 60x40 (30 px) or 170x40 (40 px totals), GlowFilter(black,1,2,2,8). */
/* clip, not hidden: cards slide in from x + 1024 and a hidden box can still be scrolled by focus. */
#game-result { position:absolute; inset:0; width:760px; height:680px; z-index:20; color:#fff; overflow:clip; }
#game-result .game-result-layers,#game-result .game-result-layers > div { position:absolute; inset:0; pointer-events:none; }
#game-result .game-result-fade { background:#000; }
#game-result button { pointer-events:auto; }
#game-result .game-result-stand-slide { will-change:transform; }
#game-result-stand { position:absolute; left:0; top:0; transform-origin:0 0; max-width:none; max-height:none; pointer-events:none; }
#game-result .game-result-label { position:absolute; width:60px; height:40px; color:#e0e0e0; font:30px/40px bradley,serif; letter-spacing:2px; text-align:right; white-space:nowrap; text-shadow:0 0 1px #000,0 0 1px #000,0 0 2px #000,0 0 2px #000; }
#game-result .game-result-label.is-total { width:170px; font-size:40px; }
#game-result .game-result-card,#game-result .game-result-card-num { position:absolute; left:0; top:0; transform-origin:0 0; }
#game-result .game-result-card { width:168px; height:240px; }
#game-result .game-result-card > img:not(.game-hud-image) { position:absolute; left:0; top:0; width:168px; height:240px; max-width:none; }
#game-result .game-result-card .game-result-card-art { position:absolute; max-width:none; }
/* ExpCardClip / GemCardClip: ResultNameLabel 12px minchoB at (0,5) 164 wide; ResultNumericLabel 24px bradley black at (-62,185) 200 wide, white glow. */
#game-result .game-result-card-name { position:absolute; left:0; top:5px; width:164px; color:#000; font:12px/18px lobby-mincho,serif; letter-spacing:1px; text-align:center; text-shadow:0 0 1px #fff,0 0 1px #fff,0 0 2px #fff; }
#game-result .game-result-card-caption { position:absolute; left:-62px; top:185px; width:200px; color:#000; font:24px/30px bradley,serif; letter-spacing:1px; text-align:right; text-shadow:0 0 1px #fff,0 0 1px #fff,0 0 2px #fff; }
/* ResultCardNumLabel: 24px bradley white, right aligned in 170x40. */
#game-result .game-result-card-num { width:170px; height:40px; color:#fff; font:24px/40px bradley,serif; letter-spacing:1px; text-align:right; }
/* ResultFrame buttons: hit shapes 4..84 around their placements; images keep the original bounds. */
#scene-game #game-result .game-result-button { position:absolute; width:80px; height:80px; background-color:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; transition:none; font-size:0; color:transparent; }
#scene-game #game-result .game-result-button img { position:absolute; max-width:none; pointer-events:none; }
#scene-game #game-result-return { position:absolute; left:576px; top:600px; width:160px; height:32px; background-color:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; transition:none; }

/* FeatInfo: FeatInfoPanel (skill_base.swf, 148x24) per feat; FeatInfoLabel 130x30, 15px minchoB #C0C0C0 centred,
   FeatInfoLabelFlash #FFFF30 while the server has the feat on; fontSizeAdjust shrinks to width - 3. */
#game-feat-info,#game-passive { position:absolute; inset:0; pointer-events:none; }
#game-stage .game-feat-panel { position:absolute; width:148px; height:24px; }
#game-stage .game-feat-label { position:absolute; width:130px; height:30px; overflow:hidden; text-align:center; white-space:nowrap; color:#c0c0c0; font:15px/17px lobby-mincho,serif; pointer-events:auto; outline:0; }
#game-stage .game-feat-label > span { display:inline-block; }
#game-stage .game-feat-label[data-on="true"] { color:#ffff30; }
/* FeatInfoCaption TextArea: 150 wide, white 12px Arial, leading 2, black 0.8 background, shown at alpha 0.8
   (0.1 s Quad.easeOut, hidden in 0.05 s); height textHeight + 16. */
#game-stage .game-feat-caption-area { position:absolute; width:150px; box-sizing:border-box; padding:2px 2px 14px 3px; background:rgba(0,0,0,.8); color:#fff; font:12px/14px Arial,sans-serif; opacity:0; transition:opacity .05s cubic-bezier(.25,.46,.45,.94); pointer-events:none; z-index:1; }
#game-stage .game-feat-caption-area.is-visible { opacity:.8; transition-duration:.1s; }
#game-stage .game-feat-condition { display:grid; grid-template-columns:56px 1fr; padding-left:10px; }
#game-stage .game-feat-condition > span:last-child { white-space:pre-line; }
#game-stage .game-feat-effect { color:#ffff00; white-space:pre-line; }
#game-stage .game-feat-effect-line { padding-left:10px; }
/* PassiveSkillBarImage (skill_passive.swf, 128x16): player bars at x 0, foe mirrored from x 760;
   CharaCardName 11px minchoB white, letterSpacing 1, GlowFilter(black,2,2,8). */
#game-stage .game-passive-bar { position:absolute; left:0; width:128px; height:16px; }
#game-stage .game-passive.is-foe .game-passive-bar { left:760px; transform:scaleX(-1); transform-origin:0 0; }
#game-stage .game-passive-name { position:absolute; width:130px; height:20px; overflow:hidden; white-space:nowrap; color:#fff; font:11px/20px lobby-mincho,serif; letter-spacing:1px; text-shadow:0 0 2px #000,0 0 2px #000,0 0 1px #000; pointer-events:auto; outline:0; }
#game-stage .game-passive.is-foe .game-passive-name { text-align:right; }
/* Caption TextField: height 20, black background; on: border #4CE1FF, text white; off: border white, text #BBB. alpha 0.8. */
#game-stage .game-passive-caption { position:absolute; height:20px; box-sizing:border-box; padding:0 2px; white-space:nowrap; text-align:center; background:#000; color:#bbb; border:1px solid #fff; font:12px/18px 'Times New Roman',serif; opacity:0; pointer-events:none; z-index:1; }
#game-stage .game-passive-caption[data-on="true"] { color:#fff; border-color:#4ce1ff; }
#game-stage .game-passive-caption.is-visible { opacity:.8; }
/* ChatArea / ChatBase (chat_base.swf at 168,560). GameChatArea: white 10px, leading 2, black 0.9 background, alpha 0.7.
   ChatTab / SelectedChatTab: 14px bradley, letterSpacing 2, black / #ff3030, GlowFilter(white,1,2,2,16). */
#game-chat { position:absolute; inset:0; pointer-events:none; }
#game-chat > * { pointer-events:auto; }
#game-stage .game-chat-base { position:absolute; left:168px; top:560px; width:335.95px; height:87.95px; pointer-events:none; }
#game-stage .game-chat-log { position:absolute; left:168px; top:560px; width:285px; height:68px; box-sizing:border-box; padding:2px 3px; overflow-y:auto; overflow-wrap:anywhere; white-space:pre-wrap; background:rgba(0,0,0,.9); opacity:.7; color:#fff; font:10px/12px Verdana,sans-serif; scrollbar-width:thin; scrollbar-color:#888 #222; }
#game-stage .game-chat-log p { margin:0; }
#game-stage .game-chat-log p.is-match { color:#ffff00; }
#scene-game .game-chat-tab { position:absolute; left:452.05px; width:51.95px; height:22.95px; background-color:transparent; border:0; outline:0; margin:0; padding:0; box-shadow:none; transition:none; }
#scene-game .game-chat-tab img { position:absolute; inset:0; width:100%; height:100%; }
#scene-game .game-chat-tab[data-chat-tab="all"] { top:560px; }
#scene-game .game-chat-tab[data-chat-tab="chat"] { top:583px; }
#scene-game .game-chat-tab[data-chat-tab="game"] { top:606px; }
#game-stage .game-chat-label { position:absolute; left:450px; width:60px; height:20px; color:#000; font:14px/20px bradley,serif; letter-spacing:2px; text-align:center; text-shadow:0 0 1px #fff,0 0 1px #fff,0 0 2px #fff,0 0 2px #fff; pointer-events:none; }
#game-stage .game-chat-label[data-selected="true"] { color:#ff3030; }
#game-stage .game-chat-label[data-chat-label="all"] { top:565px; }
#game-stage .game-chat-label[data-chat-label="chat"] { top:588px; }
#game-stage .game-chat-label[data-chat-label="game"] { top:611px; }
/* GameChatInput 258x20 at (169,631): transparent, white, no border. */
#game-chat-form { position:absolute; left:169px; top:631px; width:258px; height:20px; margin:0; }
#scene-game #game-chat-input { width:100%; height:100%; box-sizing:border-box; margin:0; padding:0 1px; border:0; outline:0; background:transparent; color:#fff; font:12px/20px Verdana,sans-serif; }
#scene-game #game-chat-input:disabled { cursor:default; }