/* Character-only approved black/gold modular frame. No bag layout overrides. */
body #character-frame-dialog{--cf-u:min(.66px,calc((100dvh - 24px)/1456),calc((100vw - 24px)/1088));position:fixed;inset:0;margin:auto;width:calc(1088 * var(--cf-u));height:calc(1456 * var(--cf-u));max-width:none;max-height:none;padding:0;border:0;background:#000;color:#f5e8d4;overflow:hidden;box-shadow:0 20px 80px #000b;font-family:inherit}
#character-frame-dialog::backdrop,#character-item-dialog::backdrop{background:#020103ba}
.cf-frame,.cf-preview{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.cf-frame{z-index:4;object-fit:fill}.cf-preview{z-index:2}.cf-pedestal{position:absolute;left:12%;top:70%;width:76%;height:21%;object-fit:contain;z-index:1;pointer-events:none}
#character-frame-title{position:absolute;z-index:5;top:4%;left:26%;width:48%;margin:0;text-align:center;font-size:clamp(27px,calc(65 * var(--cf-u)),44px);line-height:1.35;color:#f9dda0;font-weight:700}
.cf-name{position:absolute;z-index:3;inset:11.2% 24% auto;margin:0;padding-bottom:calc(12 * var(--cf-u));border-bottom:1px solid #aa843f;font-family:Georgia,serif;color:#fff6e7;font-size:clamp(18px,calc(37 * var(--cf-u)),27px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-close,.cf-rotation button{position:absolute;z-index:6;padding:0;display:grid;place-items:center;color:#f9d595;background:#150b20;border:2px solid #d7a747;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);box-shadow:inset 0 0 0 4px #32212e;touch-action:manipulation}.cf-close{right:3.7%;top:4.2%;width:8%;height:6%}.cf-close svg,.cf-rotation svg,.cf-item-close svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.cf-close:hover,.cf-rotation button:hover{background:#4a153c}.cf-close:focus-visible,.cf-rotation button:focus-visible,.cf-slot:focus-visible{outline:3px solid #e8a5ff;outline-offset:-6px}
.cf-slot{position:absolute;z-index:5;top:calc(20% + var(--row) * 14.6%);width:17%;height:13%;padding:calc(8 * var(--cf-u));border:0;border-radius:0;background:linear-gradient(135deg,#fff0a8,#83501e 15%,#1c101b 16%,#1c101b 84%,#b17b34 85%,#fff0a8);clip-path:polygon(10% 0,90% 0,100% 10%,100% 90%,90% 100%,10% 100%,0 90%,0 10%);color:#f8edf6;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;touch-action:manipulation}.cf-slot::before{content:'';position:absolute;inset:calc(5 * var(--cf-u));background:linear-gradient(145deg,#231526,#09070d 65%,#2d153a);clip-path:inherit;z-index:-1}.cf-left{left:7%}.cf-right{right:7%}.cf-slot-art{position:relative;display:grid;place-items:center;width:100%;min-height:0;flex:1}.cf-slot-art>svg{height:65%;width:65%;fill:none;stroke:#c4ad83;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.cf-slot-art>img{width:100%;height:100%;max-height:calc(128 * var(--cf-u));object-fit:contain}.cf-slot-label{font-size:clamp(13px,calc(28 * var(--cf-u)),20px);line-height:1.3;white-space:nowrap;border-top:1px solid #96794f5c;width:100%;text-align:center}.cf-slot-state{font-size:clamp(11px,calc(17 * var(--cf-u)),12px);line-height:1.3;color:#d5bddc}.cf-slot-state:empty{display:none}.cf-slot.equipped{background:linear-gradient(135deg,#ffe99b,#a36628 15%,#ad3bea 16%,#331441 84%,#f54260 85%,#fff0aa)}.cf-slot:hover:not(:disabled)::before{background:#34203d}.cf-slot:disabled{cursor:default}.cf-slot:disabled .cf-slot-art{opacity:.5}
.cf-life{position:absolute;bottom:0;left:3%;width:94%;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:clamp(11px,calc(23 * var(--cf-u)),16px);line-height:1.25;color:#fff}.cf-life i{display:block;width:100%;height:calc(10 * var(--cf-u));min-height:4px;border:1px solid #729d65;border-radius:10px;background:#10150e;overflow:hidden}.cf-life b{display:block;height:100%;background:#5fe85b}.cf-life[data-tone=mid] b{background:#ffdc59}.cf-life[data-tone=low] b{background:#f35d66}.cf-life[data-tone=low] i{border-color:#f35d66}
.cf-rotation{position:absolute;z-index:5;inset:82% 24% auto;display:flex;justify-content:space-between;height:7%}.cf-rotation button{position:relative;width:20%;height:100%}.cf-caption{position:absolute;z-index:5;bottom:2%;left:20%;width:60%;margin:0;text-align:center;font-size:clamp(11px,calc(24 * var(--cf-u)),17px);line-height:1.5;color:#eddbb8;white-space:nowrap}.cf-loading{position:absolute;z-index:3;left:26%;right:26%;top:42%;padding:12px;background:#0c0711db;text-align:center;color:#e9d7ee;font-size:14px}.cf-loading[hidden]{display:none}
body #character-item-dialog{position:fixed;inset:0;margin:auto;width:min(470px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:18px;border:2px solid #a98447;border-radius:8px;background:#0b0710;color:#f5e7db;box-shadow:0 18px 70px #000c;overflow:auto;font-family:inherit;scrollbar-color:#896540 #160c1d;scrollbar-width:thin}
#character-item-dialog>header{display:flex;align-items:center;gap:12px;margin-bottom:12px}#cf-item-title{font-size:21px;line-height:1.4;margin:0;flex:1;color:#ffe0a3}.cf-item-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #b98d53;border-radius:4px;background:#221028;color:#f9dbad}.cf-owned{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.cf-owned button{padding:5px 9px;border:1px solid #7b5469;border-radius:4px;background:#251031;color:#f1deea;font-size:13px;line-height:1.4}.cf-owned button:focus-visible,.cf-item-close:focus-visible{outline:2px solid #e9a6ff;outline-offset:2px}.cf-no-items{font-size:16px;line-height:1.6}.cf-no-items[hidden],.cf-detail-host[hidden]{display:none}
#character-item-dialog .adventure-details{padding:0;border:0;overflow:visible;max-height:none;background:none;color:#eadfe9;font-size:15px;line-height:1.6;min-width:0}#character-item-dialog .adventure-detail-head{gap:15px;margin-bottom:16px}#character-item-dialog .adventure-detail-head h3{font-size:23px;color:#ffe2ac;line-height:1.4}#character-item-dialog .adventure-detail-head p,#character-item-dialog .adventure-description{color:#d4c0d9;font-size:15px}#character-item-dialog .adventure-item-stats{font-size:15px;color:#eedfee}#character-item-dialog .adventure-item-stats>div{padding:7px 0;border-bottom:1px solid #735269}#character-item-dialog dt{color:#d5bddb}#character-item-dialog dd{color:#fff1db}#character-item-dialog .adventure-primary{padding:9px 15px;font-size:17px;border:1px solid #d5a34f;border-radius:5px;background:#511658;color:#ffece9;min-height:40px}#character-item-dialog .adventure-detail-actions>button:last-child{display:none}#character-item-dialog .bag-section-title{color:#f3d49d;font-size:18px}#character-item-dialog .bag-refine-line{font-size:15px;color:#e4cce9}#character-item-dialog .adventure-detail-actions{margin-top:14px}#character-item-dialog .adventure-equipped-status{color:#b0e7a0;font-size:14px}#character-item-dialog .adventure-item-art{width:94px;height:100px;flex:none}
@media(max-width:480px) and (min-height:621px){.cf-slot{width:21%;height:13.3%}.cf-left{left:6%}.cf-right{right:6%}.cf-slot-art>img{max-height:calc(100 * var(--cf-u))}.cf-caption{font-size:11px}.cf-name{font-size:18px}}
/* Landscape retains side ordering and readable live labels without stretching the portrait artwork. */
@media(max-height:620px){body #character-frame-dialog{--cf-u:1px;width:min(860px,calc(100vw - 16px));height:calc(100dvh - 16px);max-height:570px;display:grid;grid-template-rows:48px minmax(0,1fr) 30px;border:2px solid #a78348;border-radius:7px;background:#000}.cf-frame{display:none}#character-frame-title{top:7px;left:12px;width:auto;text-align:left;font-size:24px}.cf-name{inset:10px 160px auto;border:0;font-size:18px;padding:0;line-height:28px}.cf-close{top:5px;right:8px;width:36px;height:36px}.cf-preview{top:48px;left:calc(50% - 132px);width:264px;height:calc(100% - 78px);object-fit:contain}.cf-pedestal{left:calc(50% - 138px);top:auto;bottom:48px;width:276px;height:88px}.cf-slot{top:calc(51px + var(--row) * ((100% - 85px)/4));width:125px;height:calc((100% - 98px)/4);padding:5px;display:grid;grid-template-columns:47px 1fr;grid-template-rows:1fr auto;column-gap:5px;row-gap:0}.cf-left{left:16px}.cf-right{right:16px}.cf-slot-art{height:100%;grid-row:1/3;min-width:0}.cf-slot-art>svg{width:85%;height:85%}.cf-slot-art>img{max-height:100%;height:100%;max-width:100%}.cf-slot-label{border:0;font-size:13px;align-self:end;white-space:normal}.cf-slot-state{font-size:11px;align-self:start}.cf-life{font-size:10px;gap:0}.cf-life i{height:4px}.cf-rotation{inset:auto calc(50% - 130px) 8px;height:30px}.cf-rotation button{width:34px}.cf-caption{bottom:10px;left:calc(50% - 92px);width:184px;font-size:11px}.cf-loading{left:34%;right:34%;font-size:12px}.cf-item-art{width:70px}}
@media(prefers-reduced-motion:reduce){.character-frame *,.character-item-dialog *{animation:none;transition:none}}

.cf-slot::after{content:'';position:absolute;inset:0;background:url('/assets/ui/character-frame-v1/slot.svg') center/100% 100% no-repeat;pointer-events:none}.cf-caption{bottom:7.7%}.cf-name{padding-top:0;padding-left:0;padding-right:0;border-top:0;border-left:0;border-right:0;background:transparent;cursor:pointer;touch-action:manipulation}.cf-name:hover{color:#ffe2a0}.cf-name:focus-visible{outline:2px solid #deacfa;outline-offset:2px}
@media(max-height:620px){.cf-caption{bottom:10px}.cf-name{padding:0}}

/* Reviewer fix batch: modular authored frame in landscape; one slot rim; normal-flow shared details. */
#character-item-dialog .adventure-details{position:static;display:block;box-shadow:none;border-radius:0;min-height:0;width:auto}
#character-item-dialog .adventure-detail-actions{position:static;inset:auto;display:flex;gap:8px;padding:0;margin:16px 0 0}
#character-item-dialog .adventure-description{position:static;margin:12px 0 0;padding:0;line-height:1.65}
@media(max-height:620px){body #character-frame-dialog{border-radius:0;border-image-source:url('/assets/ui/character-frame-v1/frame.webp');border-image-slice:215 120 205 120;border-image-width:64px 35px 44px;border-image-repeat:stretch;background:#000}#character-frame-title{top:23px;left:calc(50% - 100px);width:200px;text-align:center;font-size:20px;line-height:1.2}.cf-name{inset:58px 180px auto;line-height:20px;font-size:16px}.cf-preview{top:64px;height:calc(100% - 94px)}.cf-slot{top:calc(70px + var(--row) * ((100% - 106px)/4));height:calc((100% - 128px)/4);background:#191019}.cf-slot.equipped{background:#341735}.cf-left{left:40px}.cf-right{right:40px}.cf-close{top:17px;right:28px;width:32px;height:32px}.cf-caption{bottom:12px}.cf-rotation{bottom:9px}}

@media(max-height:620px){.cf-caption{bottom:30px}}
/* The landscape rule above (@media max-height:620px) sets display:grid on #character-frame-dialog, which also beat the
   browser's dialog:not([open]){display:none}: on every screen 620 px tall or less (all landscape phones) the CLOSED
   character window stayed on screen over the game and took the taps meant for the joystick. Closed = hidden again. */
body #character-frame-dialog:not([open]){display:none}