:root{color-scheme:dark;--bg:#0c1311;--panel:#131e19;--panel2:#19241e;--ink:#e6e7d3;--muted:#829084;--faint:#4d5e51;--line:#344439;--mint:#b3d89a;--acid:#d0e5a7;--gold:#dab67b;--red:#d68070;--cyan:#83c5c4;--purple:#b69acb;--serif:'Cinzel',Georgia,serif;--body:'Be Vietnam Pro',Arial,sans-serif;--condensed:'Barlow Condensed',Arial,sans-serif}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;color:var(--ink);font-family:var(--body);font-size:12px;line-height:1.5;background:radial-gradient(ellipse at 50% -20%,#28352855,transparent 65%),var(--bg);min-height:100dvh}body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23noise)'/%3E%3C/svg%3E")}
button,input{font:inherit}button{color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}button:disabled{opacity:.36;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:4px}a{color:var(--mint)}svg{flex:none;vertical-align:middle}button svg{pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{max-width:1760px;margin:0 auto;padding:0 28px}.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:12px;text-align:left;padding:0}.brand-mark{height:45px;width:45px;display:grid;place-items:center;color:var(--mint)}.brand-title{font-family:var(--serif);font-size:25px;letter-spacing:4px;line-height:1.2;font-weight:600}.brand-sub{font-size:8px;font-weight:600;letter-spacing:3px;color:var(--muted);margin-top:5px}.topnav{align-self:stretch;display:flex;gap:30px;margin-right:auto;margin-left:48px}.nav-btn{position:relative;text-transform:uppercase;font-size:10px;letter-spacing:1.5px;font-weight:600;padding:0;color:var(--muted)}.nav-btn:hover,.nav-btn.active{color:var(--ink)}.nav-btn.active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--mint)}.header-actions{display:flex;align-items:center;gap:10px}.mode-chip{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:5px 10px;border:1px solid var(--line)}.icon-btn{height:32px;width:32px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);border-radius:2px}.icon-btn:hover{border-color:var(--mint);color:var(--mint)}.roundbar{height:73px;display:flex;justify-content:space-between;align-items:center;gap:20px}.chapter{display:flex;align-items:center;gap:12px;min-width:200px}.chapter-no{font-family:var(--serif);font-size:29px;line-height:1;color:var(--mint);border-right:1px solid var(--line);padding-right:14px}.eyebrow{color:var(--muted);font-size:9px;letter-spacing:1.7px;text-transform:uppercase;font-weight:500}.chapter-title{font-size:11px;margin-top:3px}.round-path{display:flex;align-items:center;gap:0}.round-node{width:33px;height:30px;display:grid;place-items:center;color:var(--faint);position:relative}.round-node:after{content:'';height:1px;background:var(--line);position:absolute;left:28px;width:12px}.round-node:last-child:after{display:none}.round-node.done{color:var(--muted)}.round-node.current{color:var(--ink);border:1px solid var(--mint);background:#b3d89a12;transform:rotate(45deg);width:28px;height:28px;margin:0 4px}.round-node.current svg{transform:rotate(-45deg)}.round-node.current:after{display:none}.round-node.next{color:var(--muted)}.economy{display:flex;align-items:center;gap:22px}.metric{display:flex;align-items:center;gap:8px}.metric-num{font-family:var(--condensed);font-size:27px;font-weight:500;line-height:1}.metric-label{font-size:8px;letter-spacing:1px;color:var(--muted);display:block;margin-top:3px}.gold{color:var(--gold)}.health{color:var(--red)}.green{color:var(--mint)}.layout{display:grid;grid-template-columns:190px minmax(0,1fr)180px;gap:20px;align-items:start}.sidebar{min-width:0}.section-title{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.8px;font-weight:500;color:var(--muted);margin:0 0 14px;text-transform:uppercase}.section-title span{font-family:var(--condensed);font-size:13px;letter-spacing:0;color:var(--ink)}.trait-list{display:flex;flex-direction:column;gap:8px}.trait-row{display:flex;align-items:center;gap:9px;padding:6px 0;color:var(--muted);text-align:left;width:100%;position:relative}.trait-row:hover{color:var(--ink)}.trait-icon{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--line);background:#19221a;transform:rotate(45deg);margin:0 5px}.trait-icon svg{transform:rotate(-45deg)}.trait-row.is-active{color:var(--mint)}.trait-row.is-active .trait-icon{border-color:#80966a;background:#a2c48518}.trait-content{flex:1;min-width:0}.trait-name{font-size:11px;font-weight:500;white-space:nowrap}.trait-levels{font-family:var(--condensed);font-size:11px;letter-spacing:2px;color:var(--faint);margin-top:1px}.trait-levels b{color:var(--mint)}.trait-count{font-family:var(--condensed);font-size:18px;color:inherit}.trait-empty{padding:15px 0;font-size:11px;line-height:1.8;color:var(--muted)}.side-separator{height:1px;background:var(--line);margin:22px 0}.selected-empty{min-height:210px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:20px;text-align:center;color:var(--muted);font-size:10px;line-height:1.9}.selected-empty svg{opacity:.5}.inspector{border:1px solid var(--line);background:#111b16;position:relative}.inspector-art{height:132px;position:relative;background-size:400% 400%;background-color:#27382d}.inspector-art:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#111b16)}.inspector-top{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between}.cost-chip{display:flex;align-items:center;gap:4px;background:#0a110de0;border:1px solid #cfb47e66;color:var(--gold);padding:2px 6px;font:600 13px var(--condensed)}.star-text{color:var(--gold);font-size:12px;letter-spacing:1px}.inspector-body{padding:0 12px 12px;margin-top:-21px;position:relative}.inspector-name{font-family:var(--serif);font-size:14px;line-height:1.35;margin:0 0 6px}.trait-tags{font-size:8px;color:var(--muted);letter-spacing:.4px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:13px 0}.stat{display:flex;flex-direction:column;gap:3px;font:500 17px var(--condensed)}.stat small{font:8px var(--body);color:var(--muted)}.skill-name{font-size:10px;font-weight:600;color:var(--mint);margin-bottom:4px}.skill-desc{font-size:9px;color:#a2afa2;line-height:1.8}.unit-items{display:flex;gap:4px;margin-top:9px}.small-item{display:grid;place-items:center;width:28px;height:28px;border:1px solid #bb9b6555;color:var(--gold);background:#dab67b0d}.sell-btn{margin-top:12px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:7px 9px;width:100%;color:var(--muted);font-size:9px}.sell-btn:hover{color:var(--red);border-color:var(--red)}.arena-column{min-width:0}.arena{position:relative;overflow:hidden;border:1px solid #415143;background:#14221c;box-shadow:0 14px 70px #0003}.arena:before{content:'';position:absolute;inset:0;background:linear-gradient(#0c171240,#0b14128f 65%,#0d1815c9),var(--arena-art,none) center 43%/cover;opacity:.72;pointer-events:none}.arena:after{content:'';position:absolute;inset:5px;border:1px solid #c3d5a821;pointer-events:none}.arena-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:14px 19px 0;gap:10px}.location{font-family:var(--serif);font-size:12px;letter-spacing:1.6px;color:#d1dac4}.arena-sub{font-size:8px;color:#98aa95;letter-spacing:1.3px;margin-top:4px;display:flex;align-items:center;gap:6px}.small-dot{height:4px;width:4px;border-radius:50%;background:var(--mint)}.capacity{text-align:right}.capacity b{font-family:var(--condensed);font-size:21px;font-weight:500;color:var(--ink)}.capacity small{font-size:8px;color:var(--muted);display:block;letter-spacing:1px}.battlefield{position:relative;height:358px;width:calc(100% - 54px);max-width:770px;margin:8px auto 0}.board-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:5px 7px}.board-cell{position:relative;border:1px solid #adc9a91b;border-radius:3px;background:#afc7a704;min-width:0;margin:2px 2px 5px}.board-cell.enemy-cell{border-color:#b1bba312;background:#0d17111b}.board-cell.ally-cell{cursor:pointer}.board-cell.ally-cell:hover{border-color:#c5e2ad80;background:#c5e2ad12}.board-cell.highlight-cell{border-color:#c5e2ad80;background:#c5e2ad12}.board-cell .cell-mark{position:absolute;inset:0;display:grid;place-items:center;color:#d9ebc61c;font-size:14px;font-weight:400}.board-midline{position:absolute;top:50%;left:-16px;right:-16px;height:1px;background:linear-gradient(90deg,transparent,#b9cf9d55 20%,#b9cf9d55 80%,transparent);z-index:1;pointer-events:none}.board-midline:after{content:'✧';position:absolute;left:50%;top:-12px;transform:translateX(-50%);color:#b4c79a99;font-size:16px;background:#14221c;padding:0 13px}.unit-piece{position:absolute;width:calc(100% / 7 - 12px);height:calc(100% / 6 - 7px);max-width:91px;z-index:5;left:calc(var(--col) * 100% / 7 + 6px);top:calc(var(--row) * 100% / 6 + 1px);padding:0;border:1px solid #c1d5a591;border-bottom:2px solid #a9ce8b;border-radius:2px;background:#1d2c22;box-shadow:0 3px 8px #0008;transition:left .33s ease,top .33s ease,opacity .25s,filter .2s;isolation:isolate;text-align:left}.unit-piece.enemy{border-color:#d5977e91;border-bottom-color:#ba7560}.unit-piece.selected{outline:2px solid var(--mint);outline-offset:3px;z-index:15}.unit-piece.inspected{outline:1px dashed var(--ink);outline-offset:2px}.unit-piece:hover{filter:brightness(1.16);z-index:14}.piece-art{position:absolute;inset:0 0 11px;background-size:400% 400%;background-color:#354b38;z-index:-1}.piece-art:after{content:'';position:absolute;inset:20% 0 0;background:linear-gradient(transparent,#09150bc9)}.piece-name{position:absolute;bottom:8px;left:4px;right:2px;font-family:var(--condensed);font-size:11px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 5px #000}.piece-stars{position:absolute;top:1px;left:4px;font-size:9px;color:#e9d6a7;letter-spacing:0;text-shadow:0 1px 3px #000}.piece-items{position:absolute;right:2px;top:2px;display:flex;gap:2px}.piece-items i{width:5px;height:5px;background:var(--gold);box-shadow:0 0 4px #000}.hp-track,.mana-track{position:absolute;left:0;right:0;bottom:3px;height:4px;background:#070d08}.hp-fill{height:100%;width:var(--hp,100%);background:var(--mint);transition:width .2s}.enemy .hp-fill{background:var(--red)}.mana-track{bottom:0;height:2px}.mana-fill{height:100%;width:var(--mana,0%);background:#83b9cc;transition:width .15s}.piece-shield{position:absolute;inset:-3px;border:2px solid #d2d8a85c;border-radius:3px;box-shadow:0 0 10px #c4dca82b;pointer-events:none}.unit-piece.dead{opacity:.12;filter:grayscale(1);pointer-events:none;transform:scale(.85);z-index:2}.unit-piece.attacking{animation:strike .22s ease}.unit-piece.hurt{animation:hit .27s ease}.unit-piece.casting{animation:cast .6s ease}.float-number{position:absolute;left:50%;top:-7px;transform:translateX(-50%);font:600 19px var(--condensed);color:#edc8b2;text-shadow:0 2px 4px #000;pointer-events:none;animation:damageFloat .85s ease-out forwards;z-index:30}.float-number.heal{color:var(--mint)}.float-number.spell{font:600 9px var(--body);color:#dfdbaf;white-space:nowrap;top:-12px}.battle-effects{position:absolute;inset:0;width:100%;height:100%;z-index:12;pointer-events:none}.shot{stroke:#d0e6a8;stroke-width:2;opacity:.85;filter:drop-shadow(0 0 3px #c7e8a5);animation:shot .28s ease-out forwards}.shot.enemy-shot{stroke:#d58b74}.arena-footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 19px 13px;min-height:42px}.opponent-label{display:flex;gap:6px;align-items:center;font-size:9px;color:#b5c0ae}.battle-time{font-family:var(--condensed);color:var(--muted);font-size:13px}.phase-pill{display:flex;align-items:center;gap:6px;color:var(--mint);font-size:8px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}.speed-btn{font:500 12px var(--condensed);padding:2px 7px;border:1px solid #91ab7a66;color:var(--mint);margin-left:6px}.bench-heading{display:flex;align-items:center;justify-content:space-between;margin:14px 0 7px}.bench-heading .section-title{margin:0}.bench-hint{font-size:8px;color:var(--muted)}.bench{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;height:66px}.bench-slot{border:1px solid #54614d44;background:#17221955;position:relative;border-radius:2px;min-width:0;display:grid;place-items:center;padding:0}.bench-slot:hover{border-color:#aac98e77}.bench-slot.empty:after{content:attr(data-slot);font-family:var(--condensed);font-size:10px;color:#53684b77}.bench .unit-piece{position:relative;left:auto;top:auto;width:100%;height:100%;max-width:none}.bench .piece-name{font-size:10px}.shop-bar{margin:19px 0 10px;display:flex;justify-content:space-between;align-items:center;gap:10px}.shop-title{font-family:var(--serif);font-size:14px;letter-spacing:1px;display:flex;gap:10px;align-items:center}.shop-title svg{color:var(--muted)}.shop-title small{font:8px var(--body);color:var(--muted);letter-spacing:.3px}.shop-controls{display:flex;align-items:center;gap:7px}.action-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);height:31px;padding:0 10px;font-size:9px;color:#b3c1af;background:#1a251c;white-space:nowrap}.action-button:hover{border-color:var(--mint);color:var(--ink)}.action-button .price{display:flex;gap:3px;align-items:center;color:var(--gold);margin-left:3px;font:500 13px var(--condensed)}.action-button.locked{color:var(--gold);border-color:#ba9c65}.shop-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.shop-card{height:176px;min-width:0;border:1px solid var(--rarity,#708664);background:#152218;position:relative;cursor:pointer;border-radius:2px;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s;text-align:left;padding:0;color:var(--ink)}.shop-card:hover{transform:translateY(-5px);box-shadow:0 7px 20px #0006;border-color:var(--ink)}.shop-card:focus-visible{transform:translateY(-5px)}.shop-card.unaffordable{filter:saturate(.35)}.shop-card.sold{border:1px dashed #43533a77;background:#0e1912;display:grid;place-items:center;cursor:default;color:var(--faint);font-size:9px;letter-spacing:1px}.shop-card.sold:hover{transform:none}.shop-art{height:113px;background-size:400% 400%;position:relative;background-color:#273c2a}.shop-art:after{content:'';position:absolute;inset:48% 0 0;background:linear-gradient(transparent,#101c14)}.shop-card .cost-chip{position:absolute;right:6px;top:6px;z-index:2}.shop-info-btn{position:absolute;left:6px;top:6px;z-index:4;background:#0d1715c9;border:1px solid #9cb49a66;width:20px;height:20px;display:grid;place-items:center;color:#c8d7bf;font:11px var(--serif);border-radius:50%;padding:0}.shop-card-bottom{padding:0 8px 7px;position:relative;margin-top:-8px}.shop-card-name{font-family:var(--condensed);font-size:19px;font-weight:500;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shop-card .trait-tags{font-size:8px;margin-top:5px;height:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.owned-dots{display:flex;gap:3px;position:absolute;bottom:7px;right:7px}.owned-dots i{height:4px;width:4px;background:var(--mint);border-radius:50%}.shop-card-combine{position:absolute;left:0;right:0;top:81px;padding:2px 6px;text-align:center;background:#c7dca8;color:#162216;font-size:8px;font-weight:600;z-index:3;letter-spacing:.5px}.footer-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0 23px;gap:15px}.level-panel{display:flex;align-items:center;gap:11px;min-width:0}.level-number{height:36px;width:36px;border:1px solid #667b56;transform:rotate(45deg);display:grid;place-items:center;margin:4px 5px}.level-number b{transform:rotate(-45deg);font:500 23px var(--condensed);color:var(--mint)}.level-info{width:125px}.level-label{font-size:9px;font-weight:600;display:flex;justify-content:space-between;margin-bottom:5px}.level-label small{font:10px var(--condensed);color:var(--muted)}.xp-track{height:3px;background:#35412c}.xp-fill{background:var(--mint);height:100%;width:var(--xp,0%);max-width:100%;transition:width .3s}.shop-odds{display:flex;gap:7px;font:10px var(--condensed);margin-top:5px}.primary-button{height:42px;min-width:201px;padding:0 20px;background:var(--mint);color:#172417;font-weight:600;font-size:10px;letter-spacing:1.6px;display:inline-flex;align-items:center;justify-content:center;gap:13px;border:1px solid #d1e5b9;box-shadow:inset 0 0 0 3px #1d341c22;position:relative}.primary-button:hover{background:#d0e5b8}.primary-button.combat{background:#314230;color:#c8dbb3;border-color:#536746;min-width:201px;cursor:default}.primary-button.secondary-primary{background:transparent;color:var(--mint);border-color:var(--line);box-shadow:none}.primary-button .shortcut{font:11px var(--condensed);opacity:.5;border:1px solid currentColor;width:15px;height:15px;display:grid;place-items:center;letter-spacing:0}.standings{display:flex;flex-direction:column;gap:7px}.player-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 6px;border:1px solid transparent;position:relative;color:#c0c9b8;min-height:45px}.player-row:hover{background:#c3d6ad09;border-color:#b5c99433}.player-row.self{background:#bed39d0d;border-color:#c0dba639}.player-row.opponent{border-color:#d29f6a55}.player-row.out{opacity:.36}.player-avatar{width:31px;height:34px;background-size:400% 400%;border:1px solid #9caf8044;flex:none}.player-main{flex:1;min-width:0}.player-name{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-sub{font-size:7px;color:var(--muted);letter-spacing:.2px;margin-top:2px}.player-health{height:2px;background:#31412d;margin-top:5px}.player-health i{display:block;height:100%;background:#8da875}.player-row.self .player-health i{background:var(--mint)}.player-hp{font:500 20px var(--condensed);color:#bfcdad}.player-rank{position:absolute;top:-4px;left:-3px;background:#0e1712;font:9px var(--condensed);color:var(--muted);padding:0 3px}.inventory{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.item-btn{height:37px;display:grid;place-items:center;border:1px solid #56634a;background:#25301f;position:relative;color:var(--gold);padding:0}.item-btn:hover{border-color:var(--gold);background:#354329}.item-btn.selected{outline:2px solid var(--gold);outline-offset:2px}.item-btn.complete{border-color:#b7975b;background:#9f854720}.inventory-empty{grid-column:1/-1;font-size:9px;color:var(--muted);line-height:1.8;padding:5px 0}.inventory-note{font-size:8px;color:var(--muted);line-height:1.8;margin-top:10px}.round-log{font-size:9px;color:var(--muted);line-height:1.8;display:flex;flex-direction:column;gap:9px}.log-entry{padding-left:9px;border-left:1px solid #3d5034}.log-entry .log-win{color:var(--mint)}.log-entry .log-loss{color:var(--red)}.help-card{margin-top:20px;background:#17231a;border:1px solid #354b32;padding:11px 12px;position:relative}.help-card-title{font-size:9px;color:#c9d9b4;margin-bottom:5px;font-weight:500}.help-card p{font-size:9px;color:#95a58a;line-height:1.9;margin:0}.help-card .dismiss{position:absolute;right:5px;top:3px;color:var(--muted);font-size:13px}.mobile-help{display:none}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);opacity:0;background:#d0dfb7;color:#152214;padding:12px 20px;z-index:1100;font-size:11px;box-shadow:0 8px 28px #0007;border:1px solid #eff8dd;pointer-events:none;transition:.2s;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#d8b19b;border-color:#f4d3bf;color:#281b13}.result-banner{position:absolute;inset:0;z-index:35;background:#09130fc9;display:flex;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(3px);text-align:center;padding:25px}.result-seal{width:66px;height:66px;border:1px solid #c7d9a166;transform:rotate(45deg);display:grid;place-items:center;margin:15px}.result-seal svg{transform:rotate(-45deg);color:var(--mint)}.result-banner.loss .result-seal{border-color:#c3917466}.result-banner.loss .result-seal svg{color:var(--red)}.result-banner h2{font-family:var(--serif);font-size:26px;letter-spacing:3px;font-weight:500;color:var(--mint);margin:18px 0 4px}.result-banner.loss h2{color:var(--red)}.result-banner p{font-size:11px;line-height:1.8;color:#afc09f;max-width:360px;margin:5px 0 20px}.result-loot{display:flex;gap:12px;color:var(--gold);font-size:10px;margin-bottom:20px}.result-loot span{display:flex;align-items:center;gap:5px;border:1px solid #c5ac7044;padding:5px 8px}.result-banner .primary-button{min-width:175px}.modal-backdrop{position:fixed;inset:0;background:#020805d9;backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}.modal{background:#121f17;border:1px solid #637454;box-shadow:0 22px 100px #000a;width:620px;max-width:100%;max-height:90dvh;overflow:auto;position:relative;padding:30px}.modal.wide{width:1000px}.modal-close{position:absolute;right:15px;top:15px;width:28px;height:28px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);z-index:3}.modal h2{font-family:var(--serif);font-weight:500;font-size:25px;letter-spacing:1px;margin:8px 0 14px}.modal .modal-intro{font-size:11px;color:#a7b69d;line-height:1.9;margin-bottom:24px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.guide-step{border-top:1px solid var(--line);padding-top:13px}.guide-step-num{font:500 27px var(--condensed);color:#6d865d}.guide-step h3{font-size:12px;color:var(--mint);margin:3px 0 7px}.guide-step p{font-size:10px;color:#a9b79f;line-height:1.9;margin:0}.key-guide{margin-top:25px;padding-top:15px;border-top:1px solid var(--line);font-size:9px;color:var(--muted);line-height:2}.key-guide kbd{font:10px var(--condensed);border:1px solid var(--line);padding:2px 5px;color:var(--ink);margin:0 3px}.modal-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:20px}.modal-tab{border:1px solid var(--line);padding:7px 14px;font-size:10px;color:var(--muted)}.modal-tab.active{border-color:var(--mint);color:var(--mint);background:#b3d89a10}.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.collection-card{background:#19291d;border:1px solid var(--rarity);padding:0;text-align:left;overflow:hidden;cursor:pointer}.collection-art{height:155px;background-size:400% 400%;background-color:#2c3d2a}.collection-body{padding:10px}.collection-body h3{font:500 19px var(--condensed);margin:0 0 4px}.collection-body .skill-desc{margin-top:7px}.collection-cost{color:var(--gold);font:15px var(--condensed);float:right}.items-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.codex-item{border:1px solid var(--line);padding:12px;display:flex;gap:12px}.codex-item svg{color:var(--gold);margin-top:2px}.codex-item h3{font-size:11px;margin:0 0 4px;color:var(--ink)}.codex-item p{font-size:9px;color:var(--muted);line-height:1.8;margin:0}.codex-item small{display:block;font-size:8px;margin-top:5px;color:var(--gold)}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mode-option{padding:20px;text-align:left;background:#19291b;border:1px solid #5b704b;color:var(--ink)}.mode-option:hover{border-color:var(--mint);background:#263522}.mode-option h3{font-family:var(--serif);font-size:18px;margin:10px 0 8px}.mode-option p{font-size:10px;line-height:1.9;color:var(--muted)}.mode-option small{color:var(--mint);font-size:9px;letter-spacing:.7px}.item-detail{display:flex;align-items:center;gap:17px;margin:20px 0}.item-detail-icon{width:70px;height:70px;border:1px solid #ad8d56;display:grid;place-items:center;background:#a2864e17;color:var(--gold);flex:none}.item-detail h3{font:500 21px var(--serif);margin:0 0 9px}.item-detail p{font-size:11px;color:var(--muted);line-height:1.9;margin:0}.combine-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.combine-option{border:1px solid #7e744a;padding:10px;text-align:left;background:#97824411;display:flex;gap:9px;align-items:center}.combine-option svg{color:var(--gold)}.combine-option span{font-size:10px}.combine-option small{display:block;font-size:8px;color:var(--muted);margin-top:4px}.item-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.inspect-modal-body .inspector{max-width:240px;margin:auto}.inspect-modal-body .inspector-art{height:220px}.inspect-modal-body .skill-desc{font-size:11px}.inspect-modal-body .inspector-name{font-size:19px}.draft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:24px 0}.draft-card{padding:25px 12px;border:1px solid #829667;background:#23321f;display:flex;align-items:center;flex-direction:column;gap:13px;text-align:center}.draft-card:hover{background:#354827;border-color:var(--mint)}.draft-card svg{color:var(--gold)}.draft-card b{font-size:12px}.draft-card span{font-size:9px;line-height:1.8;color:var(--muted)}.battle-hint{font-size:9px;color:var(--muted);margin-right:12px}.scout-banner{background:#776b3a30;border:1px solid #95834c66;color:#d2c195;font-size:10px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.scout-banner button{font-size:9px;border-bottom:1px solid currentColor}.connection-note{font-size:8px;color:var(--faint);text-align:center;letter-spacing:.7px;padding-bottom:12px}.match-summary{padding:20px 0;display:flex;justify-content:center;gap:35px;text-align:center}.match-summary strong{font:500 31px var(--condensed);color:var(--mint);display:block}.match-summary small{font-size:9px;color:var(--muted)}
@keyframes strike{50%{transform:translateY(-6px) scale(1.07);z-index:20}}@keyframes hit{20%{filter:brightness(2) sepia(.5)}50%{transform:translateX(3px)}}@keyframes cast{40%{box-shadow:0 0 28px #d4e9a8;filter:brightness(1.6)}}@keyframes damageFloat{0%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-32px)}}@keyframes shot{0%{opacity:1}100%{opacity:0}}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.modal{animation:appear .2s ease}.shop-card{animation:appear .25s ease backwards}.shop-card:nth-child(2){animation-delay:.03s}.shop-card:nth-child(3){animation-delay:.06s}.shop-card:nth-child(4){animation-delay:.09s}.shop-card:nth-child(5){animation-delay:.12s}
@media(min-width:1600px){.layout{grid-template-columns:215px minmax(0,1fr)205px;gap:26px}.battlefield{height:400px}.shop-card{height:192px}.shop-art{height:126px}.inspector-art{height:160px}.bench{height:72px}}
@media(max-width:1190px){.app-shell{padding:0 18px}.layout{grid-template-columns:157px minmax(0,1fr)153px;gap:14px}.topnav{margin-left:15px;gap:20px}.brand-title{font-size:23px}.brand-sub{font-size:7px;letter-spacing:2px}.trait-name{font-size:10px}.trait-icon{width:25px;height:25px}.trait-row{gap:5px}.battlefield{height:329px;width:calc(100% - 28px)}.unit-piece{width:calc(100% / 7 - 8px);left:calc(var(--col) * 100% / 7 + 4px)}.shop-card{height:155px}.shop-art{height:96px}.shop-card-name{font-size:16px}.shop-card-bottom{padding:0 6px 6px}.shop-grid{gap:7px}.shop-title small{display:none}.primary-button{min-width:175px;padding:0 14px}.mode-chip{display:none}.arena-header{padding-left:14px;padding-right:14px}.location{font-size:11px}.player-row{gap:6px;padding:6px 3px}.player-name{font-size:8px}.player-avatar{width:27px;height:30px}.player-hp{font-size:18px}.inventory{gap:5px}.item-btn{height:32px}.shop-odds{gap:5px}.level-info{width:100px}.level-panel{gap:7px}.inspector-art{height:113px}.inspector-body{padding:0 10px 10px}.inspector-name{font-size:12px}.stat{font-size:15px}.trait-tags{font-size:7px}.bench{height:57px}}
@media(max-width:980px){.layout{grid-template-columns:150px minmax(0,1fr)}.right-sidebar{grid-column:1/-1;display:grid;grid-template-columns:1fr 220px;gap:20px;border-top:1px solid var(--line);padding:20px 0}.right-sidebar .standings-section{grid-row:1/3}.standings{display:grid;grid-template-columns:1fr 1fr;gap:6px}.right-sidebar .side-separator,.right-sidebar .log-section{display:none}.player-name{font-size:10px}.player-avatar{width:32px;height:34px}.player-hp{font-size:22px}.right-sidebar .inventory-section{grid-column:2}.round-path{gap:0}.round-node{width:28px}.round-node:after{left:25px;width:8px}.economy{gap:14px}.topnav{gap:18px;margin-left:auto;margin-right:10px}.nav-btn{font-size:9px;letter-spacing:1px}.topnav .nav-btn:first-child{display:none}.battlefield{height:350px}.shop-card{height:175px}.shop-art{height:115px}.shop-card-name{font-size:18px}.connection-note{padding-top:5px}}
@media(max-width:700px){.app-shell{padding:0 12px}.topbar{height:67px;gap:10px}.brand{gap:7px}.brand-mark{width:34px;height:34px}.brand-mark svg{width:34px;height:34px}.brand-title{font-size:20px;letter-spacing:3px}.brand-sub{font-size:6px;letter-spacing:1.6px;margin-top:4px}.topnav{display:none}.header-actions{gap:6px}.icon-btn{width:30px;height:30px}.header-help{display:grid!important}.roundbar{height:61px;gap:7px}.chapter{min-width:0;gap:8px}.chapter-no{font-size:24px;padding-right:10px}.eyebrow{font-size:7px;letter-spacing:1.2px}.chapter-title{font-size:9px;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.round-path{display:none}.economy{gap:14px}.metric{gap:5px}.metric svg{width:14px;height:14px}.metric-num{font-size:25px}.metric-label{font-size:6px;letter-spacing:.8px}.layout{display:flex;flex-direction:column;gap:0}.left-sidebar{width:100%;display:block;order:0}.left-sidebar>.section-title{display:none}.trait-list{display:flex;flex-direction:row;gap:8px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}.trait-row{width:auto;gap:5px;flex:none;padding:2px 4px 2px 0}.trait-icon{width:20px;height:20px;margin:0 4px}.trait-icon svg{width:13px;height:13px}.trait-name{font-size:8px}.trait-levels{display:none}.trait-count{font-size:14px}.left-sidebar .side-separator,.left-sidebar .inspector-section,.left-sidebar .help-card{display:none}.arena-column{width:100%;order:1}.arena-header{padding:10px 12px 0}.location{font-size:10px;letter-spacing:1px}.arena-sub{font-size:6px;letter-spacing:1px;margin-top:3px}.capacity b{font-size:18px}.capacity small{font-size:6px}.battlefield{height:292px;width:calc(100% - 16px);margin-top:9px}.board-cells{gap:2px}.board-cell{margin:1px 1px 3px}.unit-piece{width:calc(100% / 7 - 5px);height:calc(100% / 6 - 5px);left:calc(var(--col) * 100% / 7 + 2.5px);top:calc(var(--row) * 100% / 6 + 1px)}.piece-name{font-size:8px;bottom:8px;left:2px}.piece-stars{font-size:7px;left:2px}.piece-art{inset:0 0 9px}.piece-items i{width:3px;height:3px}.board-midline{left:-4px;right:-4px}.arena-footer{padding:9px 11px 11px;gap:6px;min-height:35px}.opponent-label{font-size:8px;gap:5px}.opponent-label svg{width:11px}.phase-pill{font-size:6px;letter-spacing:1px}.battle-time{font-size:11px}.bench-heading{margin-top:12px}.bench-heading .section-title{font-size:8px;letter-spacing:1px}.bench-hint{font-size:7px}.bench{height:51px;gap:4px}.bench .piece-name{font-size:7px;left:1px}.bench .unit-piece{width:100%;height:100%}.shop-bar{margin:15px 0 9px;gap:7px}.shop-title{font-size:12px;gap:7px}.shop-title svg{width:14px}.shop-controls{gap:5px}.action-button{height:29px;font-size:8px;padding:0 8px;gap:5px}.action-button svg{width:12px}.shop-grid{gap:6px;overflow-x:auto;padding:0 0 6px;grid-template-columns:repeat(5,minmax(81px,1fr));scrollbar-width:thin;scrollbar-color:var(--line) transparent}.shop-card{height:137px}.shop-art{height:85px}.shop-card-name{font-size:14px}.shop-card .trait-tags{font-size:6px;margin-top:4px;height:19px;white-space:normal;line-height:1.5}.shop-card-bottom{padding:0 5px 5px;margin-top:-3px}.shop-card .cost-chip{right:4px;top:4px;font-size:12px;padding:1px 4px;gap:2px}.cost-chip svg{width:10px}.shop-info-btn{width:17px;height:17px;left:4px;top:4px;font-size:9px}.shop-card-combine{font-size:6px;top:62px;padding:3px}.owned-dots{bottom:5px;right:5px}.footer-bar{padding:10px 0 17px;gap:7px;align-items:center}.primary-button{height:39px;min-width:145px;font-size:8px;letter-spacing:1px;gap:8px;padding:0 12px}.primary-button svg{width:14px;height:14px}.primary-button .shortcut{display:none}.level-number{width:29px;height:29px;margin:3px 4px}.level-number b{font-size:20px}.level-info{width:99px}.level-label{font-size:8px}.shop-odds{font-size:9px;gap:5px}.right-sidebar{order:2;width:100%;padding:14px 0;display:flex;flex-direction:column;gap:14px}.right-sidebar .section-title{font-size:8px;margin-bottom:8px}.standings{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.player-row{padding:6px 4px;gap:5px;display:grid;grid-template-columns:23px 1fr;min-height:45px}.player-avatar{height:28px;width:23px}.player-name{font-size:7px}.player-sub{font-size:6px;margin-top:1px}.player-hp{font-size:14px;position:absolute;right:4px;bottom:2px}.player-health{margin-top:3px;height:2px}.player-main{padding-bottom:3px}.inventory-section .inventory{display:flex;flex-wrap:wrap;gap:7px}.item-btn{height:35px;width:35px}.inventory-note{font-size:8px;max-width:none}.inventory-section{position:relative}.inventory-empty{font-size:9px}.mobile-help{display:block;padding:9px 10px;font-size:8px;line-height:1.8;color:#a4b695;border:1px solid #344b32;margin-bottom:12px;background:#142117}.result-banner h2{font-size:22px;letter-spacing:1.5px}.result-banner p{font-size:10px}.result-banner .result-seal{width:52px;height:52px}.result-banner .result-seal svg{width:26px;height:26px}.modal-backdrop{padding:13px}.modal{padding:23px 18px;max-height:92dvh}.modal h2{font-size:21px;padding-right:25px}.guide-grid{gap:17px}.guide-step p{font-size:9px}.guide-step h3{font-size:11px}.modal .modal-intro{font-size:10px}.collection-grid{grid-template-columns:1fr 1fr;gap:10px}.collection-art{height:135px}.collection-body h3{font-size:17px}.items-list{grid-template-columns:1fr}.modal-tabs{gap:6px}.modal-tab{font-size:9px;padding:6px 10px}.mode-options{gap:10px}.mode-option{padding:13px}.mode-option h3{font-size:15px}.mode-option p{font-size:9px}.item-detail h3{font-size:18px}.item-detail p{font-size:10px}.item-actions .primary-button{min-width:130px}.draft-grid{gap:8px}.draft-card{padding:18px 9px}.draft-card b{font-size:10px}.draft-card span{font-size:8px}.combine-options{grid-template-columns:1fr}.battle-hint{display:none}}
@media(max-width:370px){.app-shell{padding:0 8px}.battlefield{height:270px}.brand-title{font-size:18px}.brand-sub{letter-spacing:1px}.header-actions{gap:4px}.shop-title{font-size:11px}.action-button{padding:0 6px}.level-info{width:90px}.primary-button{min-width:130px}.bench{height:46px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Preserve the square source artwork while cropping each panel to its card. */
.piece-art,.shop-art,.inspector-art,.collection-art,.player-avatar{overflow:hidden;isolation:isolate;background-image:none!important}
.collection-art,.player-avatar{position:relative}
.piece-art:before,.shop-art:before,.inspector-art:before,.collection-art:before,.player-avatar:before{content:'';position:absolute;width:400%;aspect-ratio:1;left:0;top:50%;background:none;transform:translate(calc(var(--art-x) * -25%),calc(var(--art-y) * -25% - 12.5%));z-index:0;pointer-events:none}
.piece-art:after,.shop-art:after,.inspector-art:after{z-index:1;pointer-events:none}.inspector-top{z-index:2}
@media(min-width:981px) and (max-height:1000px){.topbar{height:68px}.roundbar{height:61px}.battlefield{height:286px}.arena-header{padding-top:10px}.arena-footer{padding-top:8px;padding-bottom:10px;min-height:34px}.bench-heading{margin-top:10px;margin-bottom:6px}.bench{height:53px}.shop-bar{margin-top:13px;margin-bottom:8px}.shop-card{height:151px}.shop-art{height:95px}.shop-card-name{font-size:17px}.footer-bar{padding-top:11px;padding-bottom:14px}.side-separator{margin:18px 0}.help-card{margin-top:14px}}
@media(max-width:700px){.unit-piece{min-height:40px}.icon-btn{width:34px;height:34px}.shop-controls .action-button{height:34px}.xp-button{min-width:36px;min-height:34px}.speed-btn{min-height:28px;min-width:30px}.modal-close{width:34px;height:34px}.shop-info-btn{width:23px;height:23px}.connection-note{font-size:7px;line-height:1.8}}

@media(max-width:700px){.shop-grid{grid-template-columns:repeat(5,minmax(101px,1fr))}.trait-levels{display:none!important}.shop-card-name{font-size:16px}.shop-card .trait-tags{font-size:7px}}

/* 0.2: readable cards, the same odd-r hex coordinates as the simulation. */
:root{--body:'Segoe UI',Arial,sans-serif}
.app-shell{max-width:1580px}.layout{grid-template-columns:200px minmax(0,1fr) 185px;gap:22px}.topbar{height:76px}.roundbar{height:70px}
.battlefield{height:450px!important;width:calc(100% - 28px);max-width:820px;margin-top:14px}.board-cells{display:block;gap:0}.board-cell{position:absolute;left:calc((var(--col) + var(--offset)) * 100% / 7.5);top:calc(var(--row) * 100% / 6);width:calc(100% / 7.5);height:calc(100% / 6);margin:0;border:0;border-radius:0;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);background:#96bd9820;box-shadow:inset 0 0 0 1px #afc7a720}
.board-cell:after{content:'';position:absolute;inset:2px;clip-path:inherit;background:#15251cbd;pointer-events:none}.board-cell.enemy-cell{background:#af917621}.board-cell.in-range{background:#a3e4c3a8}.board-cell.in-range:after{background:#2e67574a}.cell-mark{position:relative;z-index:2;color:#a2bc9d4d}.board-cell:hover:after{background:#759c5f30}.board-midline{top:50%;opacity:.5}
.unit-piece{left:var(--x)!important;top:var(--y)!important;transform:translate(-50%,-50%);width:calc(100% / 7.5 - 12px)!important;max-width:80px;height:66px!important;border:3px solid var(--rarity);border-bottom-width:4px;border-radius:3px;transition:opacity .2s,filter .15s;box-shadow:0 4px 9px #000a;text-align:left;z-index:5;background:#15251c;isolation:isolate}.unit-piece.selected{outline:2px dashed #e7f5cc;outline-offset:5px;border-color:var(--rarity)}.unit-piece.enemy{border-color:var(--rarity);box-shadow:0 0 0 1px #ad645d88,0 4px 8px #000a}.unit-piece.dead{opacity:.08!important;filter:grayscale(1);pointer-events:none;z-index:1}.piece-art{inset:0 0 19px;z-index:-1}.piece-name{bottom:21px;left:3px;right:3px;font-size:9px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f0efdf;text-shadow:0 1px 3px #000;background:#0b151aba;padding:2px}.piece-stars{top:auto;bottom:6px;left:2px;font-size:9px;line-height:10px;letter-spacing:-1px}.piece-items{top:auto;bottom:5px;right:1px;gap:1px}.piece-item{height:13px;width:13px;display:grid;place-items:center;background:#17251c;color:#e5d2a3;border:1px solid #a88d5c}.piece-status{position:absolute;top:20px;left:-4px;display:flex;gap:2px;z-index:12}.piece-status i{font:normal 10px Arial;background:#25233d;color:#f5d086;border:1px solid #9f8cb3;border-radius:2px;padding:1px}.hp-track{height:4px;bottom:3px;left:0;right:0}.mana-track{height:2px;bottom:0;left:0;right:0}.piece-shield{position:absolute;inset:auto 0 3px;height:4px;width:var(--shield,100%);background:#e9eddaa8;pointer-events:none;border:0;box-shadow:none}.piece-art:before,.shop-art:before,.inspector-art:before,.collection-art:before,.player-avatar:before,.draft-art:before{background-image:var(--portrait,none)}
.card-badge{position:absolute;top:1px;width:18px;height:18px;display:grid;place-items:center;background:#10231df5;border:1px solid var(--rarity,#8aab91);color:#f0e6c8;z-index:8;box-shadow:0 1px 3px #000a}.origin-badge{left:1px;border-radius:0 0 6px 0}.class-badge{right:1px;border-radius:0 0 0 6px}.card-badge svg{width:13px;height:13px;stroke-width:1.7}
.shop-grid{gap:12px;padding:5px 3px 9px}.shop-card{height:205px!important;border:4px solid var(--rarity);overflow:visible;background:#14241b}.shop-art{height:135px!important;overflow:hidden}.shop-card .card-badge{width:23px;height:23px;top:3px}.shop-card .card-badge svg{width:17px;height:17px}.shop-card .origin-badge{left:3px}.shop-card .class-badge{right:3px}.shop-card .cost-chip{top:-7px;left:50%;right:auto;transform:translateX(-50%);z-index:10;padding:2px 6px;line-height:20px;border:1px solid var(--rarity);background:#18241b}.shop-info-btn{top:auto;bottom:4px;left:auto;right:4px;z-index:10;width:26px;height:26px}.shop-card-name{font-size:19px;line-height:1.1;white-space:normal;min-height:23px}.shop-card .trait-tags{font-size:9px;white-space:normal;line-height:1.5;padding-right:14px}.shop-card-bottom{margin-top:-8px;padding:0 8px 8px;position:relative;z-index:2}.shop-card-combine{top:108px;font-size:8px;padding:5px;z-index:7}.owned-dots{bottom:4px;left:6px;right:auto}
.bench{height:70px;gap:7px}.bench .unit-piece{width:100%!important;height:100%!important;left:0!important;top:0!important;transform:none;max-width:none}.bench-slot{min-width:0}.bench .piece-name{font-size:9px}.bench-heading{margin-top:13px}.bench-hint{font-size:10px}
.item-tray{margin-top:14px;padding:11px 12px;background:#102019;border:1px solid #526950;box-shadow:inset 0 1px 0 #799a6222}.tray-heading{display:flex;align-items:center;gap:14px;margin-bottom:9px;font-size:10px;color:#aabca6}.tray-heading h2{font-size:11px;letter-spacing:1.5px;margin:0;color:#e0dcc2}.tray-heading h2 span{color:#a9bc9e;font-weight:normal;letter-spacing:0;margin-left:5px}.text-button{border:0;background:none;color:#b8d6b1;text-decoration:underline;padding:0;font-size:11px}.item-tray .inventory{display:flex;gap:8px;overflow-x:auto;min-height:44px;padding:1px 0 5px}.item-btn{width:44px!important;height:44px!important;min-width:44px;background:#20362a;border:2px solid #64806c;border-radius:3px;display:grid;place-items:center;color:#dac9a1}.item-btn.complete{border-color:#b59d6a;background:#2e2c22}.item-btn.selected{outline:2px solid #d6e7b7;outline-offset:2px}.item-btn svg{width:28px;height:28px}.tray-help{font-size:10px;color:#9bb297;margin-top:4px;line-height:1.5}.item-tray .inventory-empty{font-size:11px;max-width:none}.item-symbol{flex:none}.range-legend{padding:7px 14px 0;display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#a5c7aa;min-height:18px}
.stat-grid.expanded{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:12px 0}.stat-grid .stat{font-size:17px;background:#1a3024;padding:6px 2px;min-width:0;border-bottom:1px solid #4a644f}.stat small{font-size:8px;letter-spacing:.3px;text-transform:uppercase;color:#b2c0a3}.stat-breakdown,.skill-details{font-size:11px;color:#c1ceb2;line-height:1.7;margin:9px 0}.stat-breakdown summary,.skill-details summary{cursor:pointer;color:#cbdcb7}.stat-breakdown p,.skill-details p{margin:8px 0}.skill-desc{font-size:11px;line-height:1.65}.range-buttons{display:flex;gap:5px}.range-buttons .action-button{height:30px;font-size:9px;flex:1;padding:0 4px}.unit-items{gap:6px;margin-top:13px}.small-item{width:44px;height:44px;font-size:20px}.small-item svg{width:29px;height:29px}.remove-equipment{width:100%;margin-top:10px}.inspector-name{font-size:24px}.inspector-body .trait-tags{font-size:10px}.trait-name{font-size:11px}.trait-row{padding:7px 2px}.trait-content{min-width:0}.trait-levels{font-size:10px}.left-sidebar .trait-list{max-height:420px;overflow-y:auto}.section-title{font-size:10px}.player-name{font-size:10px}
.modal{font-family:var(--body);border:1px solid #72896d;max-width:650px}.modal-close{position:sticky;float:right;top:0;margin-top:-4px;margin-right:-4px;z-index:50;min-width:40px;min-height:40px;background:#1e3426;border:1px solid #74856d}.inspect-modal-body .inspector{max-width:430px;margin:auto}.modal .inspector-art{height:210px}.inspect-modal-body .stat-grid{grid-template-columns:repeat(4,1fr)}.modal .skill-desc,.modal .modal-intro{font-size:13px}.modal .skill-name{font-size:17px}.modal .unit-items .small-item{width:44px;height:44px}.modal .trait-tags{font-size:12px}.modal p{line-height:1.6;color:#c7d3b7;font-size:13px}.modal h2{font-size:27px}.item-detail{align-items:flex-start;gap:18px}.item-detail h3{margin:0 0 8px}.item-detail p{margin:0}.equip-target{font-size:14px;color:#c6dfa9;margin-bottom:18px}.stat-deltas{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.stat-deltas span{font-size:12px;background:#213f2d;padding:9px;display:flex;flex-direction:column;gap:4px}.stat-deltas b{color:#d4ecc1}.item-actions{flex-wrap:wrap;gap:10px}.item-actions button{min-height:44px}.recipe-preview{padding:10px;border:1px dashed #73866c}.draft-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.draft-art{position:relative;width:100%;height:120px;overflow:hidden}.draft-art:before{content:'';position:absolute;width:400%;aspect-ratio:1;left:0;top:50%;background-size:100% 100%;transform:translate(calc(var(--art-x) * -25%),calc(var(--art-y) * -25% - 12.5%))}.draft-card{padding:10px;gap:8px}.draft-card b{font-size:13px}.draft-card span{font-size:11px}.draft-card svg{margin:auto}.collection-card{border:3px solid var(--rarity);position:relative}.collection-body .trait-tags{font-size:10px}.collection-art{height:160px}.codex-item p{font-size:12px}.codex-item small{font-size:10px}.modal-tabs{flex-wrap:wrap}.modal-tab{font-size:12px}.collection-cost{font-size:15px}.collection-body h3{font-size:20px}.item-detail-icon{width:64px;min-width:64px}
#drag-preview{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:370px;max-width:90vw;z-index:200;background:#10271cf5;border:2px solid #adc38a;box-shadow:0 10px 45px #000b;padding:18px;color:#e1e5c7;pointer-events:none;font-size:12px}#drag-preview .item-detail{margin:8px 0}#drag-preview .item-detail h3{font-size:17px}#drag-preview .item-detail p{font-size:11px}#drag-preview .stat-deltas{margin-bottom:0}.legacy-note{font-size:11px;padding:9px 0;color:#b4c3a4}.legacy-note a{color:#d6d9a6;margin-left:12px}.combat-report{display:flex;flex-direction:column;gap:15px}.combat-report>div{position:relative;padding-bottom:12px}.combat-report b{display:block;font-size:14px}.combat-report span{display:block;color:#bdc9ae;font-size:11px;margin-top:5px}.combat-report i{display:block;height:4px;position:absolute;bottom:0;background:#9ebc85}.volume-control{display:flex;flex-direction:column;gap:15px;color:#dce4c9;margin:25px 0}.volume-control input{width:100%;accent-color:#b4c686}.result-actions{display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap}.result-banner{z-index:40}.result-banner p{font-size:12px;max-width:420px;margin:10px auto}.component-choice{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:15px 0}.component-choice button{height:auto;min-height:44px}.result-loot{flex-wrap:wrap;justify-content:center}.float-number.spell{font-size:12px;background:#102118e8;border:1px solid #85956e;border-radius:2px;padding:3px;white-space:nowrap;z-index:40}.float-number.critical{font-size:24px;color:#ffe099}.unit-piece.attacking{animation:cardWindup var(--pulse-duration,350ms) ease-out}.unit-piece.casting{animation:cardCast var(--pulse-duration,600ms) linear}.unit-piece.hurt{animation:cardHurt var(--pulse-duration,180ms) ease-out}.battle-effects{z-index:20;pointer-events:none;overflow:visible}
@keyframes cardWindup{0%,100%{filter:brightness(1)}70%{filter:brightness(1.5)}}@keyframes cardCast{0%,100%{box-shadow:0 0 0 1px var(--rarity)}50%{box-shadow:0 0 14px 3px var(--rarity)}}@keyframes cardHurt{0%,100%{filter:brightness(1)}30%{filter:brightness(1.7) saturate(.5)}}
.reduce-motion *{animation:none!important;transition:none!important}.reduce-motion .float-number{animation:none!important}.inventory-note{font-size:11px}
@media(max-width:1150px){.layout{grid-template-columns:170px minmax(0,1fr);gap:16px}.right-sidebar{grid-column:1/-1;display:block}.right-sidebar .standings{grid-template-columns:repeat(4,1fr);display:grid}.right-sidebar .log-section{display:none}.shop-card-name{font-size:17px}.battlefield{height:432px!important}.unit-piece{width:calc(100% / 7.5 - 5px)!important}.shop-card{height:195px!important}.shop-art{height:125px!important}}
@media(max-width:700px){.app-shell{padding:0 9px}.topbar{height:68px}.header-actions{gap:4px}.header-actions .icon-btn{width:32px;height:36px}.header-help{display:none!important}.brand-title{font-size:19px}.brand-sub{font-size:6px}.roundbar{height:65px}.chapter-title{font-size:10px}.metric-label{font-size:7px}.layout{display:flex;gap:0}.left-sidebar .trait-list{display:flex;max-height:none;gap:7px;overflow-x:auto;overflow-y:hidden;padding:4px 0 9px;margin:0}.trait-row{padding:4px;gap:4px;border:1px solid #405d40;border-radius:3px}.trait-icon{margin:0;width:18px;height:20px}.trait-name{font-size:10px}.trait-count{font-size:15px}.trait-levels{display:none!important}.arena-column{width:100%}.battlefield{width:calc(100% - 8px);height:408px!important;min-width:0;margin-top:10px}.unit-piece{width:calc(100% / 7.5 - 2px)!important;height:61px!important;min-width:39px;min-height:61px;border-width:3px}.piece-name{font-size:8px;left:0;right:0;bottom:20px}.piece-stars{font-size:8px;bottom:6px;left:0}.piece-items{right:0;bottom:6px;gap:0}.piece-item{width:11px;height:12px;border-width:.5px}.piece-item svg{width:11px;height:11px}.unit-piece .card-badge{width:14px;height:14px;top:0}.unit-piece .card-badge svg{width:11px;height:11px}.unit-piece .origin-badge{left:0}.unit-piece .class-badge{right:0}.piece-art{bottom:18px}.piece-status{top:15px}.arena-header{padding:10px 9px 0}.arena-footer{padding:10px 9px}.phase-pill{font-size:8px}.opponent-label{font-size:10px}.range-legend{font-size:9px;padding:7px 9px 0;display:block;line-height:1.5}.range-legend span{display:block}.battle-time{font-size:11px}.speed-btn{min-height:34px;min-width:36px}.item-tray{margin-top:9px;padding:9px 8px}.tray-heading{gap:10px;font-size:9px}.tray-heading h2{font-size:10px;letter-spacing:.5px}.tray-heading .text-button{font-size:10px}.tray-help{font-size:10px}.item-tray .inventory{gap:7px}.bench-heading{margin-top:13px}.bench-heading .section-title{font-size:10px}.bench-hint{font-size:9px;max-width:220px;text-align:right}.bench{display:grid;grid-template-columns:repeat(9,44px);gap:6px;height:66px;overflow-x:auto;overflow-y:hidden;padding:3px 0 2px}.bench .unit-piece{height:60px!important}.shop-bar{margin:15px 0 8px}.shop-grid{grid-template-columns:repeat(5,minmax(116px,1fr));gap:10px;padding:7px 4px 10px;overflow-x:auto;overflow-y:hidden}.shop-card{height:190px!important}.shop-art{height:118px!important}.shop-card-name{font-size:17px;min-height:25px}.shop-card .trait-tags{font-size:9px;height:auto}.shop-card-bottom{padding:0 6px 9px}.shop-info-btn{width:28px;height:28px;bottom:1px;right:0}.shop-card .cost-chip{font-size:13px;line-height:18px}.shop-card-combine{top:96px;font-size:7px}.shop-title{font-size:13px}.shop-controls .action-button{min-height:37px;font-size:10px}.footer-bar{position:sticky;bottom:0;z-index:45;background:#101d16f7;border-top:1px solid #5b7251;padding:11px 3px 12px}.primary-button{min-height:44px;font-size:10px}.level-info{width:109px}.level-label{font-size:9px}.shop-odds{font-size:11px}.level-number b{font-size:23px}.xp-button{min-height:40px}.right-sidebar{padding:17px 0}.right-sidebar .standings{display:grid;grid-template-columns:repeat(2,1fr)}.player-row{grid-template-columns:28px 1fr;padding:8px;min-height:55px}.player-name{font-size:10px}.player-sub{font-size:9px}.player-hp{font-size:19px;right:8px;bottom:6px}.player-avatar{width:28px;height:34px}.player-health{margin-right:25px}.right-sidebar .section-title{font-size:10px}.modal-backdrop{padding:8px;align-items:flex-end}.modal{padding:20px 17px;max-height:92dvh;border-radius:10px 10px 0 0}.modal h2{font-size:24px}.modal .skill-desc,.modal .modal-intro{font-size:12px}.modal .stat{font-size:18px}.modal .stat small{font-size:9px}.modal .stat-breakdown,.modal .skill-details{font-size:12px}.modal .action-button{font-size:11px;min-height:38px}.modal .inspector-art{height:180px}.modal .small-item{width:44px;height:44px}.modal-close{margin-right:-5px;margin-top:-4px}.collection-grid{gap:10px}.collection-art{height:145px}.collection-body h3{font-size:18px}.collection-body .trait-tags{font-size:10px}.modal-tab{font-size:11px;padding:8px 9px}.collection-card{min-width:0}.result-banner h2{font-size:23px}.result-banner p{font-size:11px;padding:0 12px}.result-actions{gap:8px}.result-actions .action-button{min-height:38px;font-size:11px}.result-loot span{font-size:10px}.connection-note{font-size:8px;line-height:1.8}.legacy-note{font-size:10px}.draft-grid{grid-template-columns:1fr 1fr}.draft-art{height:120px}.draft-card b{font-size:12px}.draft-card span{font-size:10px}.stat-grid.expanded{gap:5px}.inspect-modal-body .stat-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:701px){.battlefield{height:480px!important}.unit-piece{height:74px!important;max-width:66px}.piece-art{inset:0 0 18px}.piece-name{bottom:19px;font-size:10px}.piece-stars{bottom:6px;font-size:10px}.piece-items{bottom:5px}.bench .unit-piece{height:100%!important;max-width:none}}
.piece-art:after{background:linear-gradient(0deg,#0c1917c9 0%,transparent 50%)!important}.shop-art:after{background:linear-gradient(0deg,#14241b 0%,transparent 40%)!important}
/* 0.3: rarity, allegiance and neutral creatures are separate visual signals. */
.piece-art:before,.shop-art:before,.inspector-art:before,.collection-art:before,.player-avatar:before,.draft-art:before,.awakening-portrait:before{width:calc(var(--art-cols,4)*100%);transform:translate(calc(var(--art-x)*-100% / var(--art-cols,4)),calc((var(--art-y) + .5)*-100% / var(--art-rows,4)))}
.unit-piece{clip-path:none!important;isolation:isolate;border-color:var(--rarity)!important}.unit-piece.ally{--team:#6de7f1}.unit-piece.enemy{--team:#ffac73}.unit-piece .hp-fill{background:var(--team)!important;box-shadow:0 0 4px color-mix(in srgb,var(--team),transparent 60%)}.unit-piece .hp-track{height:5px;background:#081014;border:1px solid #000}.piece-allegiance{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);display:flex;gap:3px;align-items:center;justify-content:center;min-width:42px;padding:1px 5px;font-size:8px;line-height:14px;font-weight:800;letter-spacing:.5px;color:#05161d;background:var(--team);box-shadow:0 2px 0 #0009;z-index:30;border:1px solid #d9faff}.ally .piece-allegiance{border-radius:3px 3px 8px 8px}.enemy .piece-allegiance{clip-path:polygon(8% 0,92% 0,100% 50%,85% 100%,15% 100%,0 50%);border-color:#ffe6c4}.unit-piece.dead .piece-allegiance{opacity:.35}.bench .piece-allegiance{display:none}.board-faction{display:flex;align-items:center;gap:10px;padding:6px 14px;font-size:9px;letter-spacing:.7px;border-block:1px solid #43594a44}.board-faction>span{display:flex;align-items:center;gap:5px;font-weight:800;min-width:100px}.board-faction b{font-size:10px;font-weight:500;letter-spacing:0}.board-faction small{margin-left:auto;font-size:8px}.enemy-faction{color:#ffba8c;background:#59391c24;margin-top:10px}.ally-faction{color:#91e8ef;background:#19515f24}.board-cells .ally-cell{background:#143e3c66;border-color:#4d90845c}.board-cells .enemy-cell{background:#422d242f;border-color:#80624445}.board-midline{background:linear-gradient(90deg,transparent,#b4a0806b,transparent)}.combat-feed{min-height:36px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;text-align:center;padding:8px 12px;font-size:10px;background:#0e1c18;border-bottom:1px solid #43594a44;color:#a8beb2}.combat-feed b{color:#e0e7cb;font-weight:500}.feed-ally{color:#78e0eb}.feed-enemy{color:#ffb180}.battle-effects{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:22;pointer-events:none}.piece-allegiance,.piece-name,.hp-track,.mana-track{z-index:24}.rarity-6 .cost-chip{color:#ffd5d9;background:#421923}.monster-piece,.monster-card{border:5px solid #030609!important;box-shadow:0 0 0 1px #a8b6b3,inset 0 0 0 1px #bbc6bd!important;background:#0c1114!important}.monster-seal{position:absolute;z-index:10;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:3px;background:#05080b;color:#e5e6d9;padding:3px 6px;border:1px solid #a6aca5;clip-path:polygon(0 0,100% 0,100% 75%,80% 100%,20% 100%,0 75%)}.monster-seal b{font-size:8px;letter-spacing:1px}.unit-piece .monster-seal{padding:1px 3px;gap:2px;top:-3px}.unit-piece .monster-seal svg{width:10px;height:10px}.unit-piece .monster-seal b{font-size:6px;letter-spacing:.4px}.monster-card .collection-cost{color:#d6dfda}.inspector-rarity{font-size:10px;text-transform:uppercase;letter-spacing:1px;margin:6px 0}.inspector:has(.inspector-rarity:first-child){border-color:#bcc5bc}.inspector-rarity[style*="070a0d"]{color:#d5ddd6!important}.preview-skill-button{width:100%;margin:7px 0 10px;justify-content:center;gap:8px;border-color:#829c77;min-height:36px}.awakening-inline{width:100%;font-size:9px;color:#ffadb8;min-height:38px}.awakening-chip{display:flex;align-items:center;gap:5px;border:1px solid #b44a5c;background:#341c24;color:#ffb5be;font-size:9px;min-height:30px;padding:4px 8px}.shop-bar{flex-wrap:wrap;gap:8px}.shop-controls{flex-wrap:wrap}.codex-controls{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end;margin:16px 0}.codex-controls label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:#c7d8c1}.codex-controls input,.codex-controls select{font:inherit;font-size:12px;min-height:40px;padding:8px;background:#11251e;color:#e6ead6;border:1px solid #78906e;border-radius:2px;width:100%;min-width:0}.codex-controls input:focus-visible,.codex-controls select:focus-visible{outline:2px solid #b8d4ad}.codex-controls .action-button{min-height:40px}.codex-filters{display:grid;gap:9px;padding:13px;background:#0d1a16;border:1px solid #405947}.codex-filters>div{display:grid;grid-template-columns:75px 1fr;align-items:center;gap:8px}.codex-filters b{font-size:10px;font-weight:500;color:#a8b8a0}.codex-chip-row{display:flex;flex-wrap:wrap;gap:5px}.codex-chip{--chip-color:#b3cca9;display:flex;align-items:center;gap:4px;min-height:32px;border:1px solid #415845;padding:4px 9px;font-size:10px;border-radius:3px;color:#b7c8af}.codex-chip:hover,.codex-chip.active{border-color:var(--chip-color);background:color-mix(in srgb,var(--chip-color) 14%,#0e1a16);color:#eff7df}.codex-chip i{height:7px;width:7px;background:var(--chip-color);border-radius:1px}.codex-result-count{padding:16px 0 0;font-size:11px;color:#a8bb9c}.codex-group{margin:18px 0 30px}.codex-group>h3{margin:0 0 12px;font-family:var(--serif);font-size:16px;display:flex;align-items:center;gap:9px}.codex-group>h3 small{font:10px var(--body);color:#abbca4;border:1px solid #577451;padding:2px 6px}.codex-empty{padding:50px;text-align:center;color:#c4ccaf}.collection-card{text-align:left;overflow:hidden;transition:transform .15s,border-color .15s;min-height:220px}.collection-card:hover{transform:translateY(-3px);box-shadow:0 5px 14px #0008}.collection-body{position:relative;z-index:4;background:#15221be8;padding:10px}.codex-stats{font-size:9px;display:flex;gap:8px;color:#a8bca5;margin-top:9px}.codex-lock{position:absolute;left:8px;top:115px;display:flex;align-items:center;gap:5px;font-size:8px;letter-spacing:1px;background:#31151dea;color:#ffc5c9;padding:5px;border:1px solid #ff6c80;z-index:5}.collection-card .card-badge{width:25px;height:25px;top:6px}.collection-card .origin-badge{left:6px}.collection-card .class-badge{right:6px}.collection-card .collection-cost{font-size:12px;white-space:nowrap}.collection-body h3{padding-right:25px}.awakening-portrait{height:160px;width:140px;float:right;position:relative;overflow:hidden;border:3px solid #ff455d;margin:0 0 15px 20px}.awakening-portrait:before{content:'';position:absolute;aspect-ratio:1;top:50%;left:0;background:var(--art-url) 0 0 / 100% 100%}.awakening-checks{padding:10px 14px;background:#121c18;border:1px solid #56684d}.awakening-checks p{margin:5px 0;font-size:12px;color:#a5b29c}.awakening-checks p.done{color:#bce6aa}.preview-arena{border:1px solid #5f7863;background:radial-gradient(ellipse at center,#263c2d,#0f1c18);margin-top:14px}.preview-board{height:390px;position:relative;overflow:hidden}.preview-grid{position:absolute;inset:0;background-image:linear-gradient(#9eb59312 1px,transparent 1px),linear-gradient(90deg,#9eb59312 1px,transparent 1px);background-size:13.3333% 16.6666%}.preview-board .unit-piece{pointer-events:none}.preview-team{font-size:9px;letter-spacing:1.5px;padding:6px 14px;border-block:1px solid #70806e44}.preview-team.enemy{color:#ffc296;background:#65371a22}.preview-team.ally{color:#8be4eb;background:#14566422}.preview-caption{font-size:12px;min-height:42px;background:#12261d;border:1px solid #526c50;border-top:0;padding:12px;color:#e9edcd}.preview-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 8px}.preview-description{max-width:650px;font-size:12px!important}.preview-note{font-size:10px!important;color:#a8b79d!important}.preview-controls .action-button{min-height:38px}.preview-controls .text-button{margin-left:auto}.preview-board .piece-items{display:none}
@media(min-width:701px){.battlefield{height:540px!important}.unit-piece{max-width:74px;height:76px!important}.preview-board .unit-piece{max-width:64px;height:66px!important}.modal.wide{max-width:980px}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media(max-width:700px){.board-faction{padding:6px 8px;gap:6px}.board-faction>span{min-width:80px;font-size:8px}.board-faction b{font-size:9px}.board-faction small{font-size:6px}.battlefield{height:450px!important;margin-top:0}.piece-allegiance{top:calc(100% + 4px);font-size:6px;min-width:31px;line-height:11px;padding:0 3px}.piece-allegiance svg{width:8px;height:8px}.combat-feed{font-size:9px;padding:8px;min-height:36px}.shop-controls{gap:5px;width:100%;justify-content:flex-end}.awakening-chip{margin-right:auto;font-size:9px}.codex-controls{grid-template-columns:1fr 1fr;gap:9px}.codex-controls label:first-child{grid-column:1/-1}.codex-controls .action-button{grid-column:1/-1;min-height:32px}.codex-filters{padding:9px}.codex-filters>div{grid-template-columns:1fr;gap:5px}.codex-chip{min-height:32px;font-size:9px;padding:4px 6px}.codex-chip-row{gap:4px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-card{min-height:225px}.collection-body h3{font-size:17px;padding-right:20px}.codex-stats{font-size:8px;gap:6px}.codex-lock{top:105px;left:5px;font-size:7px}.collection-art{height:135px}.awakening-portrait{width:100px;height:120px;margin-left:12px}.preview-board{height:350px}.preview-board .unit-piece{height:60px!important;min-width:34px}.preview-controls{gap:6px}.preview-controls .action-button{font-size:10px;flex:1}.preview-controls .primary-button{flex-basis:100%}.preview-controls .text-button{margin:8px 0 0}.preview-caption{font-size:10px;min-height:44px}}
.board-faction,.combat-feed,.range-legend{position:relative;z-index:3}.enemy-faction{background:#30221eea}.ally-faction{background:#153233eb}.board-cell.enemy-cell:after{background:#33251fd1}.board-cell.ally-cell:after{background:#183331ce}.board-cell.in-range:after,.board-cell:hover:after{background:#6089618c}.piece-name{background:#0b1717ba;text-shadow:0 1px 2px #000}
.shop-quality{position:absolute;left:8px;top:82px;z-index:5;padding:2px 5px;font-size:8px;font-weight:600;color:var(--rarity);background:#0c1718db;border-left:2px solid var(--rarity)}.codex-return{display:block;margin:16px auto 0}.inspector{clip-path:none}.monster-inspector{border:5px solid #030609!important;box-shadow:0 0 0 1px #83928b}.monster-inspector .cost-chip{color:#e6ebdf;border-color:#7b8c82}.preview-controls .action-button:focus-visible{outline-offset:1px}
.opening-market{grid-column:1/-1;display:grid;gap:5px;padding:16px;border:1px dashed #657b68;color:#c9d8c0}.opening-market b{font-size:14px;color:#e6e5c9}.opening-market span{font-size:11px}.scouting-prompt{position:absolute;z-index:3;top:18%;left:10%;width:80%;text-align:center;background:#17241ce0;padding:9px;border:1px solid #617460;color:#d1dfc3;font-size:11px;pointer-events:none}
.cast-history{margin:14px 0 20px;padding:10px 12px;border:1px solid #526b55}.cast-history summary{cursor:pointer;color:#d6e3c6;font-size:13px}.cast-history ol{list-style:none;padding:0;max-height:42vh;overflow:auto}.cast-history li{font-size:11px;padding:7px 0;border-bottom:1px solid #34483c}.cast-history time{display:inline-block;min-width:43px;color:#aac29d}.cast-history span{display:block;color:#bac8b3;margin-left:43px}.result-damage{color:#e7dec3}

/* The stage, reserves and market share the actual play window. Only detail panels scroll. */
html, body, #app { height: 100%; margin: 0; }
body { min-height: 0; overflow: hidden; }
.app-shell {
  --gap: clamp(8px, 1vw, 20px);
  --rail-left: clamp(198px, 16vw, 344px);
  --rail-right: clamp(185px, 14vw, 305px);
  --dock-height: clamp(136px, 18vh, 208px);
  --edge: clamp(8px, 1.1vw, 24px);
  box-sizing: border-box; width: 100%; max-width: none; height: 100vh; height: 100dvh;
  margin: 0; padding: max(0px, env(safe-area-inset-top)) max(var(--edge), env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(var(--edge), env(safe-area-inset-left));
  display: flex; flex-direction: column;
}
.topbar { flex: 0 0 clamp(52px, 6.4vh, 76px); height: auto; min-width: 0; gap: var(--gap); }
.brand { flex: none; }
.brand-title { font-size: clamp(20px, 1.55vw, 30px); }
.brand-mark, .brand-mark svg { width: clamp(30px, 2.4vw, 46px); height: clamp(30px, 2.4vw, 46px); }
.topbar .roundbar { flex: 1; height: auto; min-width: 0; gap: 14px; padding: 0 clamp(4px, 1.3vw, 24px); }
.roundbar .chapter { min-width: 0; flex-shrink: 1; }
.roundbar .chapter > div:last-child { min-width: 0; }
.roundbar .economy, .roundbar .round-path { flex-shrink: 0; }
.roundbar .chapter-no { flex: none; white-space: nowrap; line-height: 1.1; font-size: clamp(23px, 2vw, 35px); }
.roundbar .chapter-title { max-width: 18em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.roundbar .metric-num { font-size: clamp(22px, 1.8vw, 31px); }
.topbar .metric, .topbar .metric-label { white-space: nowrap; }
.topnav { margin: 0; gap: clamp(10px, 1.3vw, 25px); }
.header-actions { gap: clamp(3px, .6vw, 9px); flex: none; }
.quick-tools { display: none; gap: 4px; align-items: center; }
.hud-tool { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 2px 7px; color: #d9dfce; border: 1px solid #4a6054; background: #182720; }
.hud-tool b { color: #afcfaa; font-size: 10px; }
.layout {
  flex: 1; min-height: 0; min-width: 0; padding-top: var(--gap);
  display: grid; gap: var(--gap); align-items: stretch;
  grid-template: "info field rivals" minmax(0, 1fr) "market market market" var(--dock-height) / var(--rail-left) minmax(0, 1fr) var(--rail-right);
}
.left-sidebar { grid-area: info; }
.right-sidebar { grid-area: rivals; }
.layout > .sidebar { display: flex; flex-direction: column; align-items: stretch; min-height: 0; min-width: 0; padding: 0; border: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #506457 transparent; overscroll-behavior: contain; }
.sidebar > * { flex-shrink: 0; }
.sidebar .section-title { margin: 0 0 8px; }
.left-sidebar .trait-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.left-sidebar .trait-row { width: 100%; min-width: 0; min-height: 38px; padding: 4px; gap: 5px; }
.left-sidebar .trait-icon { flex: none; width: 20px; height: 20px; margin: 0 3px; }
.left-sidebar .trait-icon svg { width: 13px; height: 13px; }
.left-sidebar .trait-content { min-width: 0; }
.left-sidebar .trait-name { font-size: 11px; line-height: 1.1; }
.left-sidebar .trait-count { margin-left: auto; font-size: 15px; }
.sidebar .side-separator { margin: 9px 0; }
.inspector-section .inspector-art { height: clamp(80px, 11.5vh, 148px); }
.inspector-section .inspector-name { font-size: clamp(17px, 1.3vw, 23px); }
.inspector-section .skill-desc { font-size: 12px; }
.right-sidebar { gap: 12px; }
.right-sidebar .standings { display: flex; flex-direction: column; gap: 2px; }
.right-sidebar .player-row, .hud-standings .player-row { display: flex; min-height: 37px; padding: 4px; }
.right-sidebar .player-name, .hud-standings .player-name { font-size: 11px; }
.right-sidebar .player-avatar { width: 28px; height: 32px; }
.right-sidebar .player-hp { font-size: 21px; }
.right-sidebar .log-section { display: block; }
.right-sidebar .item-tray { margin: 0; padding: 8px; }
.right-sidebar .tray-heading { flex-wrap: wrap; gap: 4px 8px; margin-bottom: 6px; }
.right-sidebar .item-tray .inventory, .modal .item-tray .inventory { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px; min-height: 26px; max-height: 136px; overflow: auto; }
.right-sidebar .item-btn { width: 34px !important; height: 34px !important; min-width: 34px; }
.right-sidebar .item-btn svg { width: 22px; height: 22px; }
.right-sidebar .item-tray .inventory-empty { line-height: 1.4; }
.right-sidebar .tray-help { font-size: 10px; line-height: 1.25; }
.right-sidebar .item-tray .inventory { max-height: 79px; }
.arena-column { grid-area: field; display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; }
.arena-column > .scout-banner { flex: none; margin: 0 0 4px; padding: 3px 9px; }
.arena-column .arena { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.arena-header { flex: none; padding: 5px 12px; gap: 10px; }
.arena-header .arena-sub { margin-top: 0; }
.arena-header .capacity { margin-left: auto; display: flex; align-items: baseline; gap: 5px; }
.arena-header .capacity b { font-size: 21px; line-height: 1; }
.arena-header .capacity small { display: inline; margin: 0; }
.arena-column .enemy-faction { margin-top: 0; }
.arena-clock { display: flex; align-items: center; gap: 9px; }
.arena-clock .speed-btn { min-width: 32px; min-height: 28px; }
.arena-column .board-faction { flex: none; min-height: 19px; padding: 3px 10px; }
.arena-column .field-slot {
  flex: 1 1 0; min-height: 0; min-width: 0; position: relative; container-type: size;
}
.arena-column .field-slot > .battlefield {
  height: 100% !important; min-height: 0; width: min(100%,142cqh); max-width: none;
  margin: 0 auto; container-type: size;
}
.battlefield .unit-piece {
  --card-height: clamp(20px, calc(100cqh / 6 - 14px), 96px);
  height: var(--card-height) !important; min-height: 0; min-width: 0;
  width: min(calc(100cqw / 7.5 - 5px), clamp(43px, 15cqh, 106px)) !important; max-width: none;
}
.battlefield .piece-allegiance { top: calc(100% + 2px); min-width: 29px; line-height: 11px; padding: 0 4px; font-size: 7px; }
.battlefield .piece-name { font-size: clamp(8px, 1.8cqh, 12px); line-height: 1.05; bottom: 13px; }
.battlefield .piece-stars { font-size: 9px; bottom: 4px; }
.battlefield .piece-art { bottom: 11px; }
.battlefield .piece-items { bottom: 4px; }
.arena-column .combat-feed { flex: none; min-height: 23px; padding: 3px 8px; font-size: 11px; line-height: 1.3; }
.arena:not([data-phase="combat"]) > .combat-feed { display: none; }
.arena-column .bench-heading { min-width: 0; overflow: hidden; white-space: nowrap; gap: 6px; }
.bench-heading .range-legend { flex: 1 1 0; min-width: 0; min-height: 0; padding: 0; display: flex; justify-content: end; align-items: center; gap: 8px; font-size: 11px; line-height: 1.1; overflow: hidden; }
.bench-heading .range-legend span, .bench-hint { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bench-hint { max-width: 42%; }
.bench-heading .section-title { flex: none; white-space: nowrap; }
.arena-column .bench-heading { flex: none; margin: 5px 0 3px; }
.bench-heading .section-title { margin: 0; }
.arena-column .bench { flex: 0 0 clamp(42px, 5.4vh, 70px); height: auto; min-width: 0; width: 100%; padding: 0; display: grid; gap: 4px; grid-template-columns: repeat(9, minmax(0, 1fr)); overflow: visible; }
.bench .unit-piece { min-height: 0; min-width: 0; }
.bench .piece-name { bottom: 12px; }
.bench .piece-art { bottom: 10px; }

.market-dock {
  grid-area: market; min-width: 0; min-height: 0; display: grid; grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right);
  gap: var(--gap); padding: 7px 0 3px; border-top: 1px solid #596e5b;
  background: linear-gradient(180deg, #1b2c22, #111e18 74%); box-shadow: 0 -5px 18px #07100b30;
}
.dock-economy, .orders, .dock-offers { min-width: 0; min-height: 0; }
.dock-economy, .orders { display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.2vh, 15px); padding: 0 clamp(6px, 1vw, 18px); }
.dock-economy .level-panel { gap: 8px; }
.level-panel .level-info { flex: 1; width: auto; }
.economy-buttons { display: flex; gap: 5px; }
.economy-buttons .action-button { flex: 1; min-width: 0; min-height: 34px; justify-content: center; padding: 2px 5px; white-space: nowrap; font-size: 11px; }
.dock-offers { display: flex; flex-direction: column; gap: 3px; }
.dock-offers .shop-bar { flex: none; display: flex; flex-wrap: nowrap; align-items: center; margin: 0; min-width: 0; }
.dock-offers .shop-title { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; }
.dock-offers .shop-bar .action-button { padding: 2px 6px; min-width: 30px; min-height: 25px; height: 25px; }
.dock-offers .shop-grid { flex: 1 1 0; min-height: 0; align-items: stretch; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: minmax(0,1fr); gap: 6px; padding: 1px 2px 2px; overflow: visible; }
.dock-offers .shop-card { min-height: 0; height: 100% !important; overflow: hidden; border-width: 3px; }
.dock-offers .shop-art { position: absolute; inset: 0; height: 100% !important; }
.dock-offers .shop-card-bottom { position: absolute; inset: auto 0 0; min-width: 0; margin: 0; padding: 8px 28px 4px 6px; background: linear-gradient(transparent,#0b1715ed 35%); }
.dock-offers .shop-card-name { font-size: clamp(13px, 1.16vw, 20px); min-height: 0; line-height: 1.06; }
.dock-offers .shop-card .cost-chip { top: 1px; }
.dock-offers .shop-card-combine { top: 29px; padding: 2px; font-size: 8px; }
.dock-offers .opening-market { grid-row: 1 / -1; align-content: center; justify-items: center; padding: 5px; text-align: center; }
.orders { border-left: 1px solid #3b5040; }
.order-caption { font-size: 9px; color: #a0b4a4; letter-spacing: 1.8px; }
.orders .primary-button { order: 1; min-width: 0; min-height: 40px; width: 100%; padding: 0 6px; font-size: clamp(9px, .9vw, 12px); letter-spacing: 1px; }
.orders .awakening-chip { order: 2; align-self: flex-start; margin: 0; min-height: 27px; }
.hud-traits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.hud-traits .trait-row { width: 100%; }
.hud-standings { display: flex; flex-direction: column; gap: 4px; }
.modal .item-tray { margin: 0; }
.modal .item-tray .inventory { max-height: none; }
.result-banner { overflow: auto; overscroll-behavior: contain; }

@media (min-width: 1180px) and (max-width: 1480px) {
  .topnav .nav-btn:first-child { display: none; }
  .topbar .brand-sub { font-size: 7px; letter-spacing: 1.2px; }
  .roundbar .round-path { gap: 0; }
  .roundbar .round-node { width: 21px; }
  .roundbar .round-node:after { left: 18px; width: 6px; }
}
@media (max-width: 1299px) {
  .roundbar .round-path { display: none; }
}
@media (max-width: 1179px) {
  .app-shell { --rail-left: clamp(150px,17vw,200px); --rail-right: clamp(145px,18vw,205px); }
  .layout { grid-template: "field rivals" minmax(0,1fr) "market market" var(--dock-height) / minmax(0,1fr) var(--rail-right); }
  .layout .left-sidebar { display: none; }
  .quick-tools { display: flex; }
  .quick-tools .items-tool, .quick-tools .rivals-tool { display: none; }
  .topnav { display: none; }
  .header-actions .header-help { display: inline-grid !important; }
  .right-sidebar .player-name { font-size: 10px; }
}
@media (max-width: 900px) {
  .app-shell { --rail-left: 144px; --rail-right: 140px; }
  .layout { grid-template: "field" minmax(0,1fr) "market" var(--dock-height) / minmax(0,1fr); }
  .layout .right-sidebar { display: none; }
  .quick-tools .items-tool, .quick-tools .rivals-tool { display: inline-flex; }
  .roundbar .round-path { display: none; }
  .topbar .roundbar { padding: 0; gap: 6px; }
  .topbar .brand { gap: 6px; }
  .brand-sub { display: none !important; }
  .quick-tools .hud-tool { padding: 2px 4px; }
  .roundbar .economy { gap: 9px; }
  .economy-buttons .action-button { font-size: 10px; }
}
@media (max-width: 720px) {
  .topbar { flex-basis: 44px; }
  .topbar .brand-title, .roundbar .eyebrow, .roundbar .chapter-title, .hud-tool span, .header-actions .archive-tool { display: none; }
  .topbar .brand-mark,.topbar .brand-mark svg { width: 27px; height: 27px; }
  .topbar .roundbar { flex: 1; justify-content: space-around; }
  .roundbar .chapter-no { padding: 0; border: 0; font-size: 23px; }
  .roundbar .metric { gap: 3px; }
  .roundbar .metric-num { font-size: 20px; }
  .roundbar .metric svg { width: 13px; }
  .roundbar .metric-label { display: none; }
  .topbar .icon-btn { width: 29px; height: 31px; }
  .topbar .hud-tool { min-width: 30px; }
}

@media (orientation: portrait) and (max-width: 720px) {
  .app-shell { --gap: 5px; --edge: 6px; --dock-height: clamp(156px, 22vh, 210px); }
  .layout { padding-top: 4px; }
  .topbar { gap: 3px; }
  .topbar .header-help, .topbar [data-action="sound"] { display: none !important; }
  .market-dock { padding: 4px 0 1px; grid-template: "offers offers" minmax(0,1fr) "eco orders" 44px / 1fr 1fr; gap: 5px; }
  .dock-offers { grid-area: offers; }
  .dock-offers .shop-title { font-size: 11px; }
  .dock-offers .shop-bar .action-button { min-height: 23px; height: 23px; }
  .dock-offers .shop-card .cost-chip { font-size: 10px; top: 0; line-height: 1; padding: 1px 2px; }
  .dock-offers .shop-card .cost-chip svg { display: none; }
  .dock-offers .shop-card-bottom { padding: 0 2px 22px; }
  .dock-offers .shop-card-name { font-size: 12px; overflow: hidden; }
  .dock-offers .shop-info-btn { width: 23px; height: 20px; bottom: 0; right: 1px; }
  .dock-economy { grid-area: eco; flex-direction: row; align-items: center; gap: 3px; padding: 0; }
  .dock-economy .level-panel { gap: 2px; flex: none; }
  .dock-economy .level-number { width: 26px; height: 26px; }
  .dock-economy .level-info { width: 32px; }
  .dock-economy .level-label { font-size: 0; }
  .dock-economy .level-label small { font-size: 9px; }
  .dock-economy .shop-odds { display: none; }
  .economy-buttons { flex: 1; gap: 3px; }
  .economy-buttons .action-button { font-size: 10px; padding: 2px; gap: 2px; }
  .economy-buttons .action-button > svg, .economy-buttons .price svg { display: none; }
  .orders { grid-area: orders; padding: 0; gap: 2px; flex-direction: row; align-items: center; border: 0; }
  .order-caption { display: none; }
  .orders .awakening-chip { align-self: center; max-width: 64px; padding: 3px; font-size: 9px; justify-content: center; }
  .orders .awakening-chip svg { display: none; }
  .orders .primary-button { min-height: 37px; height: 37px; font-size: 9px; }
  .orders .primary-button svg { display: none; }
  .arena-column .bench { flex-basis: 43px; gap: 2px; }
  .arena-column .battlefield { width: calc(100% - 6px); }
  .bench-hint { font-size: 8px; }
}

@media (orientation: landscape) and (max-height: 630px) {
  .app-shell { --gap: 5px; --edge: 6px; padding-bottom: max(3px,env(safe-area-inset-bottom)); }
  .topbar { flex: 0 0 clamp(33px,9vh,48px); gap: 6px; }
  .topbar .brand { gap: 4px; }
  .topbar .brand-mark, .topbar .brand-mark svg { width: 26px; height: 26px; }
  .topbar .brand-title { font-size: 16px; letter-spacing: 2px; }
  .topbar .brand-sub, .topnav, .roundbar .round-path, .roundbar .eyebrow, .roundbar .metric-label { display: none !important; }
  .topbar .roundbar { justify-content: space-around; padding: 0; }
  .topbar .chapter { gap: 5px; }
  .topbar .chapter-no { padding: 0; border: 0; font-size: 24px; }
  .topbar .chapter-title { font-size: 10px; max-width: 14em; }
  .topbar .economy { gap: 10px; }
  .topbar .metric-num { font-size: 21px; }
  .topbar .metric svg { width: 14px; }
  .topbar .quick-tools, .quick-tools .items-tool, .quick-tools .rivals-tool { display: inline-flex; }
  .topbar .header-actions .icon-btn, .topbar .hud-tool { width: auto; min-width: 30px; height: 30px; min-height: 30px; }
  .topbar .header-actions .header-help { display: inline-grid !important; }
  .layout { grid-template: "field market" minmax(0,1fr) / minmax(0,1fr) clamp(170px,27vw,312px); padding-top: 3px; }
  .layout > .sidebar { display: none; }
  .market-dock { border: 1px solid #405547; padding: 4px; gap: 3px; grid-template: "orders" auto "offers" minmax(0,1fr) "eco" auto / minmax(0,1fr); }
  .dock-offers { grid-area: offers; gap: 2px; }
  .dock-offers .shop-bar .action-button { height: 25px; min-height: 25px; min-width: 32px; }
  .dock-offers .shop-title { font-size: 11px; }
  .dock-offers .shop-grid { padding: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(5,minmax(0,1fr)); gap: 3px; }
  .dock-offers .shop-card { display: grid; grid-template-columns: clamp(34px,5vw,52px) minmax(0,1fr) 26px; align-items: stretch; isolation: isolate; border-width: 2px; }
  .dock-offers .shop-art { position: relative; inset: auto; grid-column: 1; grid-row: 1; width: 100%; }
  .dock-offers .shop-card-bottom { position: static; grid-column: 2; grid-row: 1; align-self: center; padding: 2px 3px; background: none; }
  .dock-offers .shop-card-name { font-size: clamp(11px,1.55vw,16px); }
  .dock-offers .shop-card .cost-chip { left: 1px; top: 1px; transform: none; line-height: 14px; font-size: 11px; padding: 0 2px; }
  .dock-offers .shop-info-btn { inset: 0 0 0 auto; margin: auto 1px; width: 25px; height: 26px; }
  .dock-offers .shop-card-combine { inset: auto auto 0 0; max-width: 36px; line-height: 1; padding: 1px; font-size: 7px; }
  .dock-economy { grid-area: eco; padding: 0; gap: 2px; }
  .dock-economy .economy-buttons { order: -1; }
  .dock-economy .level-panel { min-height: 36px; }
  .dock-economy .level-panel { gap: 5px; }
  .dock-economy .level-number { width: 21px; height: 21px; }
  .dock-economy .level-number b { font-size: 13px; }
  .dock-economy .level-info { display: grid; align-items: center; grid-template-columns: 1fr auto; gap: 2px 5px; }
  .dock-economy .level-label { font-size: 8px; grid-column: 1; }
  .dock-economy .xp-track { grid-column: 1; margin: 0; height: 2px; }
  .dock-economy .shop-odds { grid-column: 2; grid-row: 1/3; gap: 2px; font-size: 8px; margin: 0; }
  .economy-buttons .action-button { min-height: 30px; height: 30px; font-size: 10px; }
  .orders { grid-area: orders; flex-direction: row; align-items: center; gap: 3px; padding: 0; border: 0; }
  .order-caption { display: none; }
  .orders .awakening-chip { align-self: center; flex: 0 1 auto; min-width: 0; max-width: 42%; height: 32px; margin: 0; font-size: 9px; padding: 2px 4px; }
  .orders .awakening-chip svg { display: none; }
  .orders .primary-button { flex: 1; height: 32px; min-height: 32px; font-size: 10px; }
  .orders .primary-button svg { width: 12px; }
  .arena-column .arena-header { position: absolute; top: 0; right: 3px; z-index: 7; padding: 0; height: 28px; gap: 6px; }
  .arena-header .arena-location, .arena-header .capacity { display: none; }
  .arena-clock { gap: 4px; }
  .arena-clock .speed-btn { min-width: 32px; min-height: 26px; }
  .arena-clock .phase-pill { display: none; }
  .arena-column .enemy-faction { padding-right: 99px; min-height: 28px; }
  .arena-column .enemy-faction small { display: none; }
  .arena-column .ally-faction { min-height: 17px; padding-block: 1px; }
  .arena-column .board-faction > span { min-width: 55px; }
  .arena-column .battlefield { width: calc(100% - 6px); }
  .battlefield .unit-piece { --card-height: min(70px, calc(100cqh / 6 - 3px)); width: min(calc(100cqw / 7.5 - 18px), calc(var(--card-height) * 1.46)) !important; border-width: 2px; }
  .battlefield .piece-allegiance { top: auto; bottom: -1px; left: calc(100% - 1px); transform: none; min-width: 17px; padding: 0 1px; line-height: 9px; font-size: 6px; }
  .battlefield .piece-allegiance svg { display: none; }
  .battlefield .piece-name { bottom: 8px; font-size: clamp(8px,2.9cqh,10px); }
  .battlefield .piece-stars { bottom: 3px; font-size: 7px; line-height: 7px; }
  .battlefield .piece-art { bottom: 5px; }
  .battlefield .unit-piece .card-badge { width: 11px; height: 10px; }
  .battlefield .unit-piece .card-badge svg { width: 8px; height: 8px; }
  .battlefield .unit-piece .hp-track { height: 3px; bottom: 2px; }
  .battlefield .unit-piece .mana-track { height: 2px; }
  .arena-column .bench { flex: 0 0 clamp(30px,9.4vh,46px); gap: 3px; }
  .arena-column .bench-heading { margin: 2px 0 1px; }
  .bench-heading .section-title { font-size: 9px; }
  .bench-hint { font-size: 8px; }
  .arena-column .combat-feed, .arena-column .range-legend { font-size: 9px; line-height: 1.1; }
  .arena-column .combat-feed { min-height: 17px; padding: 2px; }
  .result-banner { padding: 6px; gap: 2px; }
  .result-banner .result-seal { display: none; }
  .result-banner h2 { margin: 0; font-size: 22px; }
  .result-banner p, .result-banner .component-choice, .result-banner .result-actions, .result-banner .result-loot { margin: 3px 0; }
  .result-banner .primary-button, .result-banner .action-button { min-height: 30px; height: 30px; min-width: 0; font-size: 10px; }
  .modal-backdrop { padding: max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); align-items: center; }
  .modal { max-height: 100%; border-radius: 3px; padding: 15px; }
  .modal .preview-board { height: clamp(150px,48dvh,270px); }
}

.dock-offers .shop-card.sold { display: grid; grid-template-columns: 1fr; place-items: center; padding: 2px; font-size: 9px; letter-spacing: .6px; line-height: 1.15; text-align: center; }
.orders .primary-button { white-space: nowrap; letter-spacing: .6px; }

/* A draft is a round of play. All nine choices fit beside their item text. */
.modal:has(.draft-grid) { width: min(940px,100%); max-width: 940px; }
.modal .draft-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 12px 0 0; }
.modal .draft-card { min-width: 0; display: grid; grid-template-columns: clamp(38px,5.8vw,80px) minmax(0,1fr); gap: 7px; padding: 5px; text-align: left; align-items: stretch; }
.modal .draft-art { width: 100%; height: 100%; min-height: clamp(50px,8vh,83px); }
.modal .draft-card .draft-body { display: flex; flex-direction: column; align-self: center; gap: 4px; line-height: 1.12; }
.draft-body .draft-unit { color: #e0e9d9; font-size: 13px; }
.draft-body .draft-item { display: flex; align-items: center; gap: 3px; line-height: 1.12; color: #d8c991; }
.draft-body .draft-item svg { margin: 0; flex: none; }
.draft-body small { color: #b8c6b9; font-size: 10px; }

.modal:has(.preview-arena) {
  width: min(980px,100%); height: min(88dvh,790px); max-height: 100%;
  display: grid; grid-template: "eyebrow" auto "title" auto "description" auto "stage" minmax(0,1fr) "caption" auto "controls" auto "note" auto / minmax(0,1fr);
}
.modal:has(.preview-arena) > .modal-close { position: absolute; inset: 6px 7px auto auto; margin: 0; }
.modal:has(.preview-arena) > .eyebrow { grid-area: eyebrow; }
.modal:has(.preview-arena) > h2 { grid-area: title; padding-right: 34px; margin: 3px 0 7px; }
.modal:has(.preview-arena) > .preview-description { grid-area: description; margin: 0 0 6px; }
.modal .preview-arena { grid-area: stage; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.modal .preview-team { flex: none; }
.modal .preview-board { flex: 1 1 0; min-height: 0; height: auto; container-type: size; }
.modal .preview-board .unit-piece { min-width: 0; min-height: 0; height: clamp(19px,calc(100cqh/6 - 13px),67px) !important; width: min(calc(100cqw/7.5 - 3px),clamp(34px,17cqh,79px)) !important; max-width: none; }
.modal .preview-caption { grid-area: caption; }
.modal .preview-controls { grid-area: controls; }
.modal .preview-note { grid-area: note; }
@media (orientation: portrait) and (max-width: 670px) {
  .modal .draft-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modal .draft-card { grid-template-columns: 33px minmax(0,1fr); gap: 4px; }
  .modal .draft-card .draft-unit { font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 630px) {
  .modal:has(.draft-grid) { padding: 8px 10px; }
  .modal:has(.draft-grid) h2 { font-size: 20px; margin: 0; }
  .modal:has(.draft-grid) .modal-intro { margin: 1px 36px 3px 0; font-size: 10px; line-height: 1.25; }
  .modal .draft-grid { gap: 4px; margin-top: 5px; }
  .modal .draft-card { padding: 3px; gap: 4px; grid-template-columns: clamp(30px,6vw,62px) minmax(0,1fr); }
  .modal .draft-card .draft-body { gap: 2px; }
  .modal .draft-card .draft-unit { font-size: 12px; }
  .modal .draft-card .draft-item { font-size: 10px; }
  .modal .draft-card small { font-size: 9px; }
  .modal .draft-card .draft-art { min-height: clamp(38px,12vh,57px); }
  .modal:has(.preview-arena) {
    height: 100%; padding: 6px; gap: 3px 8px;
    grid-template: "stage eyebrow" auto "stage title" auto "stage description" minmax(0,1fr) "stage caption" auto "stage controls" auto "note note" auto / minmax(0,1.7fr) minmax(165px,1fr);
  }
  .modal:has(.preview-arena) h2 { font-size: clamp(16px,2.4vw,23px); margin: 0; }
  .modal:has(.preview-arena) > .preview-description { overflow: auto; font-size: 11px; line-height: 1.35; margin: 0; }
  .modal .preview-caption { min-height: 23px; margin: 0; padding: 3px; font-size: 10px; }
  .modal .preview-controls { margin: 0; gap: 3px; flex-wrap: wrap; }
  .modal .preview-controls .primary-button { flex: 1 0 100%; min-height: 29px; height: 29px; min-width: 0; }
  .modal .preview-controls .action-button { flex: 1; padding: 2px; min-height: 28px; height: 28px; }
  .modal .preview-controls .text-button { margin: 0; min-height: 24px; }
  .modal .preview-note { margin: 1px 0 0; font-size: 9px; line-height: 1.2; }
}

/* Every portrait is its own complete source tile. Letterboxing is intentional. */
.piece-art:before, .shop-art:before, .inspector-art:before, .collection-art:before,
.player-avatar:before, .draft-art:before, .awakening-portrait:before {
  content: ''; position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  transform: none; background: var(--portrait) center / contain no-repeat;
}
.piece-art:after, .shop-art:after, .inspector-art:after { display: none; }
.piece-art, .shop-art, .inspector-art, .collection-art, .draft-art, .player-avatar, .awakening-portrait { background: #12201b; }
.illustration { display: inline-block; object-fit: contain; object-position: center; vertical-align: middle; flex-shrink: 0; image-rendering: auto; }
.illustrated-skill { display: flex; align-items: center; gap: 9px; }
.inspector .skill-name { color: #e1e9d6; margin-top: 9px; }
.inspector .skill-name img, .preview-description img, .icon-relics { border-radius: 3px; }
.inspector-section .inspector-art { height: clamp(125px,21dvh,215px); }
.inspector-body { margin-top: 0; padding-top: 5px; }
.codex-skill-art { position: absolute; right: 6px; top: 36px; z-index: 5; border: 1px solid #65776a; border-radius: 3px; }
.collection-card .collection-art { margin: 0; }
.item-btn .icon-relics { width: 100%; height: 100%; }
.item-btn { padding: 1px; overflow: hidden; }
.piece-item img { width: 100%; height: 100%; }
.small-item .icon-relics { width: 100%; height: 100%; }
.combat-feed .icon-skills { width: 22px; height: 22px; }
.unit-piece.ally { --life-color: #277442; }
.unit-piece.enemy { --life-color: #a02737; }
.unit-piece .hp-track .hp-fill { background: var(--life-color) !important; box-shadow: none; }
.unit-piece .hp-track { background: #0b1010; height: 6px; }
.battlefield .unit-piece {
  --card-height: clamp(26px,calc(100cqh / 6 - 10px),118px);
  width: min(calc(100cqw / 7.5 - 4px),clamp(46px,18cqh,115px)) !important;
}
.battlefield .piece-art, .preview-board .piece-art { inset: 0 0 20px; }
.battlefield .piece-name, .preview-board .piece-name { bottom: 11px; padding: 0 1px; background: #13201c; }
.battlefield .piece-stars, .preview-board .piece-stars { bottom: 4px; }
.arena-column .bench { flex-basis: clamp(70px,10.6dvh,128px); gap: clamp(3px,.4vw,8px); }
.bench-slot { container-type: size; }
.bench .bench-slot .unit-piece {
  left: 50% !important; top: 0 !important; transform: translateX(-50%);
  width: min(100%,calc(100cqh * .96)) !important; min-width: 0; height: 100% !important;
}
.bench .piece-art { inset: 0 0 22px; }
.bench .piece-name { font-size: clamp(9px,13cqh,13px); bottom: 10px; padding: 0 1px; line-height: 1; text-align: center; }
.bench .piece-stars { bottom: 1px; left: 2px; }
.bench .piece-items { bottom: 1px; }
.bench .hp-track, .bench .mana-track { display: none; }
.rail-tabs { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 2px; background: #14221c; }
.rail-tabs button { min-width: 0; padding: 7px 5px; color: #afc4b6; border: 1px solid transparent; font-size: 12px; }
.rail-tabs button[aria-pressed="true"] { border-color: #71846c; color: #edf1dc; background: #233828; }
.right-sidebar[data-view="profile"] .rail-match, .right-sidebar[data-view="match"] .rail-profile { display: none; }
.rail-match > section, .rail-match > .item-tray { margin: 9px 0; }
.rail-traits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; }
.rail-traits .trait-row { min-width: 0; width: 100%; min-height: 32px; gap: 3px; padding: 2px; }
.rail-traits .trait-icon { width: 18px; height: 18px; margin: 0 3px; flex: none; }
.rail-traits .trait-icon svg { width: 12px; height: 12px; }
.rail-traits .trait-name { font-size: 11px; }
.rail-traits .trait-count { font-size: 14px; }
.rail-match .tray-heading { margin: 0 0 5px; }
.rail-match .tray-help { line-height: 1.25; }

@media (orientation: landscape) and (min-height: 631px) {
  .app-shell { --rail-left: clamp(167px,14.5vw,303px); --rail-right: clamp(211px,19.5vw,396px); }
  .layout { grid-template: "rivals field market" minmax(0,1fr) / var(--rail-left) minmax(0,1fr) var(--rail-right); }
  .layout .right-sidebar { display: flex; grid-area: rivals; }
  .quick-tools { display: none; }
  .arena-column .arena-header { padding: 3px 10px; }
  .arena-column .board-faction { padding-block: 2px; }
  .market-dock {
    grid-template: "orders" auto "offers" minmax(0,1fr) "eco" auto / minmax(0,1fr);
    border: 1px solid #526b56; gap: 7px; padding: 6px;
  }
  .orders { grid-area: orders; flex-direction: row; align-items: center; gap: 5px; border: 0; padding: 0; }
  .order-caption { display: none; }
  .orders .primary-button { flex: 1; font-size: clamp(10px,.8vw,14px); }
  .orders .awakening-chip { align-self: stretch; font-size: 10px; padding-inline: 5px; }
  .dock-offers { grid-area: offers; gap: 6px; }
  .dock-offers .shop-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(5,minmax(0,1fr)); padding: 0; gap: 5px; }
  .dock-offers .shop-card:not(.sold) {
    display: grid; grid-template: "art text" minmax(0,1fr) / minmax(70px,44%) minmax(0,1fr); align-items: stretch; border-width: 3px;
  }
  .dock-offers .shop-art { grid-area: art; position: relative; inset: auto; min-width: 0; width: 100%; }
  .dock-offers .shop-card-bottom { grid-area: text; position: static; align-self: center; margin: 0; padding: 14px 4px 13px 6px; background: none; }
  .dock-offers .shop-card-name { font-size: clamp(14px,1.15vw,21px); line-height: 1.09; overflow-wrap: anywhere; }
  .dock-offers .shop-card .cost-chip { left: 1px; top: 1px; transform: none; line-height: 15px; padding: 0 3px; }
  .dock-offers .shop-card-combine { left: 1px; right: auto; top: auto; bottom: 20px; max-width: 44%; }
  .dock-economy { grid-area: eco; flex-direction: column; padding: 2px 0; gap: 4px; }
  .dock-economy .level-panel { order: 2; min-height: 37px; }
  .dock-economy .economy-buttons { order: 1; }
  .dock-economy .level-info { max-width: 100%; }
  .dock-economy .level-number { width: 32px; height: 32px; }
}
@media (orientation: portrait) {
  .layout { grid-template: "field" minmax(0,1fr) "market" var(--dock-height) / minmax(0,1fr); }
  .layout .right-sidebar { display: none; }
  .quick-tools, .quick-tools .items-tool, .quick-tools .rivals-tool { display: inline-flex; }
  .quick-tools .pacts-tool { display: inline-flex; }
}
@media (orientation: landscape) and (max-height: 630px) {
  .arena-column .bench { flex-basis: clamp(43px,14.4dvh,74px); }
  .arena-column .bench-heading { margin: 0; }
  .arena-column .enemy-faction { min-height: 23px; margin: 0; padding-block: 1px; padding-right: 43%; }
  .arena-column .enemy-faction b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .arena-column .ally-faction { position: absolute; top: 0; right: 75px; height: 23px; min-height: 0; padding: 0 4px; gap: 3px; background: #102a24; }
  .arena-column .ally-faction > span { min-width: 0; font-size: 0; gap: 1px; }
  .arena-column .ally-faction > span:after { content: "TA"; font-size: 8px; }
  .arena-column .ally-faction b { font-size: 0; }
  .arena-column .ally-faction b:after { content: attr(data-count); font-size: 9px; }
  .arena-column .arena-header { height: 23px; }
  .arena-clock .speed-btn { min-height: 21px; height: 21px; }
  .battlefield .unit-piece { --card-height: min(78px,calc(100cqh / 6 - 1px)); width: min(calc(100cqw/7.5 - 13px),max(43px,calc(var(--card-height)*1.25))) !important; }
  .battlefield .piece-art, .preview-board .piece-art { inset: 0 0 13px; }
  .battlefield .piece-name, .preview-board .piece-name { bottom: 7px; }
  .battlefield .unit-piece .hp-track { height: 4px; }
  .bench .piece-art { bottom: 16px; }
  .bench .piece-name { bottom: 7px; font-size: 9px; }
  .bench .piece-stars { bottom: 0; font-size: 7px; line-height: 7px; }
  .bench .piece-items { bottom: 0; }
  .bench .unit-piece .card-badge { width: 11px; height: 11px; }
  .bench .unit-piece .card-badge svg { width: 8px; height: 8px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .arena-column .bench { flex-basis: clamp(50px,7.7dvh,69px); }
  .bench .piece-art { bottom: 17px; }
  .bench .piece-name { bottom: 8px; font-size: 8px; }
  .bench .piece-stars { bottom: 0; font-size: 7px; }
  .dock-offers .shop-card-bottom { padding-bottom: 15px; }
  .dock-offers .shop-art { inset: 8px 1px 30px; height: auto !important; }
}


.report-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.report-side { --meter:#277442; min-width: 0; }
.report-side.enemy { --meter:#a02737; }
.report-side > h3 { margin: 5px 0; display: flex; gap: 6px; align-items: center; font-size: 15px; }
.fighter-result { display: flex; gap: 8px; margin: 4px 0; border: 1px solid #354b3f; padding: 5px; background: #15221d; }
.report-portrait { flex: none; display: grid; align-self: flex-start; border: 2px solid var(--rarity); border-radius: 3px; overflow: hidden; }
.fighter-numbers { flex: 1; min-width: 0; }
.fighter-numbers h4 { margin: 0; font-family: var(--serif); color: #e0e8d5; font-size: 14px; }
.fighter-numbers p { margin: 2px 0 0; font-size: 11px; }
.fighter-numbers small { font-size: 10px; line-height: 1.3; color: #b0c5b5; }
.fighter-ability { display: flex; gap: 5px; align-items: center; color: #ded9b9; font-size: 11px; }
.damage-meter { margin-top: 4px; height: 4px; background: #0d1712; }
.damage-meter i { display: block; height: 100%; background: var(--meter); }
.cast-history .cast-row { display: grid; grid-template-columns: 40px 35px 35px minmax(0,1fr); gap: 6px; align-items: start; }
.cast-row img { border-radius: 3px; }
.cast-row p { margin: 3px 0; }
.target-portraits { display: flex; gap: 3px; }
.cast-history .cast-row.enemy > b, .cast-row.enemy time { color: #e39d8f; }
.art-credits { padding: 10px; margin-top: 8px; border: 1px solid #405547; }
.art-credits a { color: #dcebcf; }
@media (max-width: 650px) { .report-columns { grid-template-columns: minmax(0,1fr); gap: 4px; } }
@media (orientation: landscape) and (min-height: 631px) and (max-width: 1179px) {
  .layout { grid-template: "field market" minmax(0,1fr) / minmax(0,1fr) clamp(211px,23vw,265px); }
  .layout .right-sidebar { display: none; }
  .topbar .quick-tools, .quick-tools .items-tool, .quick-tools .rivals-tool { display: inline-flex; }
  .topbar .hud-tool { gap: 3px; padding: 2px 5px; }
  .topbar .hud-tool span { display: none; }
}

/* Shop identities sit with the name. Scale from the allocated card, including
   the narrow landscape market, rather than the overall screen width. */
.dock-offers .shop-card:not(.sold) { container-type: size; }
.shop-identities { display: flex; align-items: start; gap: clamp(3px,2cqw,12px); }
.shop-identity { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 2px; }
.identity-symbol {
  width: clamp(20px,min(35cqh,18cqw),55px); aspect-ratio: 1;
  display: grid; place-items: center; border: 1px solid currentColor;
  color: #f5daa1; background: radial-gradient(ellipse at 40% 25%,#514735,#25261e 75%);
  border-radius: 50%; box-shadow: inset 0 0 0 2px #141e19, 0 1px 3px #0009;
}
.shop-identity.role .identity-symbol {
  color: #bce5df; background: linear-gradient(135deg,#314a48,#192b2b);
  border-radius: 4px 4px 36% 36%;
}
.identity-symbol svg { width: 76%; height: 76%; stroke-width: 1.9; }
.identity-label { max-width: 100%; color: #e2ddc7; font: 550 clamp(10px,4cqw,14px)/1.12 var(--body); }
.shop-identity.role .identity-label { color: #cbe1d8; }
.dock-offers .shop-info-btn { color: #e6eee4; border-color: #7b9085; font-weight: 700; }
.dock-offers .shop-card.unaffordable { filter: none; }
.dock-offers .shop-card.unaffordable .cost-chip { color: #e2a3a3; }
.rail-traits .trait-row { min-height: 39px; }
.rail-traits .trait-icon { width: 26px; height: 26px; margin: 0 5px; }
.rail-traits .trait-icon svg { width: 19px; height: 19px; }
.battlefield .unit-piece .card-badge, .preview-board .unit-piece .card-badge {
  width: clamp(14px,3.8cqh,26px); height: clamp(14px,3.8cqh,26px);
}
.bench .bench-slot .card-badge { width: clamp(14px,24cqh,27px); height: clamp(14px,24cqh,27px); }
.battlefield .unit-piece .card-badge svg, .preview-board .unit-piece .card-badge svg,
.bench .bench-slot .card-badge svg { width: 84%; height: 84%; }
.collection-card .card-badge { width: 32px; height: 32px; }
.collection-card .card-badge svg { width: 25px; height: 25px; }
.codex-skill-art { top: 43px; }
@media (orientation: landscape) and (min-height: 631px) {
  .dock-offers .shop-card:not(.sold) { grid-template-columns: minmax(64px,39%) minmax(0,1fr); }
  .dock-offers .shop-card-bottom { padding: 3px clamp(4px,2cqw,10px); }
  .dock-offers .shop-card-name { font-size: clamp(14px,7cqw,26px); line-height: 1.04; padding-right: 5px; }
  .dock-offers .shop-identities { margin-top: clamp(3px,4cqh,9px); }
  .shop-identities .shop-identity { flex: 1 1 0; text-align: center; }
  .dock-offers .shop-info-btn { inset: 1px 1px auto auto; width: clamp(20px,7.5cqw,32px); height: clamp(20px,7.5cqw,32px); }
}
@media (orientation: landscape) and (max-height: 630px) {
  .dock-offers .shop-card:not(.sold) { grid-template-columns: clamp(31px,4.6vw,51px) minmax(0,1fr) 21px; }
  .dock-offers .shop-card-bottom { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px; align-items: center; padding: 1px 2px; }
  .dock-offers .shop-card-name { font-size: clamp(10px,6.4cqw,14px); line-height: 1.02; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .dock-offers .shop-identities { gap: 2px; align-items: center; }
  .dock-offers .identity-symbol { width: clamp(18px,min(65cqh,12.8cqw),29px); }
  .dock-offers .identity-symbol svg { width: 86%; height: 86%; }
  .dock-offers .identity-label { display: none; }
  .dock-offers .shop-info-btn { width: 20px; height: 24px; }
}
@media (orientation: portrait) {
  .dock-offers .shop-card-bottom { padding: 2px 2px 3px; }
  .dock-offers .shop-identities { justify-content: center; margin-top: 2px; gap: 3px; }
  .dock-offers .identity-symbol { width: clamp(17px,26cqw,35px); }
  .dock-offers .identity-symbol svg { width: 85%; height: 85%; }
  .dock-offers .identity-label { display: none; }
  .dock-offers .shop-info-btn { inset: 1px 1px auto auto; width: clamp(19px,20cqw,27px); height: clamp(19px,20cqw,27px); }
  .dock-offers .shop-card-name { font-size: clamp(10px,15cqw,17px); text-align: center; }
}

/* Width follows available row height, including short windows. The adjacent
   panels get the leftover width before the play surface is centered. */
@media (orientation: landscape) and (min-height: 631px) and (min-width: 1180px) {
  .app-shell {
    --field-width: calc((100dvh - clamp(52px,6.4dvh,76px) - var(--gap) - clamp(70px,10.6dvh,128px) - 100px) * 1.42 + 8px);
  }
  .layout { grid-template-columns: minmax(165px,.83fr) minmax(0,min(62%,var(--field-width))) minmax(221px,1.1fr); }
}
@media (orientation: landscape) and (min-height: 631px) and (min-width: 1180px) and (max-width: 1350px) {
  .layout { grid-template-columns: minmax(215px,.92fr) minmax(0,min(59%,var(--field-width))) minmax(216px,1.05fr); }
}
@media (orientation: landscape) and (max-height: 630px) {
  .layout { grid-template-columns: minmax(0,1fr) clamp(181px,31vw,370px); }
}
@media (orientation: landscape) and (max-height: 630px) and (min-width: 780px) and (min-aspect-ratio: 2/1) {
  .app-shell { --field-width: calc((100dvh - clamp(33px,9dvh,48px) - clamp(43px,14.4dvh,74px) - 46px) * 1.42 + 8px); }
  .layout { grid-template: "rivals field market" minmax(0,1fr) / minmax(122px,.85fr) minmax(0,min(51%,var(--field-width))) minmax(207px,1.17fr); }
  .layout .right-sidebar { display: flex; grid-area: rivals; }
  .rail-tabs button { font-size: 11px; padding: 4px 2px; }
  .rail-traits { grid-template-columns: 1fr; }
}
.arena-column, .right-sidebar { overflow-anchor: none; }
.battlefield .unit-piece:not(.monster-piece), .bench .unit-piece:not(.monster-piece) {
  border-width: clamp(3px,.55cqh,6px);
  box-shadow: 0 0 0 1px #0d1614, inset 0 0 0 1px #0d1614, 0 3px 5px #000a;
}
.inspector { border: 4px solid var(--rarity); box-shadow: inset 0 0 0 1px #0d1715; }
.inspector-art { border-bottom: 2px solid var(--rarity); }
.inspector-top { z-index: 2; }
.unit-piece.monster-piece, .inspector.monster-inspector { border-color: #070a0d !important; }

.dock-economy .level-panel {
  width: 100%; min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: 6px 10px; align-items: center; text-align: left; border: 1px solid #546b5c;
  background: #14241e; color: #f3edda; padding: 7px 9px;
}
.dock-economy .level-panel:hover, .dock-economy .level-panel:focus-visible { border-color: #acbb95; }
.dock-economy .level-number { width: 28px; height: 28px; margin: 4px 5px; background: #263827; }
.dock-economy .level-number b { font: 700 24px/1 var(--condensed); }
.dock-economy .level-info { display: block; width: 100%; min-width: 0; }
.dock-economy .level-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 3px;
  margin: 0 0 5px; font: 600 clamp(12px,.82vw,17px)/1.1 var(--body);
}
.level-label strong { font: 700 clamp(15px,1.05vw,20px)/1 var(--condensed); white-space: nowrap; }
.dock-economy .level-panel .xp-track { display: block; height: 5px; margin: 0; background: #384239; }
.dock-economy .xp-fill { display: block; }
.dock-economy .level-panel .shop-odds, .shop-odds.odds-detail {
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-column: 1/-1; grid-row: auto;
  margin: 1px 0 0; gap: 4px;
}
.tier-odd { min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 3px 1px; border-top: 3px solid var(--tier-color); background: #213029; color: #f1eee1; }
.odd-price { font: 500 clamp(10px,.74vw,14px)/1 var(--body); white-space: nowrap; color: #c5d3c8; }
.odd-price:after { content: " vàng"; }
.tier-odd b { font: 700 clamp(15px,1.16vw,22px)/1 var(--condensed); font-variant-numeric: tabular-nums; }
.shop-odds.odds-detail .tier-odd { padding: 12px 2px; }
.shop-odds.odds-detail .tier-odd b { font-size: 23px; }
.shop-odds.odds-detail .odd-price { font-size: 13px; }

@media (orientation: landscape) and (max-height: 630px) {
  .dock-economy .level-panel { padding: 3px 5px; gap: 3px 6px; }
  .dock-economy .level-number { width: 17px; height: 17px; margin: 3px; }
  .dock-economy .level-number b { font-size: 15px; }
  .dock-economy .level-label { font-size: 11px; margin-bottom: 2px; }
  .dock-economy .level-label strong { font-size: 13px; }
  .dock-economy .level-panel .xp-track { height: 3px; }
  .dock-economy .tier-odd { padding: 1px; border-top-width: 2px; gap: 1px; }
  .dock-economy .odd-price { font-size: 10px; }
  .dock-economy .odd-price:after { content: "v"; }
  .dock-economy .tier-odd b { font-size: 14px; }
}
@media (orientation: portrait) {
  .app-shell { --dock-height: clamp(182px,26dvh,260px); }
  .market-dock {
    grid-template: "offers offers" minmax(0,1fr) "level level" 43px "eco orders" 35px / minmax(0,1fr) minmax(0,1fr);
    gap: 4px; padding: 4px 0 1px;
  }
  .dock-offers { grid-area: offers; }
  .dock-economy { display: contents; }
  .dock-economy .economy-buttons { grid-area: eco; }
  .orders { grid-area: orders; flex-direction: row; align-items: center; padding: 0; gap: 3px; border: 0; }
  .orders .order-caption { display: none; }
  .orders .primary-button { flex: 1; height: 35px; min-height: 35px; }
  .orders .awakening-chip { align-self: center; }
  .dock-economy .level-panel {
    grid-area: level; grid-template-columns: auto minmax(74px,.7fr) minmax(0,1.3fr);
    padding: 3px 5px; gap: 6px;
  }
  .dock-economy .level-number { width: 20px; height: 20px; margin: 3px; }
  .dock-economy .level-number b { font-size: 18px; }
  .dock-economy .level-label { display: grid; gap: 1px; margin-bottom: 2px; font-size: 11px; }
  .dock-economy .level-label strong { font-size: 13px; }
  .dock-economy .level-panel .shop-odds { grid-column: 3; margin: 0; gap: 3px; }
  .dock-economy .level-panel .xp-track { height: 3px; }
  .dock-economy .tier-odd { padding: 2px 0; gap: 1px; border-top-width: 2px; }
  .dock-economy .odd-price { font-size: 10px; }
  .dock-economy .odd-price:after { content: "v"; }
  .dock-economy .tier-odd b { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 420px) and (min-width: 740px) {
  .dock-economy .level-panel {grid-template-columns:auto minmax(55px,.6fr) minmax(0,1.4fr);gap:3px;padding:3px;min-height:36px;}
  .dock-economy .level-label {display:grid;gap:1px;margin-bottom:2px;font-size:10px;}
  .dock-economy .level-label strong {font-size:12px;}
  .dock-economy .level-panel .shop-odds {grid-column:3;grid-row:1;gap:2px;margin:0;}
  .dock-economy .level-panel .odd-price {font-size:10px;}
  .dock-economy .level-panel .tier-odd b {font-size:14px;}
}

/* Give the match rail its own scale. The unit dossier and compact HUD keep
   their own layout; a crowded standings list scrolls inside the rail. */
@media (orientation: landscape) and (min-width: 1180px) and (min-height: 631px) {
  .layout .right-sidebar[data-view="match"] { container-type: size; overflow: hidden; gap: 0; }
  .right-sidebar[data-view="match"] .rail-tabs button {
    min-height: clamp(39px, 5.1cqh, 52px); font-size: clamp(13px, 4.9cqw, 18px); line-height: 1.35;
  }
  .right-sidebar .rail-match {
    --rail-text: clamp(13px, 4.6cqw, 17px);
    --rail-icon: clamp(25px, min(10cqw, 4.3cqh), 36px);
    --rail-row: clamp(44px, 5.7cqh, 57px);
    --relic-size: clamp(44px, min(18cqw, 6.4cqh), 60px);
    --rail-gap: clamp(8px, 1.2cqh, 15px);
    --rail-inset: clamp(7px, 2.8cqw, 16px);
    flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; min-width: 0;
    overflow: auto; overscroll-behavior: contain; gap: var(--rail-gap); padding-block: var(--rail-gap);
  }
  .right-sidebar .rail-match:has(> .abyss-summary) {
    --rail-text: clamp(14px, min(5.5cqw, 1.92cqh), 20px);
    --rail-icon: clamp(31px, min(12cqw, 5.4cqh), 50px);
    --rail-row: clamp(46px, 6.15cqh, 75px);
    --relic-size: clamp(48px, min(21cqw, 7.3cqh), 72px);
    --rail-gap: clamp(7px, 1.05cqh, 16px);
  }
  .right-sidebar .rail-match > * { flex: 0 0 auto; margin: 0; min-width: 0; }
  .rail-match .section-title {
    margin: 0 0 .5em; color: #bac8b9; font-size: max(12px, calc(var(--rail-text) * .85)); letter-spacing: .1em;
  }
  .rail-match .section-title svg { width: 1.3em; height: 1.3em; }
  .rail-match .rail-traits {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 3px 7px;
  }
  .rail-match:has(> .abyss-summary) .rail-traits:not(:has(> .trait-row:nth-child(6))) { grid-template-columns: 1fr; }
  .rail-match .trait-row {
    min-height: var(--rail-row); padding: 3px var(--rail-inset); gap: 8px;
    border-bottom: 1px solid #34443a; color: #bdc8bb;
  }
  .rail-match .trait-row.is-active { color: #d2e7b8; }
  .rail-match .trait-icon { width: var(--rail-icon); height: var(--rail-icon); margin-inline: .16em .28em; }
  .rail-match .trait-icon svg { width: 76%; height: 76%; }
  .rail-match .trait-name { white-space: normal; overflow-wrap: anywhere; font-size: var(--rail-text); }
  .rail-match .trait-levels { font-size: max(12px, calc(var(--rail-text) * .83)); line-height: 1.3; color: #a7b7a5; }
  .rail-match .trait-count { font-size: calc(var(--rail-text) * 1.5); }
  .rail-match .item-tray, .rail-match .abyss-summary { padding: var(--rail-inset); }
  .rail-match .tray-heading, .rail-match .text-button, .rail-match .inventory-empty, .rail-match .tray-help {
    font-size: max(12px, calc(var(--rail-text) * .9)); line-height: 1.45; color: #c1cebd;
  }
  .rail-match .tray-heading h2 { font-size: var(--rail-text); }
  .rail-match .tray-heading .text-button { min-height: 32px; color: #d3e5be; }
  .right-sidebar .rail-match .inventory { gap: 6px; max-height: calc(var(--relic-size) * 2 + 12px); }
  .right-sidebar .rail-match .item-btn { width: var(--relic-size) !important; height: var(--relic-size) !important; min-width: var(--relic-size); }
  .rail-match .abyss-summary strong { font: 600 clamp(23px, 7.4cqw, 34px)/1.3 var(--serif); }
  .rail-match .abyss-summary p { margin: .34em 0 0; font-size: var(--rail-text); line-height: 1.45; }
  .rail-match .round-log { gap: .32em; color: #b9c6b8; font-size: max(12px, calc(var(--rail-text) * .92)); line-height: 1.5; }
  .rail-match .log-entry { padding: .20em 0 .20em .68em; border-left: 2px solid #52674c; }
  .rail-match .log-entry:first-child { color: #e0e7d7; border-color: #aac491; }
  .right-sidebar .rail-match > .standings-section { flex: 0 1 auto; min-height: min(132px, 21cqh); display: flex; flex-direction: column; }
  .rail-match .standings { min-height: 0; overflow: auto; scrollbar-width: thin; }
  .rail-match .player-row { min-height: 42px; }
  .rail-match .player-main { min-width: 0; }
  .rail-match .player-name { display: block; font-size: max(12px, calc(var(--rail-text) * .91)); }
  .rail-match .player-sub, .rail-match .player-rank { font-size: 11px; }
  @container (max-height: 800px) {
    .rail-match:has(> .abyss-summary) .rail-traits:not(:has(> .trait-row:nth-child(6))) {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .rail-match .trait-row { gap: 4px; padding-inline: 3px; }
    .rail-match .trait-icon { margin-inline: 2px; }
  }
  @container (max-height: 800px) and (max-width: 245px) {
    .rail-match:has(> .abyss-summary) .trait-row {
      display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: center;
      padding: 4px 7px; gap: 3px; text-align: start;
    }
    .rail-match:has(> .abyss-summary) .trait-count { grid-column: 2; grid-row: 1; justify-self: end; }
    .rail-match:has(> .abyss-summary) .trait-content { grid-column: 1/-1; grid-row: 2; min-width: 0; }
    .rail-match:has(> .abyss-summary) .trait-name { line-height: 1.22; }
  }
  @container (min-width: 350px) {
    .rail-match .standings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
  }
}

.foyer { --paper:#e8ddbb; --ochre:#cfb582; --ivory:#f5efda; background:#101714; color:var(--paper); width:100%; height:100vh; height:100dvh; overflow:auto; }
.foyer-home { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; overflow:hidden; }
.foyer-mast { display:flex; justify-content:space-between; align-items:center; padding:10px clamp(16px,4.5vw,92px); gap:10px; border-bottom:1px solid #906e4b; background:#111815; }
.foyer-brand,.foyer-mast nav,.foyer-mast nav button { display:flex; align-items:center; }
.foyer-brand { gap:11px; color:var(--paper); font:600 clamp(20px,1.8vw,32px)/1 Georgia,serif; letter-spacing:.19em; }
.foyer-brand svg { color:#c4ab79; }
.foyer-mast nav { gap:clamp(4px,1.2vw,28px); }
.foyer-mast nav button { gap:6px; padding:7px; color:#dedac6; font:600 clamp(12px,.9vw,17px)/1.2 var(--body); border-radius:3px; }
.foyer-mast button:hover,.ledger-back:hover { color:white; background:#3a3728; }
.cover-story { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; border-block:3px solid #0a100d; }
.cover-ink { position:absolute; inset:0; z-index:-2; background:#171e17 var(--cover-art,none) 69% 40%/cover no-repeat; }
.cover-story::after { content:''; position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,#0b1513e8 0%,#0b1413a3 27%,#15191414 56%,transparent 77%); }
.cover-copy { width:min(60%,900px); padding:clamp(14px,3.8vw,72px) clamp(20px,5vw,100px); }
.cover-kicker,.cover-folio,.foyer-footer,.desk-title>span { font:650 clamp(10px,.74vw,15px)/1.35 var(--body); letter-spacing:.16em; }
.cover-kicker { display:flex; align-items:center;gap:12px;color:#e6c799; }
.cover-kicker i { width:35px;height:3px;background:#b65a46; }
.cover-copy h1 { margin:.12em 0 .015em; color:#efe3c5;font:650 clamp(49px,6.8vw,145px)/1 Georgia,'Times New Roman',serif; letter-spacing:.025em;text-shadow:2px 3px #18201a; }
.cover-subtitle { margin:0; font:500 clamp(22px,2.8vw,52px)/1.25 Georgia,serif;color:#dac9a5; }
.cover-note { font:500 clamp(12px,1.07vw,21px)/1.55 var(--body); color:#dfdfcf; max-width:39ch; margin:14px 0; }
.cover-folio { position:absolute;right:4%;bottom:4%;padding:5px 10px; background:#0c1511bb;border:1px solid #877753;color:#cebd99; }
.cover-folio span { color:#ba634b; padding:0 .45em; }
.resume-run { display:inline-flex;align-items:center;gap:8px;color:#f2e3c4;background:#14201bdb;border:1px solid #ac9974;padding:8px 13px;font:650 15px var(--body); }
.resume-run small { color:#c0c9b7;font-weight:450; }
.mission-desk { padding:clamp(10px,1.7vh,25px) clamp(16px,4.5vw,92px) clamp(12px,2.6vh,36px);border-top:1px solid #a58e61;background:linear-gradient(110deg,#1a241f,#111915); }
.desk-title { display:flex;align-items:baseline;justify-content:space-between;gap:9px;margin-bottom:clamp(7px,1.4vh,20px); }
.desk-title h2 { margin:0;color:#ede2c4;font:600 clamp(21px,1.8vw,36px)/1.1 Georgia,serif; }
.desk-title>span { color:#a59f85; }
.mission-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(7px,1vw,22px);}
.mission {min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(7px,1.2vw,23px);text-align:left;padding:clamp(8px,2.4vh,37px) clamp(8px,1.3vw,27px);color:var(--paper);background:#1d2923;border:1px solid #877c60;border-left:4px solid #ba9b63;box-shadow:inset 0 0 0 3px #121b17; }
.mission.abyss { background:linear-gradient(100deg,#392723,#1e2822);border-left-color:#c66c55; }
.mission.online:disabled {background:#181f1c;color:#bcbcae;opacity:.69;cursor:default;border-color:#5f665a;}
.mission:not(:disabled):hover,.resume-run:hover {background:#374337;border-color:#e8d7a9;}
.mission-number {align-self:start;color:#c9b181;font:italic clamp(15px,1.4vw,27px)/1.2 Georgia,serif;}
.mission-body {display:grid;gap:5px;}
.mission strong {font:600 clamp(17px,1.65vw,33px)/1.16 Georgia,serif;color:inherit;}
.mission small {font:500 clamp(11px,.85vw,17px)/1.3 var(--body);color:#cccbb8;}
.mission-sigil {color:#d2bd91;}
.foyer-footer {display:flex;justify-content:space-between;gap:8px;padding:6px clamp(16px,4.5vw,92px);border-top:1px solid #495748;color:#b7bb9f;font-size:10px;}
.foyer-ranking {background:linear-gradient(90deg,#101916f7,#12201bec),var(--cover-art,none) center/cover fixed;}
.ledger {width:min(970px,100%);margin:auto;padding:clamp(18px,4vw,55px); }
.ledger-back {color:#e4cfa9;padding:6px 0;}
.ledger h1 {margin:8px 0;font:600 clamp(34px,4.8vw,68px)/1.08 Georgia,serif;color:#f1e5c8;}
.ledger-intro {color:#d0d5c6;line-height:1.6;}
.ledger-tools,.ledger-tabs,.form-actions {display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
.ledger-tools {justify-content:space-between;margin:20px 0;}
.ledger-tabs button,.ledger-tools .action-button {border:1px solid #5a6958;color:#d9e1d1;padding:6px 10px;font:550 13px var(--body);}
.ledger-tabs button[aria-pressed=true] {color:#f1dbaf;border-color:#b59d70;background:#3b392b;}
.ledger-best {color:#d4d4c2;border-left:3px solid #bd9d63;padding-left:10px;}
.ledger-best b {color:#f1dda9;}
.ledger-row {display:flex;gap:14px;align-items:center;text-align:left;width:100%;border-block-end:1px solid #435148;padding:12px;color:#e5dfca;}
.rank-num {color:#cbb184;font:24px Georgia,serif;}.record-name {flex:1;}
.record-name small,.record-points small {display:block;font:12px var(--body);color:#b8c3b5;}
.record-points {font:600 20px Georgia,serif;}
.ledger-empty {padding:36px;text-align:center;border:1px dashed #576352;color:#c0c7b6;}.ledger-empty h2 {font:23px Georgia,serif;color:#e8ddbf;}
.mode-note {font:14px/1.5 var(--body);color:#c9d1c3;}.mode-options .mode-option {text-transform:none;}
.expedition-name { display:grid;gap:5px;margin:12px 0;color:#d7d9c9; }
.expedition-name input,.score-input {background:#101a17;border:1px solid #76846b;color:#eee8d7;padding:9px 12px;font:15px var(--body);min-width:0;width:100%;}
.score-picture {display:block;width:100%;height:auto;margin:12px 0;border:1px solid #797456;}
.abyss-summary {margin:8px 0;padding:9px;border:1px solid #59654e;background:#18231d;}
.abyss-summary strong {font:600 17px Georgia,serif;color:#ddcfae;}.abyss-summary p {margin:4px 0;font:12px/1.4 var(--body);color:#ced5c3;}
.planning-seconds {margin-left:5px;font:600 12px var(--body);letter-spacing:0;text-transform:none;}
@media (max-width:720px) and (orientation:portrait) {
 .foyer-mast {padding:8px 12px;}.foyer-mast nav {gap:0;}.foyer-brand {gap:4px;font-size:15px;}.foyer-brand svg {width:24px;}
 .foyer-mast nav button {gap:3px;font-size:10px;padding:7px 4px;}.foyer-mast nav svg {width:14px;}
 .cover-copy {width:100%;align-self:end;padding:16px;}.cover-story::after {background:linear-gradient(0deg,#0b1513 0%,#0b151399 48%,transparent 78%);}
 .cover-ink {background-position:70% center;}.cover-folio {display:none;}.cover-copy h1 {font-size:clamp(44px,11vw,72px);}.cover-note {margin:7px 0;}
 .mission-row {grid-template-columns:1fr;gap:5px;}.mission {padding:8px 11px;}.mission-body {gap:1px;}.mission strong {font-size:19px;}.mission-sigil svg {width:21px;}.mission-desk {padding:10px 14px;}.foyer-footer {padding:5px 14px;font-size:9px;}
}
@media (orientation:landscape) and (max-height:590px) {
 .foyer-mast {padding:4px 13px;}.foyer-brand {font-size:18px;}.foyer-brand svg {width:25px;height:25px;}
 .foyer-mast nav button {padding:4px;font-size:11px;}.cover-copy {padding:8px 23px;width:58%;}.cover-copy h1 {font-size:clamp(38px,6.3vw,75px);}.cover-subtitle {font-size:clamp(18px,2.8vw,30px);}.cover-note {margin:5px 0;font-size:11px;line-height:1.2;}.cover-kicker {font-size:9px;}
 .resume-run {padding:4px 7px;font-size:12px;}.mission-desk {padding:6px 12px 8px;}.desk-title {margin-bottom:5px;}.desk-title h2 {font-size:18px;}.mission {padding:6px;gap:5px;}.mission strong {font-size:clamp(13px,2vw,21px);}.mission small {font-size:10px;}.mission-sigil svg {width:17px;height:17px;}.foyer-footer {padding:3px 13px;font-size:8px;}
}
@media (max-height:430px) and (orientation:portrait) { .foyer-home {overflow:auto;} }

.range-buttons > span { display:grid;place-items:center;padding:6px;min-height:26px;color:#d4d8c5;border:1px solid #4e5e50;font-size:12px; }

.language-screen {height:100dvh;min-height:0;overflow:auto;display:grid;align-items:center;justify-items:start;padding:clamp(15px,5vw,94px);background:linear-gradient(95deg,#0c1715df 10%,#11201a94 47%,#11181308 77%),var(--cover-art,none) 68% center/cover no-repeat #13201b;color:#f0e5c9;}
.language-panel {width:min(100%,510px);border:1px solid #8e795d;box-shadow:inset 0 0 0 3px #101814,0 10px 30px #070c0b66;background:linear-gradient(140deg,#15231ef5,#131b18f5);padding:clamp(17px,3vw,43px);}
.language-seal {display:flex;align-items:center;gap:11px;margin:0 0 14px;font:600 12px/1.45 var(--body);letter-spacing:.15em;color:#ccb586;}
.language-seal span {color:#b67965;}
.language-panel h1 {font:650 clamp(28px,4.2vw,52px)/1.19 var(--serif);letter-spacing:0;margin:0;color:#f1e1be;}
.language-subtitle {font:500 clamp(17px,2.1vw,28px)/1.5 var(--serif);margin:3px 0 13px;color:#d5c4a1;}
.language-panel fieldset {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px;padding:0;border:0;}
.language-panel legend {position:absolute;overflow:hidden;clip-path:inset(100%);width:1px;height:1px;}
.language-panel label {display:flex;align-items:center;gap:8px;min-height:46px;padding:7px 12px;border:1px solid #5d6d5c;background:#17241d;cursor:pointer;font:600 clamp(14px,1.3vw,20px)/1.45 var(--body);}
.language-panel label:has(:checked) {border-color:#d4b983;background:#373a2d;color:#f4e7c8;}
.language-panel input {accent-color:#c5af7e;width:16px;height:16px;}
.language-enter {width:100%;min-height:44px;display:flex;justify-content:center;align-items:baseline;gap:10px;background:#cdb987;color:#19221b;font:700 17px/1.35 var(--body);padding:10px;}
.language-enter small {font:500 13px/1.35 var(--body);color:#2c3427;}
.language-help {font:500 12px/1.5 var(--body);color:#bcc6b4;margin:12px 0 0;}
.settings-language {display:flex;gap:12px;align-items:center;justify-content:space-between;margin:9px 0 14px;font-size:15px;}
.settings-language select {min-height:38px;padding:4px 10px;border:1px solid #7d896e;color:#e9e5cc;background:#19261e;font:600 14px/1.45 var(--body);}
:lang(en) .odd-price:after {content:" gold";}
@media (orientation:landscape) and (max-height:480px) {
 .language-screen {padding:8px clamp(12px,4vw,45px);}
 .language-panel {max-width:405px;padding:10px 16px;}
 .language-seal {margin-bottom:5px;}.language-panel h1 {font-size:30px;}
 .language-subtitle {margin:1px 0 6px;font-size:17px;}.language-panel fieldset {margin-bottom:6px;}
 .language-panel label,.language-enter {min-height:37px;padding:5px 8px;}.language-help {margin-top:5px;}
 :lang(en) .dock-economy .odd-price:after {content:"g";}
}

.language-panel label.gate-sound {display:flex;width:max-content;min-height:32px;border:0;background:transparent;color:#c6cfbd;font:500 13px/1.4 var(--body);padding:0 2px;margin:-4px 0 8px;}
.gate-sound small {margin-left:5px;font:400 12px/1.4 var(--body);}

#entry-progress {margin:15px 0;color:#dedac4;font-family:var(--body);}
.entry-line,.entry-count {font-variant-numeric:tabular-nums;}
.entry-line {display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:14px;}
.entry-percent {color:#e8ce96;font-size:16px;}
#entry-progress progress {display:block;appearance:none;width:100%;height:7px;margin:6px 0;background:#29362f;border:0;border-radius:2px;overflow:hidden;}
#entry-progress progress::-webkit-progress-bar {background:#29362f;}
#entry-progress progress::-webkit-progress-value {background:#c3ac78;}
#entry-progress progress::-moz-progress-bar {background:#c3ac78;}
.entry-count {font-size:12px;color:#b9c3b7;}
.entry-error:not([hidden]) {display:flex;align-items:center;justify-content:space-between;gap:9px;margin:10px 0;overflow-wrap:anywhere;color:#f1c2aa;font-size:13px;}
.entry-error button {padding:7px 14px;min-height:36px;white-space:nowrap;border:1px solid #a58c64;color:#f5e4c2;background:#2c3027;}
.language-enter:disabled {opacity:.64;}
.loading-screen .language-panel h1 {font-size:clamp(24px,3vw,40px);}
.loading-screen #entry-progress {margin-bottom:0;}
.foyer-mast nav .foyer-settings,.topbar .header-actions .settings-tool {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:max-content;
  padding-inline:10px;color:#eee1c3;border:1px solid #8c8265;background:#25322b;font-weight:600;
}
.topbar .header-actions .settings-tool {font:600 clamp(12px,.88vw,16px)/1.3 var(--body);min-height:32px;}
.modal:has(.settings-sheet) {width:min(470px,100%);}
.settings-sheet {font:500 15px/1.48 var(--body);}
.settings-sheet h2 {display:flex;align-items:center;gap:11px;}
.settings-sheet h2 svg {color:#b7ca9c;}
.settings-sheet .settings-language {min-height:46px;margin:7px 0 13px;}
.settings-sheet .settings-language select {min-height:40px;min-width:130px;}
.settings-block {border-top:1px solid #49564a;padding-top:12px;margin-top:12px;}
.settings-block h3 {margin:0 0 8px;color:#c3cdaa;font:600 14px/1.45 var(--body);letter-spacing:.065em;}
.setting-switch {display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:42px;padding:6px 10px;border:1px solid #516051;background:#1b2b23;color:#e2e4d8;text-align:start;}
.setting-switch b {display:flex;align-items:center;gap:7px;font-size:13px;color:#d8d6c8;}
.setting-switch b::before {content:'';width:10px;height:10px;border:1px solid #a7b19d;border-radius:50%;}
.setting-switch[aria-checked="true"] b::before {background:#c8d89c;box-shadow:inset 0 0 0 2px #2f4033;}
.setting-volume {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;margin:12px 0 2px;}
.setting-volume output {font-size:15px;font-variant-numeric:tabular-nums;color:#ebce93;}
.setting-volume input {grid-column:1/-1;width:100%;margin:0;min-height:28px;accent-color:#bbcb9d;cursor:pointer;}
.settings-sheet .sample-sound {display:inline-flex;align-items:center;gap:8px;min-height:37px;padding-inline:12px;font-size:14px;}
.settings-block p {margin:7px 0 0;font-size:13px;color:#b6c4b5;line-height:1.4;}
@media (max-width:620px) {
  .foyer-mast {flex-wrap:wrap;}
  .foyer-mast nav {margin-left:auto;}
  .foyer-mast nav .foyer-settings,.topbar .header-actions .settings-tool {padding-inline:5px;gap:3px;}
}
@media (orientation:landscape) and (max-height:500px) {
  #entry-progress {margin:7px 0;}
  .entry-line,.entry-count {font-size:12px;}
  .settings-sheet {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:20px;align-items:start;}
  .modal:has(.settings-sheet) {width:min(620px,100%);}
  .settings-sheet .eyebrow {grid-column:1/-1;margin:0;}
  .settings-sheet h2 {grid-row:2;grid-column:1;}
  .settings-sheet .settings-language {grid-row:2;grid-column:2;margin:0;}
  .settings-block {margin-top:4px;padding-top:4px;}
  .settings-block h3 {margin-bottom:3px;}
  .setting-volume {margin:5px 0 0;}
  .setting-switch,.settings-sheet .sample-sound {min-height:32px;}
}

html.phone-portrait,html.phone-portrait body{overflow:hidden;overscroll-behavior:none;}
.phone-portrait :is(#app,#modal-root,#toast){visibility:hidden;}
#rotate-notice:not([hidden]){
  position:fixed;z-index:2147483647;inset:0;box-sizing:border-box;display:grid;align-items:safe center;justify-items:center;
  overflow:auto;text-align:center;color:#ede8d9;background:radial-gradient(ellipse at 50% 46%,#20372d,#101a16 64%,#0b110e);
  padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));outline:0;
}
#rotate-notice>div{max-width:28rem;margin:auto;}
#rotate-notice svg{color:#c1d6a9;width:clamp(32px,12vmin,64px);height:auto;}
#rotate-title{font:600 clamp(21px,6vmin,32px)/1.22 var(--serif,Georgia,serif);margin:12px 0 8px;}
#rotate-description{font-size:clamp(14px,3.6vmin,17px);line-height:1.45;color:#c3cfc2;margin:0;}
#rotate-notice span[lang]{display:block;}
#rotate-notice[data-language="vi"] [lang="en"],#rotate-notice[data-language="en"] [lang="vi"]{display:none;}

/* Combat light is a separate layer over the original print. */
.unit-piece .piece-art { overflow:hidden; }
.unit-piece .piece-art::before { transform:none; }
.unit-piece .piece-art::after {
 content:'';display:block;position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(123deg,transparent 17%,#fff1bf 43%,#c3dcd3 56%,transparent 88%);
 opacity:var(--portrait-light,0);
}
.unit-piece.dead[data-falling] { opacity:var(--fall-opacity,.08)!important; }
.unit-piece.dead { transform:translate(-50%,-50%); }
.bench .unit-piece.dead { transform:translateX(-50%); }
.shop-card:not(.sold),.unit-piece:not(.dead) {
 box-shadow:inset 0 1px 0 #fff1c638,inset 0 -2px 0 #07130f8a,0 2px 0 #060c0a,0 4px 8px #0206049c;
}
.dock-offers .shop-card { animation:none; }
.dock-offers .shop-card:hover,.dock-offers .shop-card:focus-visible,
.collection-card:hover,.collection-card:focus-visible { transform:none; }
.shop-art,.collection-art { overflow:hidden; }
.card-flight {
 display:block;position:fixed;pointer-events:none;z-index:1800;box-sizing:border-box;border-radius:3px;
 border:2px solid var(--rim,#b5ae91);background:#1c2923 var(--portrait) center / contain no-repeat;
 box-shadow:inset 0 0 0 1px #f3e9c53a,0 6px 16px #030907a8;transform-origin:center;
}
.card-flight.held-card { box-shadow:inset 0 0 0 1px #f4dfad8a,0 12px 18px #000a; }
@media (prefers-reduced-motion:no-preference) {
 html:not(.reduce-motion) :is(.primary-button,.mode-option button,.action-button,.hud-tool,.mission,.resume-run):active:not(:disabled) { filter:brightness(.91);box-shadow:inset 0 2px 4px #070c0980; }
 html:not(.reduce-motion) .unit-piece.dragging:not(.dead) .piece-art { opacity:.55; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 html:not(.reduce-motion) :is(.shop-card,.collection-card):is(:hover,:focus-visible)::after {
   content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
   background:linear-gradient(113deg,transparent 34%,#f2e6c21c 48%,transparent 61%) 100% center/260% 100% no-repeat;
   animation:card-sheen 490ms ease-out both;
 }
}
@keyframes card-sheen { 0%{background-position:100% center;opacity:0;} 23%{opacity:1;} 100%{background-position:0 center;opacity:0;} }
@media (prefers-reduced-motion:reduce) {
 .unit-piece .piece-art::before,.dock-offers .shop-card,.collection-card { transition:none;animation:none; }
}
@media (prefers-reduced-motion:no-preference) {
 html:not(.reduce-motion) .unit-piece[aria-pressed="true"]::after {
   content:'';position:absolute;pointer-events:none;z-index:3;inset:0;
   box-shadow:inset 0 0 0 2px #f1e3bd, inset 0 0 11px #d9c08262;
   animation:focus-card 260ms ease-out both;
 }
}
@keyframes focus-card {from{opacity:.85;}to{opacity:0;}}

/* Local faces are loaded and registered before entry. */
:root {
  --serif: 'Eldritch Serif', Georgia, serif;
  --body: 'Eldritch Sans', 'Segoe UI', Arial, sans-serif;
  --condensed: 'Eldritch Condensed', 'Arial Narrow', Arial, sans-serif;
}
.foyer-brand, .cover-copy h1, .cover-subtitle, .desk-title h2, .mission-number,
.mission strong, .ledger h1, .rank-num, .record-points, .ledger-empty h2,
.abyss-summary strong { font-family: var(--serif); }
.foyer-brand, .cover-subtitle, .desk-title h2, .mission strong,
.modal h2, .inspector-name, .codex-group h3 { line-height: 1.32; }
.foyer-mast nav button, .mission small,
.ledger-tabs button, .ledger-tools .action-button { line-height: 1.48; }
.foyer-mast nav button { min-width: 36px; min-height: 38px; }
.cover-copy h1 { line-height: 1.08; }
.resume-run { min-height: 40px; flex-wrap: wrap; text-align: left; }
.mission { min-height: 50px; }
.modal .mode-options {
  grid-template-columns: repeat(auto-fit, minmax(min(218px,100%),1fr));
  align-items: stretch;
}
.modal .mode-option { min-width: 0; }
.modal .mode-option p { font-size: 13px; line-height: 1.6; }
.modal .mode-option small { font-size: 12px; letter-spacing: .025em; }
.modal .mode-option .form-actions { margin-top: 12px; }
.modal .form-actions button { height: auto; min-height: 40px; min-width: 0; padding: 7px 12px; line-height: 1.47; white-space: normal; }
.modal .mode-option .form-actions > button { flex: 1 1 100%; }
.modal .modal-close { min-width: 40px; min-height: 40px; }
.modal :is(select,input,textarea) { line-height: 1.5; }
.modal .codex-chip { min-height: 34px; line-height: 1.46; }
.modal .volume-control input[type="range"] { min-height: 26px; }
.ledger .ledger-back { min-height: 36px; }
.ledger-tabs button, .ledger-tools .action-button { min-height: 36px; }
.record-name { min-width: 0; overflow-wrap: anywhere; }
.record-points { white-space: nowrap; }
.topbar .chapter-title, .rail-traits .trait-name,
.bench-heading .range-legend span, .bench-hint { line-height: 1.48; }
.battlefield .unit-piece .piece-name, .preview-board .unit-piece .piece-name,
.bench .bench-slot .piece-name { line-height: 1.34; padding-block: 0; }
.dock-offers .shop-card .shop-card-name { line-height: 1.32; }
.dock-offers .identity-label { line-height: 1.42; }
.dock-economy .level-label, .dock-economy .odd-price,
.odds-detail .odd-price { line-height: 1.42; }
.dock-economy .level-label strong, .tier-odd b { line-height: 1.14; }
.dock-offers .shop-info-btn { display: grid; place-items: center; padding: 0; font: 700 13px/1 var(--body); }

/* The map remains the largest surface. Extra hit area comes from the control
   gutter or a wider secondary column, never from covering the adjacent cell. */
@media (orientation: landscape) and (min-height:631px) {
  .dock-offers .shop-info-btn { width: clamp(25px,9cqw,36px); height: clamp(25px,9cqw,36px); }
  .dock-offers .shop-card-bottom { padding-inline: clamp(4px,2cqw,10px); }
  .dock-offers .shop-card-name { font-size: clamp(14px,min(7cqw,18cqh),26px); }
  .dock-offers .shop-bar .action-button, .arena-clock .speed-btn { min-height: 30px; min-width: 34px; }
  .dock-economy .economy-buttons .action-button { min-height: 36px; height: auto; }
  .rail-tabs button { min-height: 34px; line-height: 1.45; }
}
@media (orientation: landscape) and (max-height:630px) {
  .dock-offers .shop-card:not(.sold) { grid-template-columns: clamp(31px,4.6vw,51px) minmax(0,1fr) 26px; }
  .dock-offers .shop-info-btn { inset: 0 1px 0 auto; width: 24px; height: min(100%,30px); margin: auto 0; }
  .dock-offers .shop-card .shop-card-name { font-size: clamp(10px,5.9cqw,14px); }
  .dock-offers .shop-card .shop-card-bottom { min-height: 0; padding-block: 0; }
  .foyer-mast nav button { min-width: 30px; min-height: 30px; }
  .resume-run { min-height: 29px; }
  @container (max-height:31px) {
    .dock-offers .shop-card-name { white-space: nowrap; -webkit-line-clamp: 1; }
  }
}
@media (orientation: portrait) {
  .dock-offers .shop-info-btn { width: clamp(22px,23cqw,30px); height: clamp(22px,23cqw,30px); }
  .resume-run { min-height: 36px; }
}
@media (max-width:720px) and (orientation: portrait) {
  .foyer-mast nav button { min-width: 28px; min-height: 34px; }
  .modal .mode-options { grid-template-columns: 1fr; }
  .modal .mode-option p, .modal .mode-option .form-actions { margin-block: 6px; }
}
@media (orientation:landscape) and (max-height:420px) {
  .mission { min-height: 38px; }
  .cover-note { line-height: 1.42; }
  .foyer-home .foyer-mast nav button { min-height: 26px; }
}
/* The same lower-right control is used in both languages. */
:lang(en) .odd-price:after { content: ' gold'; }
@media (orientation:landscape) and (max-height:630px), (orientation:portrait) {
  :lang(en) .dock-economy .odd-price:after { content: 'g'; }
}
@media (orientation:landscape) and (max-height:630px) {
  :lang(en) .arena-column .ally-faction > span:after { content: 'ALLY'; }
}

/* On smaller side-market cards, put the info target opposite the price on
   the art panel so that long translated trait names keep their own column. */
@media (orientation:landscape) and (min-height:631px) {
  @container (max-width:310px) {
    .dock-offers .shop-info-btn {position:relative;grid-area:art;align-self:start;justify-self:end;inset:auto;margin:1px;z-index:10;}
    .dock-offers .shop-card-name {padding-right:0;}
  }
}

/* Light maps share the background's scale and crop. The printed panel never moves. */
.cover-ink::before,.cover-ink::after {
  content:none; position:absolute; inset:0; pointer-events:none;
  background-size:inherit; background-position:inherit; background-repeat:no-repeat;
}
.cover-ink::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='506.52' viewBox='0 0 900 506.52'%3E%3Cdefs%3E%3Cfilter id='halo' x='-45%25' y='-45%25' width='190%25' height='190%25'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M611 19C655 -7 722 15 724 77Q725 99 714 115' fill='none' stroke='%23ff7142' stroke-width='11' opacity='.74' filter='url(%23halo)'/%3E%3Cpath d='M625 12C669 -1 714 22 723 64Q727 85 719 103' fill='none' stroke='%23ffac76' stroke-width='1.6' opacity='.84'/%3E%3C/svg%3E");
}
.cover-ink::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='506.52' viewBox='0 0 900 506.52'%3E%3Cdefs%3E%3CradialGradient id='amber'%3E%3Cstop stop-color='%23fff2bd' stop-opacity='.95'/%3E%3Cstop offset='.23' stop-color='%23ffc073' stop-opacity='.52'/%3E%3Cstop offset='1' stop-color='%23ff9f32' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='651.5' cy='403' rx='11' ry='12' fill='url(%23amber)'/%3E%3Cellipse cx='654' cy='446' rx='18' ry='3' fill='url(%23amber)' opacity='.75'/%3E%3C/svg%3E");
}
harbor-weather,portrait-overlay {display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;}
harbor-weather {z-index:1;}
harbor-weather canvas {display:block;width:100%;height:100%;}
portrait-overlay {z-index:0;}
portrait-overlay canvas {position:absolute;display:block;pointer-events:none;}
html.reduce-motion :is(portrait-overlay,harbor-weather),.unit-piece.dead portrait-overlay {display:none;}
@media (prefers-reduced-motion:reduce) {portrait-overlay,harbor-weather {display:none;}}
@media (prefers-reduced-motion:no-preference) {
  html:not(.reduce-motion) .cover-ink::before {content:'';animation:eclipse-rim 13s ease-in-out -3s infinite alternate;}
  html:not(.reduce-motion) .cover-ink::after {content:'';animation:lantern-wick 7.7s ease-in-out -2s infinite;}
  body:has([role=dialog]) .cover-ink::before,body:has([role=dialog]) .cover-ink::after {animation-play-state:paused;}
}
@keyframes eclipse-rim {from{opacity:.08}to{opacity:.64}}
@keyframes lantern-wick {0%,100%{opacity:.19}26%{opacity:.57}40%{opacity:.39}64%{opacity:.73}81%{opacity:.33}}

.lesson-entry {display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid #a38b62;background:#27372c;color:#f2dfb2;font:600 clamp(13px,1vw,17px)/1.4 var(--body);min-height:36px;}
.lesson-entry:hover,.training-offer:hover {background:#344236;}
.modal:has(.practice-room) {width:min(940px,97vw);max-height:96dvh;overflow:auto;padding:clamp(12px,2.2vw,30px);}
.practice-room,.practice-columns,.practice-table,#practice-controls {min-width:0;}
.practice-room header {padding-right:40px;}
.practice-room header p,.practice-room header h2 {margin:0;}
.practice-columns {display:grid;grid-template-columns:minmax(0,1.65fr) minmax(190px,1fr);margin-top:12px;gap:clamp(10px,1.5vw,22px);align-items:start;}
.practice-table {border:1px solid #55675b;background:#15241f;}
.practice-table .preview-team {font:600 12px/1.4 var(--body);letter-spacing:.05em;}
.modal .practice-field {position:relative;isolation:isolate;flex:none;container-type:size;height:clamp(190px,42dvh,385px);width:100%;background:linear-gradient(#111b18ac,#14241fbc),var(--arena-art,none) center/cover;}
.practice-cells,#practice-units,#practice-fx {position:absolute;inset:0;width:100%;height:100%;}
.practice-cells {z-index:0;}
.practice-field .board-cell {position:absolute;left:calc((var(--col) + var(--offset)) * 100% / 7.5);top:calc(var(--row) * 100% / 6);width:calc(100% / 7.5);height:calc(100% / 6);display:grid;place-items:center;}
.practice-field .ally-cell {background:#41665b4d;color:#a4c6b6;}
.practice-field .enemy-cell {background:#71554b55;}
.practice-cells button:hover,.practice-cells button:focus-visible {background:#5a8666a8;}
#practice-units {z-index:1;pointer-events:none;}
.modal .practice-field .unit-piece {pointer-events:auto;}
.modal .practice-field .unit-piece.selected {outline:2px solid #f2dd95;outline-offset:2px;}
#practice-fx {z-index:4;pointer-events:none;}
#practice-controls {padding:2px 0;align-self:center;}
#practice-controls h3 {font:600 clamp(17px,2vw,24px)/1.3 var(--serif);margin:4px 0 9px;color:#f0e2bd;}
.practice-message,.practice-live {margin:0 0 10px;color:#d7dfd2;font:500 clamp(13px,1.1vw,16px)/1.5 var(--body);}
.practice-live {font-variant-numeric:tabular-nums;color:#aacae4;min-height:1.4em;}
.practice-buttons {display:flex;flex-wrap:wrap;gap:6px;}
.practice-buttons button {min-height:36px;line-height:1.32;font-size:14px;padding:6px 9px;}
.training-compare {margin:4px 0;font:600 14px/1.4 var(--body);color:#d4c496;}
.training-compare small {display:block;color:#adbcae;}
.training-compare.outcome {color:#bedea9;}
.training-offer {display:flex;align-items:center;gap:9px;padding:4px;border:2px solid #b6bdbe;background:#1c2a22;color:#e4e7d9;width:100%;text-align:start;}
.training-offer i {display:block;width:clamp(38px,6vw,60px);aspect-ratio:1;background:var(--portrait) center/contain no-repeat;}
.training-offer span,.training-offer small {display:block;}
.training-offer.chosen {outline:2px solid #d5bf81;}
.report-moment {border-left:3px solid #bda775;padding:8px 12px;margin-block:8px;background:#1d2b23;}
.report-moment b {color:#decea8;}.report-moment p {margin:4px 0;}
.challenge-from-score {margin:8px 0;}
.beta-settings-link {min-height:34px;font-size:14px;text-decoration:underline;justify-self:start;}
.seed-error {color:#f0b194;}
@media(max-width:580px) and (orientation:portrait) {
  .practice-columns {grid-template-columns:1fr;gap:7px;}
  .modal .practice-field {height:clamp(175px,31dvh,280px);}
}
@media(orientation:landscape) and (max-height:500px) {
  .modal:has(.practice-room) {padding:6px 11px;}
  .practice-room header p {display:none;}
  .practice-room header h2 {font-size:20px;}
  .practice-columns {grid-template-columns:minmax(0,1.5fr) minmax(164px,1fr);gap:9px;margin-top:5px;}
  .modal .practice-field {height:clamp(150px,54dvh,230px);}
  .practice-table .preview-team {padding:1px 7px;font-size:10px;}
  #practice-controls h3 {font-size:16px;margin:1px 0 4px;}.practice-message {font-size:12px;margin:0 0 4px;}
  .practice-buttons button {min-height:29px;font-size:12px;padding:3px 6px;}
  .lesson-entry {font-size:12px;padding:4px 8px;min-height:28px;}
  .desk-title {align-items:center;}
}

/* One solid quality frame. Neutral creatures have a black rim and a legible name. */
:is(.unit-piece,.shop-card[data-action],.collection-card,.inspector) {
  --name-ink:var(--rarity);
  border:4px solid var(--rarity) !important; border-radius:3px; clip-path:none;
}
:is(.unit-piece,.shop-card,.collection-card,.inspector).rarity-0 {--name-ink:#c4cbd0;}
.shop-card[data-action],.collection-card,.inspector {border-width:5px !important;}
.inspector-art {border:0;}
.unit-piece {container:unit-card / inline-size;}
.battlefield .unit-piece,.preview-board .unit-piece,.bench .unit-piece {
  border-width:clamp(2px,.67cqh,5px) !important;
}
.unit-piece .piece-name,.shop-card .shop-card-name,.inspector .inspector-name,
.collection-card .collection-body h3,.quality-name {color:var(--name-ink,var(--rarity));}
/* The rank is anchored to the nameplate on field and reserve cards. */
:is(.battlefield,.preview-board,.bench) .unit-piece .piece-name {
  left:0; right:0; overflow:visible; background:#0c1715eb; text-shadow:0 1px 2px #000;
}
.piece-label {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
:is(.battlefield,.preview-board,.bench) .unit-piece .piece-stars {
  display:block; position:absolute; top:auto; bottom:100%; left:50%; right:auto;
  transform:translateX(-50%); width:max-content; max-width:100%; padding:0 2px;
  color:#ffe3a0; background:#0c1515cf; border-radius:2px 2px 0 0;
  font:700 clamp(8px,10cqw,11px)/1 Arial,sans-serif; letter-spacing:0;
  text-shadow:0 1px 1px #000; pointer-events:none;
}
.unit-piece .monster-seal {left:1px;right:auto;transform:none;max-width:24%;padding:1px 2px;clip-path:none;border:0;}
.unit-piece .monster-seal b {display:none;}
.unit-piece .monster-seal svg {width:clamp(9px,17cqw,17px);height:auto;}
@container unit-card (max-width:87px) {
  .unit-piece .card-badge {max-width:22cqw;max-height:22cqw;}
}
.inspector-top .star-text {background:#0c1516e8;padding:2px 5px;color:#ffe3a0;font:700 clamp(16px,1.3vw,21px)/1.12 Arial,sans-serif;letter-spacing:1px;border-radius:2px;}
:is(.item-btn,.item-btn.complete,.item-btn:hover,.piece-item,.small-item:has(img)) {
  border:0 !important; box-shadow:none; background:#13221e;
}
.item-btn.selected,.item-btn:focus-visible {outline:2px solid #e8dfbb;outline-offset:2px;}
.tray-help [hidden] {display:none;}
.right-sidebar .rail-tabs {grid-template-columns:repeat(3,minmax(0,1fr));}
.right-sidebar .rail-tabs button {line-height:1.3;min-height:32px;padding:4px 2px;}
.right-sidebar:not([data-view="stats"]) .rail-stats,.right-sidebar[data-view="stats"] :is(.rail-match,.rail-profile) {display:none;}
.rail-stats {min-height:0;overflow-y:auto;}
.meter-opener {display:inline-flex;gap:3px;align-items:center;border:1px solid #5a7162;background:#203127;color:#e5ddbd;padding:2px 5px;white-space:nowrap;font:600 11px/1.3 var(--body);}
@media (orientation:landscape) and (min-width:1180px) and (min-height:631px),
       (orientation:landscape) and (max-height:630px) and (min-width:780px) and (min-aspect-ratio:2/1) {
  .meter-opener {display:none;}
}
.combat-meters {font:500 clamp(12px,1.15vw,16px)/1.4 var(--body);color:#d9e2d5;}
.meter-context {margin:5px 0 9px;font-weight:600;color:#e9d8b2;}
.meter-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;}
.meter-tabs button {min-width:0;min-height:34px;padding:4px;border:1px solid #48584e;background:#17261f;color:#c2cdc1;font:inherit;}
.meter-tabs button[aria-pressed="true"] {background:#39483a;color:#fff1c9;border-color:#ab9f7b;}
.meter-help,.meter-row small {display:block;color:#afc0b4;font-size:.88em;}
.meter-help {margin:8px 0;min-height:2.5em;}
.meter-list {padding:0;margin:0;list-style:none;}
.meter-row {display:grid;grid-template-columns:1.2em clamp(30px,3vw,41px) minmax(0,1fr);gap:5px;align-items:start;padding:8px 0;border-top:1px solid #34463a;}
.meter-rank {font-size:.85em;text-align:center;color:#d7c7a3;}
.meter-row .icon-portraits {width:100%;height:auto;border-radius:2px;}
.meter-body {min-width:0;}
.meter-title {display:flex;justify-content:space-between;gap:6px;align-items:baseline;}
.meter-title strong {font-weight:600;overflow-wrap:anywhere;}
.meter-title b {font:650 1.14em var(--condensed);font-variant-numeric:tabular-nums;}
.meter-bar {display:flex;height:5px;background:#0c1510;margin:3px 0;border-radius:1px;overflow:hidden;}
.meter-bar i {display:block;background:#bbbfac;}
.meter-bar.healing i {background:#7abb83;}.meter-bar.shielding i {background:#a8a1d1;}
.meter-bar .segment-physical {background:#e28178;}.meter-bar .segment-magic {background:#77b7f8;}.meter-bar .segment-true {background:#ddd9c9;}
.damage-physical {color:#f3a198;}.damage-magic {color:#88c3ff;}.damage-true {color:#e1decc;}
#modal-root .combat-meters {min-width:0;}
.codex-item.codex-relic {border:0;padding:12px;background:#17241fa8;}
.awakening-odds {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
.awakening-odds p {margin:0;padding:7px 10px;background:#223028;font-variant-numeric:tabular-nums;}
.awakening-odds b {display:block;font-size:.88em;color:#bccebb;}
/* Draft offers use the same circular pact and shield-shaped class marks as the shop. */
.draft-card .shop-identities {display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;margin:1px 0;}
.draft-card .shop-identity {display:inline-flex;flex:0 1 auto;align-items:center;text-align:start;gap:4px;max-width:100%;}
.draft-card .identity-symbol {flex:none;width:clamp(19px,1.6vw,25px);height:auto;line-height:1;}
.draft-card .identity-symbol svg {color:inherit;margin:0;}
.draft-card .identity-label {display:block;min-width:0;color:#e2ddc7;font:600 clamp(11px,.95vw,14px)/1.22 var(--body);overflow-wrap:anywhere;}
.draft-card .identity-kind {display:block;color:#b6c3b8;font:500 10px/1.2 var(--body);}
.draft-card .draft-body {min-width:0;}
html[lang="vi"] .stat small {font-size:clamp(10px,.7vw,12px);line-height:1.25;overflow-wrap:normal;}
@media(orientation:landscape) and (max-height:500px) {
  .draft-card .identity-symbol {width:16px;}
  .draft-card .identity-label {font-size:10px;}
  .draft-card .identity-kind {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .draft-card .shop-identities {gap:2px 6px;}
}
.meter-base:empty,.split-damage:empty {display:none;}
.meter-live-time {display:inline-flex;align-items:center;gap:4px;margin-inline-start:4px;white-space:nowrap;font-size:.86em;font-variant-numeric:tabular-nums;color:#acd6b2;}
.meter-live-time::before {content:'';width:6px;height:6px;border-radius:50%;background:#84c392;}
@media (prefers-reduced-motion:no-preference) {
  html:not(.reduce-motion) .combat-meters[data-live="true"] .meter-bar i {transition:width 90ms linear;}
}
/* An open meter leaves the ongoing fight visible. Other game dialogs keep their usual backdrop. */
.modal-backdrop:has(.meter-dialog) {display:flex;justify-content:flex-end;align-items:stretch;padding:5px;background:#060e0c33;backdrop-filter:none;}
.modal:has(.meter-dialog) {width:clamp(210px,34vw,345px);max-height:calc(100dvh - 10px);margin:0;overflow:auto;padding:10px 12px;}
.meter-dialog h2 {font-size:clamp(16px,1.6vw,23px);margin:0;padding-inline-end:28px;}
@media(orientation:portrait) {
  .modal-backdrop:has(.meter-dialog) {flex-direction:column;}
  .modal:has(.meter-dialog) {width:100%;max-height:52dvh;}
}
.draft-card .draft-relic {display:grid;gap:3px;}
@media (orientation:landscape) and (max-height:420px) and (max-width:740px),
       (orientation:portrait) and (max-width:670px) {
  .modal .draft-card {grid-template-columns:34px minmax(0,1fr);grid-template-areas:"art name" "traits traits" "gear gear";align-content:center;gap:2px 5px;padding:2px 4px;}
  .modal .draft-card .draft-body {display:contents;}
  .modal .draft-card .draft-art {grid-area:art;height:28px;min-height:0;align-self:center;}
  .modal .draft-card .draft-unit {grid-area:name;align-self:center;font-size:12px;line-height:1.14;}
  .modal .draft-card .shop-identities {grid-area:traits;margin:0;line-height:1.18;}
  .modal .draft-card .draft-relic {grid-area:gear;display:flex;flex-wrap:wrap;align-items:center;gap:1px 5px;line-height:1.16;}
  .modal .draft-card .draft-item,.modal .draft-card .relic-name {font-size:10px;line-height:1.14;}
  .modal .draft-card .draft-item img {width:13px;height:13px;}
  .modal .draft-relic small,.modal .draft-relic [data-damage-source],.modal .draft-relic [class^="damage-"] {font-size:10px;line-height:1.16;}
}
@media (orientation:landscape) and (max-height:420px) and (max-width:740px) {
  .modal:has(.draft-grid) > .eyebrow {display:none;}
  .modal:has(.draft-grid) {padding-block:5px;}
}
.combat-meters[data-metric="healing"] .meter-title b,.meter-tabs [data-metric="healing"] {color:var(--stat-healing);}
.combat-meters[data-metric="shielding"] .meter-title b,.meter-tabs [data-metric="shielding"] {color:var(--stat-shield);}
.meter-bar.healing i {background:var(--stat-healing);}
.meter-bar.shielding i {background:var(--stat-shield);}
.unit-piece .piece-shield {background:var(--stat-shield);}
.unit-piece .mana-fill {background:var(--stat-mana);}
.metric.health .metric-num,.metric.health > svg,.player-row:not(.eliminated) .player-hp {color:var(--stat-health);}
.metric.abyss-losses .metric-num,.metric.abyss-losses > svg {color:#efd29d;}
.metric.abyss-losses .metric-num small {font-size:.65em;}
.abyss-loss-line {display:flex;align-items:center;gap:.7em;}
.attempt-seals {display:inline-flex;gap:.38em;}
.attempt-seals i {display:block;width:.56em;height:.56em;border:1px solid #d8c69c;transform:rotate(45deg);}
.attempt-seals i.spent {background:#b56b63;border-color:#dda59b;}
.piece-origins {position:absolute;inset:1px auto auto 1px;display:flex;gap:1px;z-index:8;}
.piece-origins .card-badge {position:static;}
.collection-card .piece-origins {inset:6px auto auto 6px;}
.shop-identities.dual-pact {gap:2px;}
.dock-offers .dual-pact .identity-symbol {max-width:100%;}
.range-buttons.stat-range :is(button,span),.codex-stats .stat-range {color:var(--stat-range);}
.combat-meters:is([data-metric="damage"],[data-metric="tanked"]) .meter-title b {color:var(--stat-damage);}

.pact-roster {margin-block:9px;line-height:1.45;}
.pact-roster p {margin:0 0 4px;color:#cfdbc9;}
.pact-roster summary {cursor:pointer;padding-block:4px;color:#dfd1ae;}
.pact-roster ul {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:4px 9px;list-style:none;margin:5px 0;padding:0;}
.pact-roster li {min-width:0;padding:3px 5px;background:#203028;}
.pact-roster li b,.pact-roster li small {display:block;line-height:1.35;}
.pact-roster li b {color:var(--rarity);font-weight:600;}

:root {
  --stat-physical:#ff9a90;
  --stat-magic:#86c8ff;
  --stat-true:#f3e8ce;
  --stat-health:#9bdf9d;
  --stat-healing:#8de9ac;
  --stat-shield:#d7b4ff;
  --stat-mana:#70ded6;
  --stat-armor:#e5bb91;
  --stat-resist:#b5b6f4;
  --stat-speed:#f7d181;
  --stat-range:#d3dda0;
  --stat-time:#bed0dd;
  --stat-crit:#ffa87e;
  --stat-damage:#e7ceb5;
}
.damage-physical,.stat-physical {color:var(--stat-physical);}
.damage-magic,.stat-magic {color:var(--stat-magic);}
.damage-true,.stat-true {color:var(--stat-true);}
.stat-health {color:var(--stat-health);}
.stat-healing {color:var(--stat-healing);}
.stat-shield {color:var(--stat-shield);}
.stat-mana {color:var(--stat-mana);}
.stat-armor {color:var(--stat-armor);}
.stat-resist {color:var(--stat-resist);}
.stat-speed {color:var(--stat-speed);}
.stat-range {color:var(--stat-range);}
.stat-time {color:var(--stat-time);}
.stat-crit {color:var(--stat-crit);}
.stat-damage {color:var(--stat-damage);}
.relic-name.relic-gray {color:#c7cdd5;}
.relic-name.relic-green {color:#96dfa6;}
.relic-name.relic-gold {color:#f3cb74;}
.relic-recipe {display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:7px;color:var(--ink);line-height:1.25;}
.recipe-ingredient {display:inline-flex;min-width:0;align-items:center;gap:5px;}
.recipe-ingredient .icon-relics {width:26px;height:26px;flex:none;object-fit:contain;}
.recipe-ingredient .relic-name {font:550 .86rem/1.18 var(--body);overflow-wrap:anywhere;}
.recipe-plus {color:#b0b9ad;}
.forge-step {margin-block:8px;padding-inline-start:8px;border-inline-start:1px solid #566157;}
.item-grade-filters {display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;}
.perfect-catalog {margin:0 0 15px;}
.perfect-catalog .codex-relic:only-child {grid-column:1/-1;}
.perfect-catalog h3 {margin:0 0 5px;}
.forge-marks {display:flex;align-items:baseline;flex-wrap:wrap;gap:.35em;margin:2px 0 4px;color:#c9d3c1;font-size:.86em;}
.forge-marks small {font-size:inherit;color:#aeb9ab;}
.forge-alternatives {margin-top:5px;}
.forge-group {margin:.45em 0;}
.forge-group>div {display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;}
.codex-relic.perfected-entry>.icon-relics {width:clamp(52px,7.5vw,78px);height:auto;align-self:flex-start;}
.perfect-catalog .perfected-entry h3 {font:650 clamp(16px,1.6vw,20px)/1.25 var(--body);margin:0 0 4px;}
.perfect-catalog .perfected-entry p {font-size:clamp(13px,1.04vw,15px);line-height:1.5;}
.perfect-catalog .perfected-entry div {min-width:0;}
.forge-group .recipe-ingredient {font-size:.87em;}
.forge-note,.forge-count {color:var(--muted);margin:5px 0 9px;}
.forge-selectors {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:9px;margin:8px 0 10px;}
.forge-selectors label {display:grid;gap:4px;min-width:0;}
.forge-selectors select {min-width:0;width:100%;padding:6px;color:var(--ink);background:#17241f;border:1px solid #57665c;font:inherit;}
.codex-relic .text-button {display:block;margin-top:8px;}
#relic-hint .recipe-ingredient .icon-relics {width:20px;height:20px;}
#relic-hint .recipe-ingredient .relic-name {font-size:.78rem;}
.stat-grid .stat[class*="stat-"] small,.stat-deltas > [class*="stat-"] > b {color:inherit;}
.item-btn,.item-btn.complete,.small-item,.piece-item {border:0;}
.item-btn.complete {background:#20362a;}
#relic-hint {
  position:fixed;z-index:1600;pointer-events:none;max-width:min(290px,calc(100vw - 16px));
  padding:10px 12px;background:#13201b;color:#d8dfd2;box-shadow:0 3px 15px #020806c9;
  font:500 14px/1.4 var(--body);
}
#relic-hint b {font-weight:650;} #relic-hint p {margin:3px 0 0;}

/* A short landscape viewport has room for a board and a market. The roster,
   traits and relic bag are opened from the toolbar, so the bench owns a row. */
@media (orientation: landscape) and (max-height: 630px) and (max-width: 1100px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .app-shell {
    --gap: 5px; --reserve-height: clamp(43px, 15dvh, 77px);
    height: 100%; height: 100dvh; padding: env(safe-area-inset-top) max(5px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
    display: grid; grid-template-rows: auto minmax(0,1fr);
  }
  .app-shell .topbar { min-height: 36px; gap: 5px; }
  .topbar .brand { align-self: stretch; min-width: 33px; justify-content: center; }
  .topbar .brand > span:last-child, .topbar .chapter > div:last-child, .topbar .topnav, .topbar .header-actions [data-action="home"] { display: none; }
  .topbar .roundbar { flex: 1 0 auto; justify-content: flex-start; gap: clamp(6px,1.6vw,16px); }
  .topbar .chapter { flex: none; }
  .topbar .chapter-no { font-size: clamp(16px,2.55vw,23px); }
  .topbar .metric-num { font-size: clamp(16px,2.2vw,21px); }
  .topbar .quick-tools { display: flex; gap: 3px; }
  .topbar .quick-tools .hud-tool, .topbar .header-actions .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; height: 34px; padding: 2px 5px; }
  .topbar .hud-tool span, .topbar .settings-tool span { display: inline; font-size: 11px; line-height: 1.2; }
  .topbar .header-actions { gap: 3px; }
  .topbar .header-actions :is(.archive-tool, [data-action="home"]) { display: none; }
  .app-shell .layout { min-height: 0; grid-template: 'field market' minmax(0,1fr) / minmax(0,1fr) clamp(190px,31%,325px); gap: var(--gap); padding-top: 3px; }
  .app-shell .layout .right-sidebar { display: none; }
  .arena-column { display: grid; grid-template-rows: auto minmax(0,1fr) auto var(--reserve-height); }
  .arena-column > .scout-banner { grid-row: 1; }
  .arena-column > .arena { grid-row: 2; min-width: 0; }
  .arena-column > .bench-heading { grid-row: 3; min-height: 24px; margin: 1px 0; align-items: center; }
  .bench-heading .meter-opener { display: inline-flex; align-items: center; padding: 2px 6px; min-height: 23px; font-size: 10px; }
  .bench-heading .bench-hint { display: none; }
  .bench-heading .section-title { font-size: 11px; line-height: 1.25; }
  .arena-column .bench { grid-row: 4; height: var(--reserve-height); grid-template: minmax(0,1fr) / repeat(9,minmax(0,1fr)); gap: clamp(2px,.38vw,5px); align-items: stretch; }
  .bench .bench-slot { display: block; min-height: 0; height: 100%; background: #17251e; border: 1px solid #516452; overflow: hidden; }
  .bench .bench-slot.empty::after { position: absolute; inset: 0; display: grid; place-items: center; color: #94aa95; font-size: 12px; }
  .bench .bench-slot .unit-piece { top: 0 !important; width: 100% !important; max-width: calc(var(--reserve-height)*1.1); height: 100% !important; }
  .bench .bench-slot .piece-name { font-size: clamp(9px,1.4vw,12px); }
  .bench .piece-allegiance { display: none; }
  .bench .piece-name, .bench .unit-piece .card-badge { pointer-events: none; }
  .arena-column .field-slot > .battlefield { width: min(100%,178cqh); }
  .battlefield .unit-piece { --card-height: min(85px,calc(100cqh / 6 - 2px)); width: min(calc(100cqw / 7.5 - 5px),calc(var(--card-height)*1.23)) !important; }
  .arena-column .unit-piece.ally[draggable] { touch-action: none; -webkit-touch-callout: none; }
  .arena-column .board-faction { font-size: 10px; }
  .arena-column .enemy-faction { height: 28px; min-height: 28px; }
  .arena-column .ally-faction { right: 62px; height: 28px; }
  .arena-column .arena-header { z-index: 8; height: 28px; }
  .arena-clock .speed-btn { min-width: 32px; min-height: 27px; }
  .market-dock { grid-template: 'orders' auto 'offers' minmax(0,1fr) 'eco' auto / minmax(0,1fr); gap: 3px; padding: 3px; }
  .orders .primary-button, .orders .awakening-chip { min-height: 32px; height: auto; }
  .orders .primary-button { min-width: 0; white-space: normal; font-size: 12px; line-height: 1.12; }
  .orders .shortcut { display: none; }
  .dock-offers { min-height: 0; }
  .dock-offers .shop-grid { grid-template: repeat(5,minmax(36px,1fr)) / minmax(0,1fr); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .dock-offers .shop-grid:has(.opening-market) { grid-template-rows: minmax(0,1fr); }
  .dock-offers .shop-grid .shop-card:not(.sold) { grid-template: 'art copy detail' minmax(0,1fr) / clamp(34px,4.8vw,50px) minmax(0,1fr) 30px; }
  .dock-offers .shop-art { grid-area: art; }
  .dock-offers .shop-card .shop-card-bottom { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; align-self: center; gap: 2px; padding: 0 3px; }
  .dock-offers .shop-card .shop-card-name { font: 600 clamp(12px,1.8vw,16px)/1.1 var(--condensed); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .dock-offers .shop-card .shop-identities { margin: 0; gap: 4px; }
  .dock-offers .identity-symbol { width: clamp(14px,3.8dvh,22px); }
  .dock-offers .shop-info-btn { position: static; grid-area: detail; align-self: center; justify-self: center; width: 29px; height: 29px; margin: 0; }
  .dock-offers .shop-bar .action-button { min-width: 34px; min-height: 27px; }
  .dock-economy .economy-buttons { gap: 3px; }
  .dock-economy .economy-buttons .action-button { min-height: 31px; font-size: 11px; }
  .dock-economy .level-panel { min-height: 29px; grid-template-columns: 20px minmax(0,1fr); gap: 4px; padding: 2px 6px; }
  .dock-economy .level-info { display: block; }
  .dock-economy .level-label { display: flex; margin: 0; }
  .dock-economy .level-panel .shop-odds { display: none; }
  .result-banner { justify-content: flex-start; gap: 3px; padding: 8px; }
  .result-banner > :first-child { margin-top: auto; }
  .result-banner > :last-child { margin-bottom: auto; }
  .result-banner > * { flex-shrink: 0; }
  .result-banner .result-actions, .result-banner .component-choice { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .result-banner .primary-button, .result-banner .action-button { min-height: 34px; height: auto; padding: 4px 9px; line-height: 1.2; }
}
@media (orientation: landscape) and (max-height: 630px) and (max-width: 740px) {
  .topbar .quick-tools .hud-tool span, .topbar .settings-tool span { display: none; }
  .topbar .economy { gap: 6px; }
  .arena-column > .bench-heading { min-height: 22px; }
}
/* On a shallow phone the lock shares the command row. XP, reroll and level
   share the footer, leaving five touchable cards between them. */
@media (orientation: landscape) and (max-height: 350px) and (max-width: 1100px) {
  .market-dock { grid-template: 'commands lock' 32px 'cards cards' minmax(0,1fr) 'footer level' 33px / minmax(0,1fr) 41px; }
  .market-dock .orders { grid-area: commands; }
  .market-dock .orders .awakening-chip { font-size: 9px; }
  .market-dock .dock-offers, .market-dock .shop-bar, .market-dock .dock-economy { display: contents; }
  .market-dock .shop-title { display: none; }
  .market-dock .shop-bar .action-button { grid-area: lock; height: 32px; }
  .market-dock .shop-grid { grid-area: cards; }
  .market-dock .economy-buttons { grid-area: footer; }
  .market-dock .level-panel { grid-area: level; display: grid; place-items: center; grid-template: 1fr / 1fr; padding: 0; }
  .market-dock .level-panel .level-info { display: none; }
}

.dialog-heading, .dialog-reading { display: contents; }
.codex-facet-toggle { display: none; }
[data-score-file] { text-decoration:none; }
[data-score-file][aria-disabled] { opacity:.5; pointer-events:none; }

@media (orientation: landscape) and (max-height:600px) {
  .foyer {
    padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
    overscroll-behavior:contain;
  }
  .foyer-home {
    grid-template:"mast mast" auto "cover desk" minmax(196px,1fr) "footer footer" auto / minmax(0,1.15fr) minmax(0,1fr);
    overflow-y:auto;
  }
  .foyer-mast { grid-area:mast; padding:2px 10px; flex-wrap:nowrap; }
  .foyer-home .foyer-mast nav button, .foyer-ranking .foyer-mast nav button { min-height:38px; font-size:12px; }
  .foyer-home .cover-story { grid-area:cover; }
  .foyer-home .cover-copy { width:100%; padding:10px clamp(12px,2.2vw,24px); }
  .foyer-home .cover-copy h1 { font-size:clamp(30px,5.7vw,58px); }
  .foyer-home .cover-subtitle { font-size:clamp(16px,2.4vw,25px); }
  .foyer-home .cover-note { font-size:12px; }
  .foyer-home .resume-run { min-height:37px; line-height:1.3; }
  .foyer-home .cover-folio { display:none; }
  .foyer-home .mission-desk { grid-area:desk; display:flex; flex-direction:column; justify-content:center; padding:5px 9px; border-inline-start:1px solid #867654; }
  .foyer-home .desk-title { align-items:center; gap:4px; margin-bottom:5px; }
  .foyer-home .desk-title h2 { font-size:clamp(15px,2vw,22px); }
  .foyer-home .lesson-entry { min-height:36px; font-size:12px; padding:3px 6px; }
  .foyer-home .mission-row { grid-template-columns:minmax(0,1fr); gap:4px; }
  .foyer-home .mission { min-height:45px; padding:5px 8px; gap:8px; }
  .foyer-home .mission-number { align-self:center; }
  .foyer-home .mission-body { gap:2px; }
  .foyer-home .mission strong { font-size:clamp(15px,2vw,21px); }
  .foyer-home .mission small { font-size:11px; }
  .foyer-home .foyer-footer { grid-area:footer; }
  .ledger { padding:9px clamp(12px,3vw,38px) 16px; }
  .ledger h1 { font-size:clamp(25px,4.2vw,38px); }
  .ledger-tools { margin:10px 0; }

  .language-screen { align-items:safe center; padding:max(6px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .language-panel { width:min(100%,540px); max-width:none; padding:9px 16px; }
  .language-panel h1 { font-size:26px; }
  .language-panel label, .language-enter { min-height:40px; }
  .language-panel .gate-sound { min-height:34px; }
  .language-panel .language-help br { display:none; }
  .language-panel .language-help span::before { content:" · "; }

  .modal-backdrop, .modal-backdrop:has(.meter-dialog) {
    padding:max(4px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  }
  .modal-backdrop { top:var(--dialog-visible-top,0px); bottom:auto; height:var(--dialog-visible-height,100dvh); }
  .modal:has(.dialog-heading) {
    display:flex; flex-direction:column; width:min(640px,100%); max-width:100%; max-height:100%; padding:0; overflow:hidden;
  }
  .modal.wide:has(.dialog-heading), .modal:has(.draft-grid) { width:100%; }
  .modal:has(.meter-dialog) { width:clamp(240px,40vw,355px); }
  .dialog-heading {
    display:grid; flex:none; grid-template-columns:minmax(0,1fr) 42px; align-content:center; align-items:center;
    gap:0 7px; min-height:42px; padding:2px 3px 2px 12px; border-bottom:1px solid #566758; background:#18251f;
  }
  .dialog-heading .eyebrow { grid-column:1; padding:0; margin:0; line-height:1.2; font-size:9px; }
  .dialog-heading h2 { grid-column:1; padding:0; margin:0; font-size:clamp(16px,2vw,21px); line-height:1.24; }
  .dialog-heading .modal-close { position:static; float:none; grid-column:2; grid-row:1 / span 2; margin:0; width:42px; height:40px; }
  .dialog-reading {
    display:block; flex:1 1 auto; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain;
    padding:10px 12px; overflow-wrap:break-word; scrollbar-width:thin; scroll-padding:6px;
  }
  .dialog-reading > :first-child, .dialog-reading :is(.settings-language,.mode-note,.modal-intro):first-child { margin-top:0; }
  .dialog-reading :is(.form-actions,.mode-options,.items-list,.guide-grid,.codex-controls,.preview-controls,.codex-item>div) { min-width:0; }
  .dialog-reading :is(select,input:not([type=range]),textarea) { font-size:16px; max-width:100%; min-width:0; }
  .dialog-reading :is(.action-button,.primary-button,.modal-tab,.text-button) {
    min-height:36px; max-width:100%; height:auto; white-space:normal; font-size:13px; line-height:1.3;
  }
  .dialog-reading .primary-button, .dialog-reading .form-actions button { min-height:40px; }
  .dialog-reading .form-actions { margin-block:6px; }
  .modal .modal-intro, .modal .mode-note { font-size:13px; line-height:1.45; margin:4px 0 8px; }
  .guide-grid { gap:10px 14px; }
  .guide-step { padding-top:6px; }
  .guide-step h3 { font-size:14px; }
  .guide-step p { font-size:12px; line-height:1.5; }
  .modal .mode-option { padding:8px 11px; }
  .modal .mode-option h3 { margin-block:3px; }
  .modal .mode-option .form-actions { margin-top:6px; }
  .modal :is(.expedition-name,.mode-note) { margin-block:6px; }
  .settings-sheet { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; column-gap:12px; }
  .settings-sheet .settings-language { grid-area:auto / 1 / auto / -1; min-height:38px; margin:0; }
  .settings-block { margin-top:5px; padding-top:5px; }
  .settings-sheet :is(.setting-switch,.sample-sound) { min-height:38px; }
  .settings-sheet .beta-settings-link { grid-column:2; align-self:end; }

  .dialog-reading .modal-tabs { margin-bottom:7px; gap:4px; }
  .dialog-reading .modal-tab { padding:5px 8px; font-size:12px; }
  .dialog-reading .codex-controls { display:grid; grid-template-columns:minmax(100px,1.5fr) repeat(2,minmax(74px,1fr)) auto; align-items:end; gap:5px; margin:7px 0; }
  .dialog-reading .codex-controls > :is(label,button), .dialog-reading .codex-controls label:first-child { grid-column:auto; min-width:0; }
  .dialog-reading .codex-controls input, .dialog-reading .codex-controls select { padding:4px 6px; min-height:38px; }
  .codex-facet-toggle { display:inline-flex; gap:6px; align-items:center; min-height:34px; padding-inline:7px; border:1px solid #586751; font-size:12px; }
  .codex-facet-toggle::after { content:"▾"; }
  .codex-facet-toggle[aria-expanded=true]::after { content:"▴"; }
  .codex-facet-toggle[aria-expanded=false] { float:inline-end; }
  .codex-facet-toggle[aria-expanded=false] + .codex-filters { display:none; }
  .dialog-reading .codex-filters { margin-top:3px; gap:4px; padding:5px 7px; }
  .dialog-reading .codex-filters > div { grid-template-columns:58px minmax(0,1fr); }
  .dialog-reading .codex-chip { font-size:12px; min-height:33px; }
  .dialog-reading .codex-result-count { padding-top:6px; }
  .dialog-reading .codex-group { margin:8px 0 14px; }
  .dialog-reading .codex-group > h3 { margin:0 0 6px; }
  .dialog-reading .collection-grid { grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); gap:6px; }
  .dialog-reading .collection-card { min-height:0; }
  .dialog-reading .collection-art { height:clamp(65px,24dvh,124px); }
  .dialog-reading .collection-body { padding:6px; }
  .dialog-reading .codex-lock { top:40px; }
  .dialog-reading .codex-stats { flex-wrap:wrap; gap:2px 6px; line-height:1.3; }
  .dialog-reading .inspect-modal-body .inspector { display:grid; grid-template-columns:minmax(95px,27%) minmax(0,1fr); align-items:start; max-width:none; }
  .dialog-reading .inspect-modal-body .inspector-art { position:sticky; top:0; height:auto; aspect-ratio:3 / 4; max-height:52dvh; }
  .dialog-reading .inspect-modal-body .inspector-body { padding:5px 8px; }
  .dialog-reading .inspect-modal-body .stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .dialog-reading .inspect-modal-body .stat { min-width:0; }
  .dialog-reading .inspect-modal-body .stat small { overflow-wrap:anywhere; }
  .dialog-reading :is(.report-row,.cast-row) > div { min-width:0; }
  .dialog-reading .target-portraits { flex-wrap:wrap; }
  .dialog-reading .items-list { grid-template-columns:repeat(auto-fit,minmax(min(205px,100%),1fr)); }
  .dialog-reading .hud-traits .trait-row, .dialog-reading .hud-standings .player-row { min-height:38px; }

  .modal .draft-card { min-height:70px; }
  .dialog-reading .draft-card .draft-unit { font-size:13px; }
  .dialog-reading .draft-card .identity-label, .dialog-reading .draft-card .draft-item { font-size:11px; }
  .modal .practice-columns { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); margin:0; align-items:center; }
  .modal .practice-field { height:clamp(130px,52dvh,270px); }
  .modal .practice-buttons button, #practice-controls .training-offer { min-height:38px; }
  .modal .practice-room p { font-size:13px; }
  .modal:has(.preview-arena) { gap:3px 6px; padding:5px 7px; }
  .modal:has(.preview-arena) > .preview-description { font-size:12px; line-height:1.36; }
  .modal:has(.preview-arena) .preview-controls button { min-height:32px; height:auto; }
  .modal .preview-caption { font-size:12px; }
  .dialog-reading:has(> .score-picture) {
    display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center; align-content:start; gap:5px 12px;
  }
  .dialog-reading .score-picture { grid-column:1; grid-row:1 / span 3; width:auto; max-width:100%; max-height:calc(100dvh - 80px); margin:0 auto; }
  .dialog-reading:has(> .score-picture) > :not(.score-picture) { grid-column:2; }
  .dialog-reading:has(> .score-picture) :is(.form-actions,.challenge-from-score) { margin:0; }
  .dialog-reading:has(> .score-picture) .form-actions button { flex:1 1 40%; }

  .result-banner { justify-content:flex-start; flex-wrap:nowrap; overflow-y:auto; padding:5px; }
  .result-banner > * { flex:none; }
  .result-banner > :first-child { margin-top:auto; }
  .result-banner > :last-child { margin-bottom:auto; }
  .result-banner :is(.primary-button,.action-button) { min-height:34px; height:auto; padding:5px 7px; font-size:12px; white-space:normal; }
}
@media (orientation:landscape) and (max-height:330px) {
  .foyer-home .cover-kicker, .foyer-home .foyer-footer { display:none; }
  .dialog-reading { padding-block:6px; }
}

html,body,#app { margin:0; height:100%; overflow:clip; overscroll-behavior:none; }
.page-reader,.page-window { min-width:0; min-height:0; overflow:clip; }
.page-window { flex:1 1 auto; width:100%; }
.page-flow { width:100%; min-width:0; min-height:0; overflow:visible; overflow-wrap:anywhere; }
.page-flow.column-pages { display:block; column-count:1; column-gap:16px; column-fill:auto; }
.page-flow.column-pages :is(.collection-card,.draft-card,.meter-row,.ledger-row,.player-row,.trait-row,.recipe-ingredient,.stat,.report-row,.cast-row,.mode-option,.setting-volume,.action-button,.primary-button),
.page-flow.column-pages :is(h3,h4,summary,label,button) { break-inside:avoid; }
.page-flow.column-pages :is(.codex-item,.guide-grid > *, .report-unit,.skill-line,.stat-grid,.form-actions) { break-inside:avoid; }
.page-turns { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:12px; min-height:34px; border-top:1px solid #425348; background:#14211b; }
.page-turns[hidden] { display:none!important; }
.page-turns button { min-width:46px; height:32px; border:1px solid #566557; color:#e6dab2; font:600 24px/1 Georgia,serif; touch-action:manipulation; }
.page-turns button:disabled { opacity:.27; }
.page-turns span { min-width:4em; text-align:center; color:#cbceb9; font:600 12px/1 var(--body); font-variant-numeric:tabular-nums; }
.forge-picker { position:fixed; z-index:250; inset:var(--dialog-visible-top,0px) 0 auto; height:var(--dialog-visible-height,100dvh); display:grid; place-items:center; padding:6px; background:#07100be6; }
.forge-picker section { width:min(610px,100%); height:min(435px,100%); min-height:0; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:6px; padding:8px; border:1px solid #76866e; background:#17251e; color:#ece5ce; }
.forge-picker header { display:flex; justify-content:space-between; align-items:center; gap:5px; }
.forge-picker h3 { margin:0; font:600 20px/1.25 var(--serif); }
.forge-picker .pick-close { min-width:38px; height:36px; font-size:22px; border:1px solid #526351; }
.forge-picker input { width:100%; min-width:0; padding:6px 9px; font:16px var(--body); color:#eee8d7; background:#101a17; border:1px solid #63725e; }
.forge-picker .pick-options { display:grid; min-height:0; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); align-content:start; grid-auto-rows:39px; gap:2px; }
.pick-options button { min-width:0; display:flex; align-items:center; gap:6px; padding:2px 6px; border:1px solid #445347; text-align:left; font:600 13px/1.2 var(--body); }
.pick-options button[aria-pressed="true"] { border-color:#c7bd82; background:#344034; }
.pick-options img { width:29px; height:29px; object-fit:contain; }
.modal.page-reader { display:flex; flex-direction:column; padding:0; max-height:calc(100dvh - 30px); overflow:clip; }
.modal.page-reader > .dialog-heading { display:block; flex:none; position:relative; padding:15px 62px 9px 22px; }
.modal.page-reader > .dialog-heading:has(> .unit-orders) { display:grid; }
.modal.page-reader > .dialog-heading h2 { margin:0; }
.modal > .demo-reading { grid-area:description; display:flex; flex-direction:column; min-height:0; }
.demo-reading p.preview-description { margin:0; }
.demo-reading .page-turns { min-height:28px; }
.demo-reading .page-turns button { height:26px; }
.codex-stars { grid-column:1/-1; display:flex; align-items:center; gap:5px; margin-top:5px; }
.codex-stars button { min-width:42px; min-height:32px; padding:2px 6px; border:1px solid #586855; }
.codex-stars button[aria-pressed="true"] { background:#373c29; border-color:#c4b880; color:#f1d88c; }
.codex-stars > span { padding-inline:4px; color:#c7cbb9; font:600 12px/1.3 var(--body); }
.modal.page-reader > .dialog-heading .modal-close { position:absolute; top:8px; right:10px; margin:0; }
.modal.page-reader > .page-window { width:calc(100% - 40px); margin:0 20px 12px; }
.modal.page-reader .dialog-reading { display:block; min-height:0; padding:0; overflow:visible; }
.page-flow :is(.standings,.inventory,.cast-history ol,.meter-rows) { max-height:none!important; overflow:visible!important; }
.layout .right-sidebar { overflow:clip; }
.right-sidebar[data-view="match"] .rail-match.page-reader,
.right-sidebar[data-view="profile"] .rail-profile.page-reader,
.right-sidebar[data-view="stats"] .rail-stats.page-reader { flex:1 1 0; display:flex; flex-direction:column; min-height:0; overflow:clip; }
.rail-match .panel-reading > * { margin:0 0 var(--rail-gap,9px); }
.right-sidebar .page-turns { margin:0; }
.page-flow .inspector-art { position:relative; }
.foyer,.foyer-home { overflow:clip; }
.foyer-ranking { display:flex; flex-direction:column; min-height:0; }
.foyer-ranking .foyer-mast { flex:none; }
.foyer-ranking .ledger { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; height:auto; }
.ledger .page-turns { order:3; }
.ledger .ledger-tools { order:-1; }
.result-banner.page-reader { justify-content:center; align-items:stretch; overflow:clip; }
.result-banner .panel-reading { text-align:center; }
.result-banner .panel-reading > :is(p,.result-loot,.result-seal) { margin-inline:auto; }
.result-banner.page-reader .result-actions,.result-banner.page-reader .component-choice { flex:none; margin:3px 0; align-self:center; }
.result-banner .page-window { flex:0 1 auto; }
@media (orientation:landscape) and (max-height:630px) {
  .modal.page-reader { max-height:100%; }
  .modal.page-reader > .dialog-heading { display:block; padding:4px 50px 5px 12px; }
  .modal.page-reader > .dialog-heading .modal-close { top:1px; right:3px; }
  .modal.page-reader > .page-window { width:calc(100% - 20px); margin:6px 10px; }
  .page-turns { min-height:32px; }
  .page-turns button { height:30px; }
  .dialog-reading.column-pages .inspect-modal-body .inspector { display:block; }
  .dialog-reading.column-pages .inspect-modal-body .inspector-art { float:inline-start; max-width:30%; width:145px; margin:0 8px 4px 0; }
  .dialog-reading .collection-card .collection-art { height:clamp(55px,18dvh,95px); }
  .modal:has(.preview-arena) { overflow:clip; }
  .modal:has(.preview-arena) > .preview-description { overflow:visible; }
  .foyer-home { overflow:clip; }
  .dock-offers .shop-grid { grid-template-rows:repeat(5,minmax(0,1fr)); overflow:clip; }
  .phone-portrait .rotate-notice { overflow:clip; }
}

.skill-readings { margin:8px 0; border-inline-start:2px solid #9eb58a; padding:4px 8px; background:#233029; font-size:0.93em; line-height:1.45; overflow-wrap:anywhere; }
.skill-readings > strong { display:block; margin-bottom:3px; color:#dce6cc; }
.skill-readings > div + div { margin-top:3px; }
.demo-reading .preview-description { margin:0; }
.demo-reading .skill-readings { margin-bottom:0; }
@media (orientation:landscape) and (max-height:600px) {
  .dialog-reading.column-pages .inspect-modal-body .preview-skill-button { display:inline-flex; width:auto; min-width:110px; min-height:34px; margin:3px 0; }
  .dialog-reading.column-pages .inspect-modal-body .skill-readings { margin-block:4px; }
  .dialog-reading.column-pages .inspect-modal-body .skill-readings > div { line-height:1.32; }
}
.skill-readings .rank-progression { margin-top:5px; padding-top:4px; border-top:1px solid #435447; }
.rank-progression small { display:block; color:#e1c88d; font-weight:600; }

/* Keep the board geometry steady when a unit is picked. */
.arena-column > .bench-heading { min-height:38px; }
#unit-orders[hidden] { display:none; }
#unit-orders { flex:1 1 auto; min-width:0; }
.bench-heading:has(#unit-orders:not([hidden])) :is(.range-legend,.bench-hint) { display:none; }
.bench-heading .bench-label { font:inherit; color:inherit; }
.unit-orders { display:flex; align-items:center; gap:5px; min-width:0; font:600 13px/1.15 var(--body); }
.unit-order-name { flex:1 1 4ch; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e4dbc2; }
.unit-order-gear { display:inline-flex; align-items:center; gap:2px; }
.unit-order-load { color:#c0d0bf; font-size:11px; font-variant-numeric:tabular-nums; }
.unit-order-relic { display:block; width:24px; height:24px; }
.unit-order-relic img { display:block; width:100%; height:100%; object-fit:contain; }
.unit-orders button { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:34px; padding:0 8px; border:1px solid #70876e; background:#243629; color:#eef2e4; font:inherit; white-space:nowrap; }
.unit-orders button:enabled:hover, .unit-orders button:enabled:focus-visible { border-color:#c5d8b1; background:#324936; }
.unit-orders button:disabled { opacity:.65; }
.unit-orders .unit-order-sell { border-color:#927f59; background:#312c20; }
.unit-order-sell>b,.unit-order-seals { display:inline-flex; align-items:center; gap:2px; font-variant-numeric:tabular-nums; }
.unit-order-sell>b { color:#f6d391; }
.unit-order-seals { color:#bcdac3; }
.unit-orders .unit-order-clear { width:34px; padding:0; }
.dialog-heading:has(> .unit-orders) { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.dialog-heading:has(> .unit-orders) .modal-close { grid-column:2; grid-row:1 / span 2; justify-self:end; }
.dialog-heading:has(> .unit-orders) :is(h2,.eyebrow) { grid-column:1; }
.dialog-heading > .unit-orders { grid-column:1 / -1; margin-top:5px; padding:5px 0; border-top:1px solid #50614e; }
.modal:has(.dialog-heading > .unit-orders) .inspect-modal-body :is(.remove-equipment,.sell-btn) { display:none; }
.opponent-gear { min-width:0; padding:7px; border-bottom:1px solid #655046; color:#e3ddd0; background:#201e19; }
.opponent-gear-label { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 7px; font:600 13px/1.25 var(--body); }
.opponent-gear-label small { color:#efb99b; }
.opponent-gear-label b { margin-left:auto; color:#d6cabc; font-size:12px; }
.opponent-gear-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(126px,100%),1fr)); gap:4px; margin-top:4px; }
.opponent-gear-list button { display:flex; align-items:center; min-height:34px; min-width:0; gap:4px; padding:2px 5px; text-align:left; border:1px solid #61574b; background:#19231d; }
.opponent-gear-list button:is(:hover,:focus-visible) { background:#344033; border-color:#bbbc92; }
.opponent-gear-list img { flex:none; width:25px; height:25px; object-fit:contain; }
.opponent-gear-list .relic-name,.opponent-gear-list > span { min-width:0; white-space:normal; overflow-wrap:anywhere; font:600 12px/1.15 var(--body); }
.opponent-gear-list > span { align-self:center; color:#c6c9bb; }
.opponent-gear.compact { display:flex; align-items:center; gap:6px; height:34px; padding:0; background:transparent; border:0; }
.opponent-gear.compact .opponent-gear-label { display:block; flex:0 1 auto; min-width:0; }
.opponent-gear.compact .opponent-gear-label strong { display:none; }
.opponent-gear.compact .opponent-gear-label b { margin-left:4px; }
.opponent-gear.compact .opponent-gear-list { flex:1; display:flex; align-items:center; min-width:0; margin:0; }
.opponent-gear.compact .opponent-gear-list button { min-width:0; min-height:30px; }
.opponent-gear.compact .opponent-gear-list img { width:23px; height:23px; }
.opponent-inspector .unit-items { display:none; }
.dialog-heading > .opponent-gear { grid-column:1/-1; margin-top:4px; }
@media (orientation:landscape) and (max-width:780px) {
  .opponent-gear.compact .opponent-gear-list button { padding:2px; }
  .opponent-gear.compact .relic-name { display:none; }
  .dialog-heading .opponent-gear { padding:3px 5px; }
  .dialog-heading .opponent-gear-list { grid-template-columns:repeat(auto-fit,minmax(min(100px,100%),1fr)); }
}
@media (orientation:landscape) and (max-height:630px) and (max-width:1100px) {
  .arena-column > .bench-heading { gap:4px; min-height:38px; }
  .unit-orders { gap:4px; font-size:12px; }
  .bench-heading:has(#unit-orders:not([hidden])) .meter-opener { width:34px; min-height:34px; justify-content:center; }
  .bench-heading:has(#unit-orders:not([hidden])) .meter-opener span { display:none; }
  .dialog-heading > .unit-orders { padding-inline:0; margin-top:1px; }
}
@media (max-width:730px) and (orientation:landscape) {
  .bench-heading:has(#unit-orders:not([hidden])) .bench-label { display:none; }
  #unit-orders .unit-order-relic { width:21px; height:21px; }
}
@media (max-width:630px) and (orientation:landscape) {
  .bench-heading:has(#unit-orders:not([hidden])) .section-title { display:none; }
  .bench-heading .unit-orders { gap:3px; }
  .bench-heading .unit-orders button { padding-inline:5px; }
}
@media (max-width:560px) and (orientation:landscape) {
  #unit-orders .unit-order-name { display:none; }
  #unit-orders .unit-order-relic { width:17px; height:17px; }
}


.lineage-icon{position:relative;display:inline-flex;flex:none;vertical-align:middle}
.lineage-icon>.icon-relics{width:100%;height:100%}
.lineage-marks{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;pointer-events:none}
.lineage-marks img{width:35%;height:auto;aspect-ratio:1;box-sizing:border-box;border:1px solid #bb9b5d;border-radius:30%;background:#191b17}

.spell-tier{display:flex;align-items:baseline;gap:6px}
.spell-tier>b,.body-rank>b{color:#d7b979;min-width:2.6em}
.spell-tier.current{color:#ffecba;font-weight:600}

.lineage-effect{border-inline-start:2px solid #617457;margin:.35em 0;padding-inline-start:.55em}
.lineage-effect.signature{border-color:#a48a55}
.lineage-effect p{margin:.1em 0}
#relic-hint .lineage-effect{font-size:.94em}

/* 0.11.6: reward cards reuse the existing authored portraits and relic icons. */
.mode-option.comeback-mode {grid-column:1 / -1;}
.relief-prompt {display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:8px 0;padding:8px;border:1px solid var(--gold,#bfa873);}
.relief-sheet {display:grid;gap:18px;min-width:0;}
.relief-group {min-width:0;}
.relief-group > h3 {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:6px 0 10px;color:var(--rarity);font-size:16px;}
.relief-group > h3 small {font-size:12px;font-weight:400;color:var(--muted,#adb5ad);}
.relief-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;align-items:stretch;}
.relief-card {display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px;border:1px solid var(--rarity);background:rgba(13,25,23,.94);color:var(--text,#ddd9c9);text-align:left;cursor:pointer;overflow:hidden;}
.relief-card:hover,.relief-card:focus-visible {outline:2px solid var(--rarity);outline-offset:1px;background:#26352d;}
.relief-art {display:block;height:108px;width:100%;background-image:var(--portrait);background-size:cover;background-position:center 35%;}
.relief-unit {display:flex;flex-wrap:wrap;gap:3px;color:var(--rarity);font-weight:700;font-size:15px;line-height:1.2;}
.relief-unit small {color:#e8c273;}
.relief-card .shop-identities {display:flex;flex-wrap:wrap;gap:3px 6px;margin:0;}
.relief-card .identity-label {font-size:11px;line-height:1.2;white-space:normal;}
.relief-card .identity-symbol svg {width:15px;height:15px;}
.relief-item {display:flex;align-items:center;gap:5px;margin-top:auto;font-size:13px;line-height:1.25;min-width:0;}
.relief-item img {flex:none;}
.relief-item > span {min-width:0;overflow-wrap:anywhere;}
.relief-stats {font-size:11px;color:var(--muted,#adb5ad);line-height:1.3;}
.relief-pick {display:block;border-top:1px solid #59634c;padding-top:5px;font-size:12px;text-align:center;color:#ebd59a;}
.relief-note {font-size:13px;line-height:1.45;}
.relief-claimed {padding:12px;background:#22382e;}
.result-banner .result-income,.result-banner .result-streak {font-size:12px;line-height:1.35;margin:2px 0;}
.order-caption {white-space:normal;}
@media(max-width:800px){.relief-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.relief-art{height:78px;}}
@media(max-width:480px){.relief-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.relief-art{height:90px;}}
.relief-card .shop-identity .identity-symbol {width:26px;height:26px;flex:none;}
.relief-card .shop-identity {gap:3px;max-width:76px;}
@media (max-height:500px) and (orientation:landscape){
  .relief-card {gap:4px;padding:6px;}
  .relief-art {height:72px;}
  .relief-unit {font-size:13px;}
  .relief-card .shop-identity .identity-symbol {width:21px;height:21px;}
  .relief-card .identity-label {font-size:10px;}
}

/* 0.11.9: Nine visible inventory slots; only the remover utility has a stack count. */
.item-tray .inventory,.right-sidebar .item-tray .inventory,.modal .item-tray .inventory {display:grid;grid-template-columns:repeat(3,minmax(0,42px));gap:6px;max-height:none;overflow:visible;min-height:132px;align-content:start;}
.item-tray .item-btn,.right-sidebar .item-tray .item-btn {position:relative;width:42px!important;height:42px!important;min-width:42px;}
.item-tray .relic-empty-slot{width:42px;height:42px;box-sizing:border-box;border:1px dashed #52695099;background:#14261c6e;border-radius:2px;}
.relic-stack-count{position:absolute;right:0;bottom:0;min-width:16px;padding:1px 3px;border:1px solid #d2bd8b;background:#111b16;color:#f5d499;font:700 12px var(--condensed);line-height:1.05;text-align:center;pointer-events:none;}
.item-btn.removal-seal{border:1px solid #d4b16c!important;}
.inventory-waiting{font-size:10px;line-height:1.5;color:#f0c782;margin:4px 0 8px;}
.combat-overview .overview-inventory button:not(.overview-label){position:relative;}
@media(max-width:700px){.item-tray .inventory,.right-sidebar .item-tray .inventory{grid-template-columns:repeat(3,minmax(0,38px));gap:5px;min-height:121px}.item-tray .item-btn,.right-sidebar .item-tray .item-btn,.item-tray .relic-empty-slot{width:38px!important;height:38px!important;min-width:38px;}}