/* Shared chrome; gameplay cards are owned by their screen styles. */
:root{--shell-line:#ffffff10;--shell-surface:#18161d;--shell-muted:#ada3b7}
body>header{border-bottom:1px solid var(--shell-line);box-shadow:0 8px 30px #00000018;background:#131217f5}
body>header .brandmark{border-radius:10px;box-shadow:inset 0 1px 0 #fff7,0 5px 20px #e4b96a12}
body>header nav a{position:relative;min-height:44px;display:inline-flex;align-items:center;gap:6px;color:var(--shell-muted)}
body>header nav a.active{color:#f3cf91}
body>header nav a.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:2px;background:#e4b96a}
body>header .account b{font-variant-numeric:tabular-nums;letter-spacing:.01em}
body>header .account img{border:1px solid #e4b96a40;box-shadow:0 0 0 4px #e4b96a08}
body>header .plus{border-radius:9px}
body>aside{border-bottom:1px solid var(--shell-line);background:linear-gradient(180deg,#121116,#16141a)}
body>aside .feeditem{border-radius:10px;border-color:#ffffff0b;box-shadow:inset 0 1px 0 #ffffff03}
body>aside .feeditem p{line-height:1.5}
main>.pagehead{gap:18px;margin-bottom:26px;align-items:center}
main>.pagehead h1{font-size:clamp(34px,4.5vw,56px);line-height:1.03;letter-spacing:.01em;margin-bottom:10px}
main>.pagehead p{color:var(--shell-muted);line-height:1.7;max-width:620px}
main>.pagehead .back{min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--shell-line);padding:10px 14px;border-radius:9px;background:var(--shell-surface)}
body>footer{border-top:1px solid var(--shell-line);background:#111015;gap:20px;padding-top:28px;padding-bottom:28px}
body>footer p{line-height:1.8;color:var(--shell-muted);max-width:620px}
body>footer button{min-height:44px;border:1px solid var(--shell-line);padding:10px 16px;border-radius:9px;background:var(--shell-surface);color:#dcc7a7}
body>header a:focus-visible,body>header button:focus-visible,body>footer button:focus-visible{outline:2px solid #edc888;outline-offset:4px}
@media(max-width:600px){main>.pagehead{align-items:flex-start;gap:12px;flex-wrap:wrap}main>.pagehead p{max-width:none;font-size:12px}body>footer{gap:14px}body>footer p{font-size:11px}body>header .account img{box-shadow:none}}

/* Shared information dialog and transient feedback. */
#modal{width:min(92vw,580px);max-height:calc(100dvh - 48px);padding:38px;border:1px solid #e4b96a30;border-radius:20px;background:radial-gradient(ellipse at top right,#e4b96a0b,transparent 65%),#1b1821;box-shadow:0 30px 100px #0008;overflow:auto}
#modal::backdrop{background:#08070dc9;backdrop-filter:blur(8px)}
#modal .close{display:grid;place-items:center;position:absolute;top:12px;right:12px;width:44px;height:44px;border:1px solid #ffffff13;border-radius:10px;background:#ffffff04;color:#d5c8df;font-size:26px}
#modalbody>.eyebrow{padding-right:32px;font-size:9px;line-height:1.8}
#modalbody h2{font-size:34px;line-height:1.15;margin:18px 26px 18px 0}
#modalbody p{font-size:13px;line-height:1.85;color:#bcb1c8}
#modal :is(button,a,input,select):focus-visible{outline:2px solid #efcb8a;outline-offset:3px}
#toast{max-width:min(620px,calc(100vw - 32px));width:max-content;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.6;padding:15px 22px;border:1px solid #f9dda0;border-radius:12px;background:#e6c48a;color:#231c14;box-shadow:0 12px 40px #0005;font-size:12px}
@media(max-width:760px){#toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}}
@media(max-width:480px){#modal{padding:28px 22px;border-radius:15px}#modalbody h2{font-size:29px;margin-right:25px}#modalbody>.eyebrow{padding-right:36px}#toast{padding:12px 16px;font-size:11px}}
@media(prefers-reduced-motion:reduce){#toast{transition:none}}
.reduce-motion #toast{transition:none}
#modalbody>.dialog-feedback{margin:24px 0 20px;padding:14px 16px;border:1px solid #e4b96a45;border-left:3px solid #e4b96a;border-radius:9px;background:#29221d;color:#f1d5a8;font-size:12px;line-height:1.7;overflow-wrap:anywhere}

/* Case item inspector: retain the exact item artwork and its proportions. */
#modal .skin-inspector>.eyebrow{padding-right:30px;line-height:1.8;font-size:9px}
#modal .skin-inspector>svg{width:100%;max-width:440px;display:block;margin:14px auto 20px;background:radial-gradient(ellipse,color-mix(in srgb,var(--rarity) 10%,transparent),transparent 70%)}
#modal .skin-inspector>small{display:block;font-size:11px;color:#b9a9c6;line-height:1.7}
#modal .skin-inspector h2{font-size:36px;margin:6px 0 24px;overflow-wrap:anywhere}
#modal .skin-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#modal .skin-facts>div{min-width:0;padding:18px 14px;border:1px solid #ffffff10;border-radius:12px;background:#121016}
#modal .skin-facts span{display:block;font-size:10px;line-height:1.6;color:#ab9bb7}
#modal .skin-facts b{display:block;margin-top:9px;font-size:21px;color:#edcf9c;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#modal .skin-owned{padding:12px 0;border-bottom:1px solid #ffffff0d;font-size:12px}
#modal .skin-inspector-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
#modal .skin-inspector-actions .btn{flex:1 1 170px;min-height:46px;border-radius:9px;line-height:1.5;white-space:normal}
#modal .inspector-reference{margin-top:20px;padding:16px;border:1px solid #ffffff0e;border-radius:12px;background:#ffffff03;font-size:12px;line-height:1.8;color:#c7b9d2;overflow-wrap:anywhere}
@media(max-width:480px){#modal .skin-facts>div{padding:14px 10px}#modal .skin-facts b{font-size:18px}#modal .skin-inspector h2{font-size:30px}#modal .skin-inspector-actions .btn{flex-basis:100%}}