.opening-view{height:100%;overflow-y:auto;scroll-padding-bottom:100px;padding:16px clamp(16px,4vw,48px);background:#292727;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0,rgba(0,0,0,.09) 1px,transparent 2px,transparent 23px,rgba(255,255,255,.018) 25px,transparent 29px)}
.opening-shell{--opening-gold:#d9b77a;--opening-line:rgba(220,193,141,.25);color:#eee6d5;max-width:1260px;margin:auto;font-family:var(--sans, sans-serif)}
.opening-shell *{box-sizing:border-box}.opening-shell button{font:inherit;cursor:pointer}.opening-shell button:disabled{cursor:default;opacity:.5}
.opening-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:8px 0 18px;border-bottom:1px solid var(--opening-line)}
.opening-back{justify-self:start;background:none;border:0;padding:9px 0;color:#b5bbae}.opening-title{text-align:center}.opening-title span{display:block;color:var(--opening-gold);font-size:11px;letter-spacing:.3em}.opening-title h1{font:500 clamp(25px,3vw,36px) var(--serif,serif);letter-spacing:.18em;margin:2px 0 0}.opening-points{justify-self:end;text-align:right}.opening-points small{display:block;color:#aab4a5;font-size:11px}.opening-points strong{color:var(--opening-gold);font:500 26px var(--serif,serif)}
.opening-content{display:grid;gap:22px;padding:20px 0 28px}.opening-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.opening-section-heading h2{margin:0;font:500 17px var(--serif,serif);letter-spacing:.08em}.opening-section-heading h2 span{color:#a7ae9d;font:12px var(--sans,sans-serif)}.opening-selected,.opening-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.opening-empty{margin:0;padding:20px;color:#9ca99a;border:1px dashed var(--opening-line);grid-column:1/-1;text-align:center}
.opening-card{--rarity-rgb:157,167,159;position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:220px;text-align:left;padding:20px;border:1px solid rgba(var(--rarity-rgb),.62);border-radius:5px;background:radial-gradient(ellipse at 15% 0,rgba(var(--rarity-rgb),.15),transparent 65%),linear-gradient(155deg,#252a25,#191d1a);color:#eee6d5;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.25);transition:border-color .18s,box-shadow .18s,transform .18s}
.opening-shell [data-rarity=mundane]{--rarity-rgb:151,157,155}
.opening-shell [data-rarity=common]{--rarity-rgb:217,223,213}
.opening-shell [data-rarity=uncommon]{--rarity-rgb:116,203,146}
.opening-shell [data-rarity=rare]{--rarity-rgb:96,183,247}
.opening-shell [data-rarity=epic]{--rarity-rgb:197,143,242}
.opening-shell [data-rarity=legendary]{--rarity-rgb:244,201,92}
.opening-shell [data-rarity=mythic]{--rarity-rgb:255,125,139}
.opening-card::before{content:'';position:absolute;inset:6px;border:1px solid rgba(var(--rarity-rgb),.13);border-radius:2px;pointer-events:none}
.opening-card::after{content:'';position:absolute;inset:3px;pointer-events:none;background:linear-gradient(rgb(var(--rarity-rgb)) 0 0) left top/17px 2px no-repeat,linear-gradient(rgb(var(--rarity-rgb)) 0 0) left top/2px 17px no-repeat,linear-gradient(rgb(var(--rarity-rgb)) 0 0) right bottom/17px 2px no-repeat,linear-gradient(rgb(var(--rarity-rgb)) 0 0) right bottom/2px 17px no-repeat;opacity:.6}
.opening-card[data-rarity=epic]::before{border-color:rgba(var(--rarity-rgb),.28)}
.opening-card[data-rarity=legendary],.opening-card[data-rarity=mythic]{box-shadow:0 0 18px rgba(var(--rarity-rgb),.12),inset 0 0 25px rgba(var(--rarity-rgb),.04);border-width:2px}
.opening-card[data-rarity=legendary]::before,.opening-card[data-rarity=mythic]::before{border-color:rgba(var(--rarity-rgb),.35)}
.opening-card[data-rarity=mythic]::before{border-style:double;border-width:3px;inset:5px}
.opening-card:hover:not(:disabled){transform:translateY(-2px);border-color:rgb(var(--rarity-rgb));box-shadow:0 0 18px rgba(var(--rarity-rgb),.23)}
.opening-card.is-selected{border-color:rgb(var(--rarity-rgb));background:radial-gradient(ellipse at 15% 0,rgba(var(--rarity-rgb),.24),transparent 70%),#242822;box-shadow:0 0 0 2px rgba(var(--rarity-rgb),.25),0 0 20px rgba(var(--rarity-rgb),.12)}
.opening-card.is-selected::after{opacity:1}
.opening-card:focus-visible{outline:2px solid rgb(var(--rarity-rgb));outline-offset:4px}
.opening-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.opening-rarity{padding:3px 9px;border:1px solid rgba(var(--rarity-rgb),.45);background:rgba(var(--rarity-rgb),.13);border-radius:2px;color:rgb(var(--rarity-rgb));font-weight:600;letter-spacing:.1em}
.opening-card[data-rarity=legendary] .opening-rarity::before,.opening-card[data-rarity=mythic] .opening-rarity::before{content:'✦';margin-right:5px}
.opening-card-cost{color:#d3c5a9;white-space:nowrap;font-variant-numeric:tabular-nums}
.opening-card-kind{color:#a5afa2;font-size:12px}
.opening-card>strong{font:500 22px var(--serif,serif);color:rgb(var(--rarity-rgb));overflow-wrap:anywhere}
.opening-card-description{color:#d1d1c3;font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.opening-card-effects{display:flex;flex-wrap:wrap;gap:6px;color:#d6d8c4;font-size:13px}
.opening-card-effects span{background:rgba(var(--rarity-rgb),.07);padding:3px 7px;border:1px solid rgba(var(--rarity-rgb),.15);border-radius:3px}
.opening-card-action{margin-top:auto;padding-top:12px;border-top:1px solid rgba(var(--rarity-rgb),.2);color:rgb(var(--rarity-rgb));font-size:13px}
.opening-shell .opening-card.is-unaffordable{opacity:1}
.opening-shell .opening-card.is-selected:disabled{opacity:.85}
.opening-draw.is-free{border-color:#b7d39c;color:#def0c8;background:linear-gradient(#39452d,#27321f)}
@media(prefers-reduced-motion:reduce){.opening-card{transition:none}.opening-card:hover:not(:disabled){transform:none}}
.opening-draw,.opening-confirm,.opening-error button{min-height:40px;padding:8px 16px;border:1px solid #a88758;border-radius:4px;background:#384033;color:#f3e5c9}.opening-draw:hover:not(:disabled){background:#4a503b}.opening-footer{position:static;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;background:rgba(19,32,25,.96);border:1px solid var(--opening-line);box-shadow:0 -8px 24px rgba(0,0,0,.18);color:#b5bfaf}.opening-footer strong{color:var(--opening-gold)}.opening-confirm{min-width:140px;background:#b65c43;border-color:#d18260;color:#fff5e9;font-family:var(--serif,serif);font-size:15px;letter-spacing:.08em}.opening-confirm:hover:not(:disabled){background:#cd7051}.opening-error{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:9px 12px;border:1px solid #ae6b5b;background:#472e29;color:#f0c3b5}.opening-error button{min-height:36px;padding:5px 12px}
@media(max-width:640px){.opening-header{padding-bottom:12px}.opening-title h1{font-size:24px}.opening-content{gap:18px;padding:16px 0 28px}.opening-selected,.opening-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.opening-card{min-height:175px;padding:11px;gap:7px}.opening-card>strong{font-size:17px}.opening-card-description{font-size:13px}.opening-footer{padding:10px}.opening-confirm{min-width:120px}.opening-points strong{font-size:22px}}
@media(max-width:380px){.opening-selected,.opening-grid{grid-template-columns:1fr}.opening-card{min-height:150px}}

.opening-cards:not([hidden]){display:grid;gap:24px}.opening-shell .opening-bonds:empty{display:none}
.opening-shell .bond-creation button{min-height:40px;padding:8px 18px;border:1px solid #a98a52;border-radius:4px;background:linear-gradient(#51432c,#30291e);color:#e8d4aa;font:15px var(--serif,serif)}.opening-shell .bond-creation button:hover:not(:disabled){border-color:#e0bc79}.opening-shell .bond-creation input,.opening-shell .bond-creation textarea{background:#252720;border-color:#756340;color:#eee6d5;font-size:16px}.opening-shell .bond-creation summary{color:#dfc389;min-height:44px;display:flex;align-items:center}.opening-shell .bond-creation summary::before{content:'＋';margin-right:8px}.opening-shell .bond-creation details[open] summary::before{content:'−'}