.duel-frame { --rim: linear-gradient(135deg, #0284c7 0%, #1e293b 30%, #0369a1 60%, #38bdf8 100%); --accent: #38bdf8; position: relative; box-sizing: border-box; border: 6px solid transparent; border-radius: 12px; overflow: hidden; background: linear-gradient(#07090c, #07090c) padding-box, var(--rim) border-box; box-shadow: 0 0 20px rgba(56, 189, 248, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.7); transition: border 0.25s ease, box-shadow 0.25s ease; }
.duel-frame[data-frame="classic"] { --accent: #38bdf8; --rim: linear-gradient(135deg, #38bdf8 0%, #0284c7 25%, #0f172a 50%, #0369a1 75%, #38bdf8 100%); box-shadow: 0 0 24px rgba(56, 189, 248, 0.25), inset 0 0 35px rgba(0, 0, 0, 0.8); }
.duel-frame[data-frame="classic"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(56, 189, 248, 0.35); border-radius: inherit; z-index: 3; }
.duel-frame:not([data-frame="classic"])::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 2px solid var(--accent); clip-path: polygon(0 0, 16% 0, 16% 2%, 2% 2%, 2% 16%, 0 16%, 0 0, 100% 0, 100% 16%, 98% 16%, 98% 2%, 84% 2%, 84% 0, 100% 0, 100% 100%, 84% 100%, 84% 98%, 98% 98%, 98% 84%, 100% 84%, 100% 100%, 0 100%, 0 84%, 2% 84%, 2% 98%, 16% 98%, 16% 100%, 0 100%); z-index: 3; }
.duel-frame[data-frame="electric"] { --accent: #d4ff55; --rim: repeating-linear-gradient(135deg, #c8fa46 0 14px, #1a2814 14px 19px, #62ac29 19px 22px, #111315 22px 28px); }
.duel-frame[data-frame="coral"] { --accent: #ffb1a4; --rim: repeating-linear-gradient(45deg, #ff695e 0 24px, #9e243b 24px 27px, #ffb1a4 27px 30px, #222126 30px 40px); border-radius: 8px 0 8px 0; }
.duel-frame[data-frame="ice"] { --accent: #bdfbff; --rim: repeating-linear-gradient(90deg, #102a32 0 15px, #66dce8 15px 18px, #f0ffff 18px 20px, #238ca4 20px 40px); }
.duel-frame[data-frame="checker"] { --accent: #ffda44; --rim: repeating-conic-gradient(#f5f7fa 0% 25%, #111315 0% 50%) 0 0 / 16px 16px; }
.duel-frame[data-frame="gold"] { --accent: #ffe6a0; --rim: linear-gradient(125deg, #6c4914 0%, #e8b74d 18%, #fff0b0 25%, #977024 33%, #e8b74d 50%, #fff0b0 65%, #977024 74%, #f0cb72 90%, #6c4914 100%); }
.duel-frame[data-frame="rose"] { --accent: #ffc7e0; --rim: repeating-linear-gradient(135deg, #641c4b 0 12px, #d84482 12px 24px, #ffb6d7 24px 27px, #ad285c 27px 36px); }
.duel-frame[data-frame="mint"] { --accent: #b4ffcf; --rim: repeating-linear-gradient(0deg, #10382b 0 10px, #42c997 10px 13px, #adf6c9 13px 15px, #228064 15px 28px); }
.duel-frame[data-frame="comic"] { --accent: #fff; --rim: repeating-linear-gradient(135deg, #111315 0 8px, #ff695e 8px 18px, #111315 18px 22px, #c8fa46 22px 38px, #111315 38px 42px, #66dce8 42px 52px); border-radius: 0; }
.duel-frame[data-frame="chrome"] { --accent: #e4f1ff; --rim: repeating-linear-gradient(155deg, #383e46 0 7px, #929eac 7px 10px, #f1f7ff 10px 13px, #65727e 13px 20px, #b8c5d3 20px 24px); }
.frames-heading { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.frames-heading h1 { margin-bottom: 0; }
.frame-feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 32px; padding-block: 24px; border-block: 1px solid #899198; }
.frame-preview { width: 100%; aspect-ratio: 4 / 3; }
.frame-preview img, .frame-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-summary { min-width: 0; }
.frame-summary h2 { margin-top: 0; }
.frame-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 24px 0; }
.frame-grid li { min-width: 0; }
.frame-choice { display: block; padding: 12px; border: 2px solid #899198; border-radius: 8px; text-decoration: none; height: 100%; }
.frame-choice[aria-current="true"] { border-color: #111315; background: #e4e8eb; }
.frame-choice:hover { border-color: #111315; }
.frame-thumb { width: 100%; aspect-ratio: 4 / 3; }
.frame-name, .frame-access { display: block; overflow-wrap: anywhere; }
.frame-name { font-weight: 700; margin-top: 12px; }
.frame-access { font-size: 14px; color: #515960; margin-top: 4px; }
@media (max-width: 700px) { .frame-feature { grid-template-columns: minmax(0, 1fr); gap: 16px; } .frame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 360px) { .frame-grid { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) { .duel-frame, .frame-choice { border-color: CanvasText; } .frame-choice[aria-current="true"] { outline: 3px solid Highlight; } }
.frame-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid #707880; border-radius: 8px; background: #f5f7fa; color: #111315; overflow-y: auto; }
.frame-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.frame-dialog h2 { font-size: 24px; margin: 0; }
.frame-dialog header, .frame-dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.frame-dialog .frame-preview { margin-block: 20px; max-height: 280px; }
.frame-dialog select { width: 100%; min-height: 44px; padding: 8px; margin-top: 8px; color: #111315; background: #fff; border: 1px solid #707880; border-radius: 4px; font-size: 16px; }
.frame-dialog button { min-height: 44px; padding: 8px 16px; border: 1px solid #111315; border-radius: 6px; background: #fff; color: #111315; font-size: 16px; }
.frame-dialog button[data-frame-apply] { background: #c8fa46; font-weight: 700; }
.frame-dialog button:disabled { background: #e4e8eb; color: #515960; border-style: dashed; }
.frame-dialog p { margin-block: 16px; overflow-wrap: anywhere; }
.frame-dialog :focus-visible { outline: 3px solid #111315; outline-offset: 3px; }
.frame-picker-trigger { margin-bottom: 16px; }