/* Illustrated interface. One spacing scale owns the desktop composition. */
/* Align the subject, not the source image edge. Corsair's headroom is 1/32 of the
   portrait window width. Cover tall windows without changing that headroom.
   Absolute containment also works in hidden tabs and updates on every resize. */
.artclip[data-portrait]{container-type:size}
.artclip[data-portrait]>img.artimg{
  --portrait-height:max(150cqw,calc(75cqw/var(--portrait-center)),calc(75cqw/(1 - var(--portrait-center))),calc((100cqh - 3.125cqw)/(1 - var(--portrait-head))));
  inset:auto;left:50%;top:calc(3.125cqw - var(--portrait-head)*var(--portrait-height));
  width:calc(var(--portrait-height)*2/3);height:var(--portrait-height);max-width:none;
  object-fit:fill;transform:translateX(calc(-100%*var(--portrait-center)));
}
.shell-avatar{display:none}
.shell-profile-details{display:contents}
body.pc{--shell-gap:16px;--shell-nav-width:108px;background-size:auto 125%;background-position:center bottom}
body.pc::before{background:linear-gradient(180deg,#06132218,#09121d42)}
body.pc .phone{grid-template-rows:calc(var(--shell-nav-width) + 32px) minmax(0,1fr);padding-bottom:20px}
body.pc .top{padding:16px 0}
/* The information panel grows from 266 to 346px; the avatar still matches navigation. */
body.pc .top .center{position:static;flex-basis:470px;height:var(--shell-nav-width);padding:0 0 0 calc(var(--shell-nav-width) + 16px);background:none;border:0;border-image:none;box-shadow:none}
body.pc .shell-profile-details{display:block;width:100%;height:100%;box-sizing:border-box;padding:10px 14px;border:1px solid #8498b866;border-radius:5px;background:linear-gradient(125deg,#1e2c41f5,#0d182bef);box-shadow:inset 0 1px #d7e5ff16,0 4px 12px #0005}
body.pc .top .center::before{display:none}
body.pc .shell-avatar{display:block;position:absolute;left:0;top:16px;width:var(--shell-nav-width);height:var(--shell-nav-width);box-sizing:border-box;background:#192334 url('../cards/lion_01.webp') 50% 10%/150% auto no-repeat;border:1px solid #a5adbb;box-shadow:0 4px 12px #0008}
body.pc .shell-avatar::after{content:'';position:absolute;inset:0;border:18px solid transparent;border-image:url('illustrated/frame.webp') 16% stretch;pointer-events:none}
body.pc .top .shell-profile-name{font-size:22px;height:28px;line-height:28px;text-shadow:0 2px 4px #000}
body.pc .top .lvl{position:relative;padding-left:84px;height:36px;font-size:15px}
body.pc .top .lvl .star{display:none}
body.pc .top #tb-lvl{position:absolute;left:-2px;top:-3px;display:grid;place-items:center;width:76px;height:62px;background:url('illustrated/player-level.webp') center/contain no-repeat;color:#f2f5ff;font-size:24px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #061020}
body.pc .top .xp{width:100%;height:8px;margin-left:0;border-color:#8298b0;background:#0c1730}
body.pc .top .xp i{background:linear-gradient(#8ed4f7,#417db4);box-shadow:inset 0 1px #d0f2ff}
body.pc .shell-xp{display:block;margin-left:84px;color:#d5e2f5;font-size:15px;font-weight:500;line-height:20px;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}
body.pc .top .cons .c,body.pc .wallet .w{height:46px;border-color:#8196b8;background:linear-gradient(#243149,#11192c 75%);box-shadow:inset 0 1px #d7e5ff38,0 5px 9px #050b1da8}
body.pc .top .res-ic{width:38px;height:38px;margin-right:7px;object-fit:contain}
body.pc #helpbtn{font-size:0;background:url('illustrated/help.webp') center/32px no-repeat;border:0;box-shadow:none}

body.pc .screen{border-radius:6px;background-image:linear-gradient(120deg,#202d43e8,#101b2bf2 72%),var(--shell-steel);background-size:auto,360px 360px}
body.pc .screen .shead{margin:0;border-bottom:0}
body.pc .shead h1{font-weight:600;letter-spacing:-.025em}
body.pc .shell-subtitle{color:#a6b3ce;font-weight:500}
body.pc .nav{background-image:linear-gradient(125deg,#273249e8,#121c2af3),var(--shell-steel)}
body.pc .nav button{height:clamp(108px,14vh,148px);gap:8px}
body.pc .nav button[data-go] img.ng{width:76px;height:76px;object-fit:contain}
body.pc .nav button:not(.active) img.ng{filter:drop-shadow(0 4px 2px #0009)}
body.pc .nav button.active{background:radial-gradient(ellipse at 50% 25%,#42647055,transparent 75%),linear-gradient(#1e3a4a,#132738)}
body.pc .nav button::after{font-weight:500;font-size:15px}

/* The deck uses the available height, with 16px between its main blocks. */
body.pc #deck .dscroll{padding:16px;scrollbar-gutter:auto}
body.pc #deck .shead{padding:0!important}
body.pc #deck[data-workshop="deck"] .dscroll{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(420px,1.15fr);grid-template-rows:auto minmax(224px,1fr) 48px auto;gap:var(--shell-gap);overflow-y:auto}
body.pc #deck[data-workshop="deck"] :is(.shead,#deckrow,#work-deck){grid-column:1/-1}
body.pc #deck[data-workshop="deck"] .manabar{grid-column:1;height:48px}
body.pc #deck[data-workshop="deck"] .modes{grid-column:2;width:100%;max-width:none;gap:16px}
body.pc #deck[data-workshop="deck"] .mode{gap:5px}
body.pc #deck[data-workshop="deck"] .mode .mimg{width:30px;height:30px}
body.pc #deck[data-workshop="deck"] .mode::after{font-size:15px}
body.pc #deck[data-workshop="deck"] #top-deck{display:contents}
body.pc .deckrow{gap:clamp(14px,1.55vw,28px);padding:0;margin:0;min-height:0}
/* Hand cards keep a portrait silhouette. Fit both axes; never stretch them to
   consume leftover row width after reserving room for the collection. */
body.pc #deckrow{--hand-gap:clamp(14px,1.55vw,28px);container-type:size;display:flex;gap:var(--hand-gap);justify-content:center;align-items:flex-end;flex:1}
body.pc #deckrow .ucard{flex:none;box-sizing:border-box;width:min(calc((100cqw - 4*var(--hand-gap))/5),calc(100cqh*5/7));height:auto;aspect-ratio:5/7;display:flex;flex-direction:column;min-height:0}
body.pc #deckrow .ucard .art{flex:1;height:auto;min-height:0}
body.pc #deckrow .ucard.empty{min-height:0}
body.pc .ucard:has(>.shell-frame){padding:18px;border-radius:12px;background:linear-gradient(125deg,#3b485b,#111c2a);box-shadow:0 4px 8px #0008}
body.pc .shell-frame{border-image:url('illustrated/frame.webp') 16% stretch}
body.pc .shell-frame[data-rarity="uncommon"]{filter:sepia(.8) saturate(1.7) hue-rotate(65deg)}
body.pc .shell-frame[data-rarity="rare"]{filter:sepia(1) saturate(2.4) hue-rotate(166deg)}
body.pc .shell-frame[data-rarity="heroic"]{filter:sepia(1) saturate(2.2) hue-rotate(220deg)}
body.pc .shell-frame[data-rarity="legendary"]{filter:sepia(1) saturate(2)}
body.pc .ucard .artclip{border-radius:1px}
body.pc .ucard .artimg{filter:saturate(.97) brightness(1.02)}
body.pc .shell-badge,body.pc .shell-mana{width:clamp(46px,4.3vw,74px);height:clamp(46px,4.3vw,74px);top:-10px;filter:drop-shadow(0 2px 2px #000a)}
/* Keep both ornaments on the outer corners of the metal frame. */
body.pc .shell-badge{left:-18px}
/* The drop's visible height is 237/256, the Loaded crest's is 190/256.
   Scaling both drop and numeral to .8 matches their visible sizes. Keep its
   top and horizontal centre fixed: the numeral at .6325 * .8 = .506 of the
   original box now aligns with the crest centre in hand AND reserve. */
body.pc .shell-mana{right:-18px;background:url('illustrated/mana-drop.webp') center/contain no-repeat;clip-path:none;padding:0;transform:scale(.8);transform-origin:50% 0;font-size:clamp(22px,2vw,34px);font-weight:700;color:white;text-shadow:0 2px 2px #00162b,1px 0 2px #00162b,-1px 0 2px #00162b}
/* The numeral stays at the same anchor in hand and reserve: 63.25% down the drop. */
body.pc .shell-mana>b{position:absolute;left:50%;top:63.25%;transform:translate(-50%,-50%);font:inherit;line-height:1;font-variant-numeric:tabular-nums}
body.pc .shell-name{flex:none;padding:7px 3px 6px;font-weight:500;letter-spacing:.005em;background-image:linear-gradient(#26364cf0,#111f31f0),var(--shell-steel);border-top-color:color-mix(in srgb,var(--r) 65%,#f0e7d0)}
body.pc .shell-stats{flex:none;margin-top:0;padding:5px 6px;border:0;border-bottom:1px solid #78899a44;background:linear-gradient(#0c1523,#19283c);box-shadow:inset 0 2px 4px #020810,0 1px 0 #e3e8ee13}
body.pc .shell-stats>.m{display:none}
body.pc .shell-stats>span{gap:7px}
body.pc .shell-stats .mini-ic{width:1.35em;height:1.35em;object-fit:contain;filter:drop-shadow(0 1px 1px #0009)}
body.pc .ucard .lvbar{flex:none;padding:5px 3px 2px;background:#132033}
.potential-stars .pstar{object-fit:contain;filter:grayscale(1);opacity:.3}
.potential-stars .pstar.filled{filter:none;opacity:1}
body.pc .ucard .lvbar .potential-stars{max-width:125px}
body.pc .shell-ability{font-size:13px;padding:2px 4px;right:4px;bottom:4px;background:#0d182acc;border-color:#b7c5d055}
body.pc .shell-ability .mini-ic{width:28px;height:28px}
body.pc #cardview .cv-pip{font-size:0;width:20px;height:24px;background:url('illustrated/rank.webp') center/contain no-repeat;filter:grayscale(1);opacity:.25}
body.pc #cardview .cv-pip.on{filter:none;opacity:1}
body.pc #cardview .cv-back{font-size:0;background:#1d2c40 url('illustrated/close.webp') center/24px no-repeat}
body.pc #cardview .cv-patt,body.pc #cardview .cv-patt .cv-sigil{width:48px;height:48px}
body.pc #cardview .cv-stat{grid-template-columns:32px auto}
body.pc #cardview .cv-ic{width:32px;height:34px}

body.pc .manabar{height:34px;flex:none;margin:0;background:linear-gradient(#10192a,#1b273c);border-color:#72859f}
body.pc .manabar .ml{font-weight:500;color:#dce5f6}
body.pc .manabar .ml::before{content:'';width:25px;height:25px;background:url('illustrated/mana-drop.webp') center/contain no-repeat}
body.pc .manabar .mtrack{height:16px;border-color:#5c6f91}
body.pc .manabar .mtrack i{background:linear-gradient(#6ad2d8,#2d9dae);box-shadow:inset 0 1px #b2edf0a8}
body.pc .modes{max-width:880px;width:78%;gap:var(--shell-gap);margin:var(--shell-gap) auto}
body.pc #deck[data-workshop="deck"] .modes{margin:0 auto}
body.pc .mode{height:48px;background-image:linear-gradient(#2e354deb,#182338ef),var(--shell-steel)}
body.pc .mode .mimg{width:40px;height:40px;object-fit:contain}
body.pc .mode.on{background-image:linear-gradient(#365b6af2,#1b3548f5),var(--shell-steel);box-shadow:inset 0 1px #93dad83b,0 3px 5px #0005}
body.pc .work{position:relative;margin:0;padding:12px;border:1px solid #8094ac55;border-radius:4px;border-image:none;background-image:linear-gradient(110deg,#263449ed,#152034f5),var(--shell-steel);background-size:auto,cover;box-shadow:inset 0 1px #c3d6eb18}
body.pc .shell-reserve{margin:0 0 10px;font-size:20px;font-weight:500;color:#e4eafa;line-height:24px}
body.pc .shell-reserve small{font-size:15px;color:#acb9cc}
body.pc .strip{padding:0 0 4px}
body.pc .striptrack{gap:13px;row-gap:16px}
body.pc #deck .strip .ucard{flex:0 0 clamp(144px,10vw,180px);width:clamp(144px,10vw,180px);aspect-ratio:4/5;display:flex;flex-direction:column}
body.pc #deck .strip .ucard:has(>.shell-frame){padding:11px;border-radius:9px}
body.pc #deck .strip .ucard .art{aspect-ratio:auto;flex:1;min-height:0;height:auto}
body.pc .strip .shell-name{display:none}
body.pc .strip .shell-badge,body.pc .strip .shell-mana{width:34px;height:34px;top:-6px;font-size:16px}
body.pc .strip .shell-badge{left:-11px}
body.pc .strip .shell-mana{right:-11px;padding:0}
body.pc .strip .shell-stats{padding:2px 1px}
body.pc .strip .shell-stats .mini-ic{width:1.3em;height:1.3em}
body.pc .strip .ucard .lvbar{padding:3px 1px 1px}
body.pc .strip .ucard .artimg{filter:saturate(.95) brightness(1.02)}
body.pc .strip .shell-ability{font-size:10px;padding:1px 2px}
body.pc .strip .shell-ability .mini-ic{width:16px;height:16px}

/* Native reserve scrolling preserves keyboard focus, dragging and the last card. */
body.pc #work-deck{padding-left:34px;padding-right:34px}
body.pc #strip{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding:12px 10px 5px}   /* 10px: side arrows of the first and last card stick out of the card */
body.pc #strip::-webkit-scrollbar{display:none}
body.pc #strip .striptrack{flex-wrap:nowrap;will-change:auto}
body.pc .shell-strip-nav{position:absolute;top:calc(50% + 13px);transform:translateY(-50%);display:block;width:26px;height:58px;padding:0;border:0;border-radius:4px;background:url('illustrated/chevron.webp') center/25px no-repeat;font-size:0;cursor:pointer}
body.pc .shell-strip-nav.previous{left:4px;transform:translateY(-50%) rotate(180deg)}
body.pc .shell-strip-nav.next{right:4px}
body.pc .shell-strip-nav:hover:not(:disabled){background-color:#548fa638}
body.pc .shell-strip-nav:disabled{opacity:.25;cursor:default}

/* DIRECTION ARROWS: one anchor system (Claude, 4 Oct 2026). Why and how: docs/CLAUDE_TO_CODEX_ARROW_LAYOUT_2026-10-04.md
   1. Picture = element. The SVG arrow paths are centred in their 256 px square by make_direction_arrows.py.
      Raster icons use export_interface.py (alpha >= 128). The picture centre stays fixed during rotation.
   2. Element = anchor. An arrow is placed by its centre (negative half-size margins); transform only rotates.
   3. Anchor = centre line of the visible metal band of the frame. The band is part of illustrated/frame.webp,
      cut at 16 % (122.9 of 768 px); its centre lies at k x frame width: top .48, sides .44, bottom .50.
      The frame width is ONE variable, --frame-w, set on the card and used by both the frame and the arrows.
   4. Along a side: the middle of the whole card side. An attack group is symmetric about the middle of the top
      side (bottom for the opponent); diagonals are spaced so rotated arrows never touch. */
.card-directions{--direction-size:22px;--k-top:.5;--k-side:.5;--k-bottom:.5;
  --rail-top:calc(var(--frame-w,18px)*var(--k-top));--rail-side:calc(var(--frame-w,18px)*var(--k-side));--rail-bottom:calc(var(--frame-w,18px)*var(--k-bottom));
  position:absolute;inset:0;z-index:9;pointer-events:none}
.cv-arrows{position:absolute;inset:0;pointer-events:none}
.direction-attack{--direction-image:url('shell/direction-attack.svg')}
.direction-buff{--direction-image:url('shell/direction-buff.svg')}
.direction-heal{--direction-image:url('shell/direction-heal.svg')}
.card-directions .direction-arrow{
  position:absolute;display:block;width:var(--direction-size);height:var(--direction-size);
  margin:calc(var(--direction-size)/-2) 0 0 calc(var(--direction-size)/-2);
  background:var(--direction-image) center/contain no-repeat;filter:drop-shadow(0 1px 1.5px #000c);
  transform:rotate(var(--direction-angle,0deg));
}
.direction-attack-row{position:absolute;inset:0;--corner-clearance:var(--direction-corner-clearance,calc(var(--frame-w,18px)*1.5 + var(--direction-size)*.45 + 3px));--attack-offset:max(calc(var(--direction-size)*.68),calc(50% - var(--corner-clearance)))}
.direction-attack-row>.direction-arrow{top:var(--rail-top);left:50%}
.direction-spread{--attack-offset:max(var(--direction-size),calc(50% - var(--corner-clearance)))}
.direction-attack-row>.direction-nw{left:calc(50% - var(--attack-offset))}
.direction-attack-row>.direction-ne{left:calc(50% + var(--attack-offset))}
.direction-nw{--direction-angle:-45deg}
.direction-ne{--direction-angle:45deg}
.card-directions .direction-w{top:50%;left:var(--rail-side);--direction-angle:-90deg}
.card-directions .direction-e{top:50%;left:calc(100% - var(--rail-side));--direction-angle:90deg}
.bunit.foe .direction-attack-row>.direction-arrow{top:calc(100% - var(--rail-bottom))}
.bunit.foe .direction-n{--direction-angle:180deg}
.bunit.foe .direction-nw{--direction-angle:-135deg}
.bunit.foe .direction-ne{--direction-angle:135deg}
/* Frame width per view: the frame and its arrows read the same number. */
body.pc .ucard:has(>.shell-frame){--frame-w:26px}
body.pc .strip .ucard:has(>.shell-frame){--frame-w:16px}
body.pc #battle .bunit{--frame-w:15px}
body.pc #cardview .cv-art{--frame-w:22px}
body.pc .shell-frame{border-width:var(--frame-w,26px)!important}
body.pc .ucard>.card-directions,body.pc #battle .bunit>.card-directions,body.pc .cv-arrows>.card-directions{--k-top:.48;--k-side:.44;--k-bottom:.5}
body.pc .ucard>.card-directions{--direction-size:32px}
body.pc .strip .ucard>.card-directions{--direction-size:27px}
body.pc #battle .bunit>.card-directions{--direction-size:28px}
/* Battle diagonals approach the corners, leaving room for the crest/drop.
   Narrow cards retain the minimum separation between arrow shapes. */
body.pc #battle .direction-attack-row{
  --corner-clearance:calc(clamp(30px,25cqw,47px)*.8 + var(--direction-size)*.45 + 3px);
  --attack-offset:max(calc(var(--direction-size)*.68),calc(50% - var(--corner-clearance)));
}
body.pc #battle .direction-spread{--attack-offset:max(var(--direction-size),calc(50% - var(--corner-clearance)))}
body.pc #battle .direction-attack-row>.direction-nw{left:calc(50% - var(--attack-offset))}
body.pc #battle .direction-attack-row>.direction-ne{left:calc(50% + var(--attack-offset))}
@media(min-width:1000px) and (max-height:680px){
  body.pc #battle .bunit>.card-directions{--direction-size:18px}
}
body.pc .cv-arrows>.card-directions{--direction-size:40px}
/* Shard preview: the frame is the card's own 4 px CSS border, so the layer covers the border box and k = .5. */
body.pc #sv-card .cv-arrows>.card-directions{--frame-w:4px;inset:-4px;--k-top:.5;--k-side:.5;--k-bottom:.5}
body.pc #battle .hprow .heart{background-image:url('illustrated/health.webp')}

@media(min-width:1000px) and (max-height:800px){
  body.pc .nav button{height:112px;gap:4px}
  body.pc .nav button[data-go] img.ng{width:68px;height:68px}
  body.pc .shell-name{padding:5px 2px}
  body.pc .shell-stats{padding:3px 2px}
  body.pc #deck .strip .ucard{flex-basis:132px;width:132px}
  body.pc #work-deck{padding-top:6px;padding-bottom:6px}
  body.pc #work-deck .shell-reserve{margin-bottom:0;line-height:20px;font-size:18px}
  body.pc #strip{padding-top:8px}

}
@media(min-width:1000px) and (max-width:1199px){
  body.pc{--shell-nav-width:90px}
  body.pc .top .center{flex-basis:411px;padding-left:102px}
  body.pc .shell-profile-details{padding:6px 12px}
  body.pc .top .lvl{height:30px;padding-left:76px}
  body.pc .top #tb-lvl{top:-4px;width:68px;height:54px;font-size:21px}
  body.pc .shell-xp{margin-left:76px}
  body.pc .top .shell-profile-name{font-size:18px}
  body.pc .shell-xp{font-size:15px}
  body.pc .top .res-ic{width:32px;height:32px;margin-right:4px}
  body.pc .top .wallet{margin-right:316px}
  body.pc .nav button::after{font-size:15px}
  body.pc .shell-badge,body.pc .shell-mana{width:40px;height:40px;font-size:21px}
  body.pc .strip .shell-badge,body.pc .strip .shell-mana{width:30px;height:30px;font-size:15px}
  body.pc .modes{width:92%;gap:12px}
  body.pc .mode::after{font-size:15px}
  body.pc .shell-reserve small{font-size:15px}
}

.ritual-emblem img{width:70%;max-width:100px;height:auto;object-fit:contain}
body.pc .ritual-emblem{opacity:.8}
body.pc .ritual-frame{object-fit:fill}

body.pc #battle .bunit{padding:11px}
body.pc #battle .bstats .mini-ic{width:19px;height:19px;object-fit:contain}
body.pc #battle .bstats .lvs{width:16px;height:18px;font-size:0;background:url('illustrated/level.webp') center/contain no-repeat}
body.pc .ritual-shell:has(.bempty)>.ritual-frame{display:none}
body.pc .ritual-shell:has(.bempty)::after{content:'';position:absolute;inset:0;border:24px solid transparent;border-image:url('illustrated/frame.webp') 16% stretch;pointer-events:none;opacity:.65}

/* Other workshop views use the same rhythm, with the action in normal flow. */
body.pc #deck:not([data-workshop="deck"]) .dscroll{display:flex;flex-direction:column;gap:var(--shell-gap)}
body.pc #deck:not([data-workshop="deck"]) .dscroll>*{flex-shrink:0}
body.pc #deck:not([data-workshop="deck"]) .modes{margin:0 auto}
body.pc #top-fuse,body.pc #top-fuse:has(.shell-frame),body.pc #top-burn,body.pc #top-burn:has(.shell-frame){padding:0;min-height:0;height:auto!important}
body.pc #top-fuse .fusecol{gap:var(--shell-gap)}
body.pc #deck[data-workshop="burn"] #top-burn{display:flex;flex-direction:column;align-items:center;gap:var(--shell-gap)}
body.pc #top-fuse .workshop-cost,body.pc #top-burn .workshop-cost{position:static;transform:none;margin:0 auto;flex:none}

/* The selected astrolabe plate and prize index zero are authored at twelve. */
.wheelart{transform:none}
.shell-wheel-prize{position:absolute;width:18%;height:18%;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 2px 2px #000a)}
.pin{top:-26px;width:32px;height:44px}
.pinart{object-fit:contain;transform:rotate(180deg)}
.workshop-cost .ci{font-size:0;width:24px;height:24px;background:url('illustrated/gold.webp') center/contain no-repeat}
.ch-buy .cdot{width:20px;height:20px;background:transparent url('illustrated/gold.webp') center/contain no-repeat!important;box-shadow:none}