@charset "UTF-8";
:root{color-scheme:dark;--ink:#090b0e;--panel:#121416;--paper:#e8e0d1;--muted:#aaa59b;--line:#ffffff1c;--accent:#883d40;--accent-soft:#a96565;--gold:#c3ac83;--good:#b6c3a9;--serif:Georgia,'Times New Roman',serif;--sans:'Segoe UI',Tahoma,sans-serif}
*{box-sizing:border-box}html{background:var(--ink);min-height:100%;scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.5 var(--sans);min-width:320px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{border:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h1{font-size:clamp(44px,7vw,94px);line-height:1.04;letter-spacing:-.05em}h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.035em}h3{font-size:24px}small{font-size:12px}button svg,.icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.25em;font-weight:600;color:var(--gold)}.muted{color:var(--muted)}.seal{font:35px var(--serif);width:52px;height:58px;background:#693337;color:#e8d9c7;display:grid;place-items:center;transform:rotate(-3deg)}.boot{min-height:100vh;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center}.boot p{font:32px var(--serif)}.boot span{color:var(--muted)}.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:var(--paper);color:var(--ink);padding:12px}.skip-link:focus{top:12px}.topbar{height:84px;padding:0 6vw;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line);position:relative;z-index:5;background:#090b0ed9}.brand{display:flex;align-items:center;gap:11px;background:none;padding:0;text-align:left}.brand img{width:30px;height:36px;opacity:.85}.brand strong{font:20px var(--serif);letter-spacing:.055em}.brand small{display:block;letter-spacing:.2em;font-size:8px;color:var(--muted)}.topnav{display:flex;gap:24px;margin-left:auto}.topnav button{background:none;padding:10px 0;color:var(--muted);font-size:12px}.topnav button:hover,.topnav button.active{color:var(--paper)}.connection{display:none;align-items:center;gap:8px;font-size:10px;letter-spacing:.09em;color:var(--muted)}.connection i{width:5px;height:5px;border-radius:50%;background:var(--good)}.connection.offline i{background:#bf7670}.pill{font-size:9px;letter-spacing:.14em;padding:5px 9px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase;white-space:nowrap}.primary,.secondary,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 22px;font-size:13px;letter-spacing:.03em;transition:background .2s,border-color .2s}.primary{background:#71393d;border:1px solid #9a5555;color:#f3e6d9}.primary:hover{background:#87464b}.primary.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}.primary.light:hover{background:#fff4e0}.secondary{background:#17191be6;border:1px solid #ffffff28}.secondary:hover{background:#232527;border-color:#ffffff48}.text-button{background:none;color:var(--muted);padding:10px 0}.text-button:hover{color:var(--paper)}.small-button{min-height:40px;padding:8px 12px;font-size:11px}.button-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.home{position:relative;overflow:hidden;min-height:calc(100vh - 84px)}.home-backdrop{position:absolute;inset:0;pointer-events:none;opacity:.28;background-size:cover;background-position:75% 30%;filter:saturate(.5)}.home-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#090b0e 6%,#090b0ef0 30%,#090b0e25 85%),linear-gradient(0deg,#090b0e 3%,transparent 55%)}.home-content{position:relative;padding:48px 6vw 28px;max-width:1560px;margin:auto}.home-main{display:grid;gap:40px;align-items:center;min-height:600px}.intro{max-width:610px}.intro .eyebrow{margin-bottom:27px}.intro h1 em{font-style:italic;color:#b9ac98}.intro .lead{max-width:385px;margin:28px 0 30px;color:#b3b0a8;line-height:1.85;font-size:14px}.intro-meta{display:flex;gap:25px;margin:30px 0;font-size:10px;color:var(--muted)}.intro-meta span{display:flex;gap:8px;align-items:center}.intro-meta svg{width:14px;height:14px}.hero-art{position:relative;max-width:480px;width:100%;margin:0 auto;min-height:440px;display:flex;align-items:center;justify-content:center}.hero-card{width:235px;aspect-ratio:2/3;position:absolute;border:1px solid #b9a48465;border-radius:10px;background:#16191c;box-shadow:0 25px 60px #000a;overflow:hidden;transform:rotate(8deg) translateX(55px)}.hero-card.back{transform:rotate(-12deg) translate(-95px,-5px);filter:brightness(.62);width:210px}.hero-card img{height:100%;width:100%;object-fit:cover;object-position:50% 18%}.hero-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#090b0e 4%,transparent 65%)}.hero-card .hero-caption{position:absolute;z-index:1;left:23px;right:23px;bottom:24px;font:27px var(--serif);text-align:left}.hero-caption small{display:block;font:9px var(--sans);letter-spacing:.18em;margin-bottom:8px;text-transform:uppercase;color:var(--gold)}.hero-note{position:absolute;bottom:0;right:10%;font-size:10px;letter-spacing:.17em;color:var(--muted);text-transform:uppercase}.home-bottom{display:grid;border-top:1px solid var(--line);margin-top:18px}.entry{display:flex;text-align:left;padding:22px 0;align-items:center;gap:16px;background:none;border-bottom:1px solid var(--line)}.entry .entry-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold)}.entry strong{display:block;font:19px var(--serif)}.entry span p{font-size:11px;color:var(--muted);margin-top:4px}.entry>svg{margin-left:auto;color:var(--muted)}.footer{display:flex;justify-content:space-between;gap:20px;color:#8e8b84;font-size:10px;margin-top:26px;padding-bottom:6px}.footer span:last-child{text-align:right}.offline-message{padding:12px 16px;background:#612f3425;border:1px solid #a95c5c60;font-size:12px;display:flex;gap:16px;align-items:center;margin-bottom:24px}.offline-message button{margin-left:auto;white-space:nowrap}.page{max-width:1220px;margin:auto;padding:40px 6vw 60px}.page-head{margin:16px 0 34px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.page-head .eyebrow{margin-bottom:12px}.page-head p{color:var(--muted);font-size:14px;max-width:550px;margin-top:16px}.clan-choices{display:grid;grid-template-columns:1fr;gap:16px;margin:28px 0}.clan-choice{min-height:170px;padding:24px;background:linear-gradient(130deg,#ffffff04,#ffffff01);border:1px solid var(--line);text-align:left;position:relative}.clan-choice.selected{border-color:var(--gold);background:linear-gradient(130deg,#c3ac830b,#ffffff01)}.clan-choice img{width:42px;height:42px;margin-bottom:20px;opacity:.8}.clan-choice strong{font:25px var(--serif)}.clan-choice p{font-size:12px;color:var(--muted);margin-top:10px;max-width:320px}.clan-choice .check{position:absolute;right:20px;top:20px;color:var(--gold)}.form-grid{display:grid;gap:32px}.panel{border:1px solid var(--line);padding:28px;background:#111316c9}.panel h3{margin-bottom:12px}.panel p{font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:24px}.field-label{display:block;color:var(--muted);font-size:11px;letter-spacing:.1em;margin-bottom:8px}.input{background:#080a0c;border:1px solid #ffffff30;padding:13px 15px;color:var(--paper);width:100%;border-radius:0;font-size:16px}.join-form{display:flex;gap:10px;flex-wrap:wrap}.join-form .input{flex:1;min-width:160px}.rules-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}.rule-item{display:grid;grid-template-columns:36px 1fr;gap:22px;padding:24px;background:#101214}.rule-item>span{font:30px var(--serif);color:var(--gold)}.rule-item h3{font-size:22px;margin-bottom:8px}.rule-item p{font-size:14px;color:var(--muted);line-height:1.8}.story{display:grid;gap:28px;align-items:center;min-height:650px}.story-image{aspect-ratio:4/5;position:relative;overflow:hidden;max-height:600px;background:#131619}.story-image img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:saturate(.6)}.story-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#090b0e 0%,transparent 60%)}.story-text h1{font-size:clamp(40px,5vw,65px);margin:23px 0}.story-text>p{font-size:16px;color:var(--muted);line-height:1.9;margin-bottom:28px;max-width:470px}.story-progress{display:flex;gap:10px;margin:26px 0}.story-progress i{height:2px;width:35px;background:#ffffff25}.story-progress i.active{background:var(--gold)}.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.catalog-item{border:1px solid var(--line);background:#111317;padding:14px;min-width:0}.catalog-item .card{width:100%;height:auto;aspect-ratio:2/3}.catalog-item>p{font-size:12px;line-height:1.7;color:var(--muted);padding-top:15px;min-height:60px}.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}.filterbar button{background:none;border:1px solid var(--line);padding:9px 14px;min-height:42px;color:var(--muted);font-size:12px}.filterbar button.active{border-color:var(--gold);color:var(--paper)}
.game{max-width:1560px;margin:auto;padding:14px 3vw 32px}.game-toolbar{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:2px 0 14px}.game-toolbar .eyebrow{font-size:9px}.game-toolbar .button-row{gap:14px}.game-toolbar button{font-size:10px;min-height:35px;padding:5px 0}.game-layout{display:grid;gap:22px}.arena{position:relative;min-width:0}.arena-surface{position:absolute;inset:60px -10px 200px;background:radial-gradient(ellipse at 50% 40%,#5b4d4020,transparent 70%);pointer-events:none}.leader{display:flex;align-items:center;padding:12px 14px;gap:12px;border:1px solid var(--line);background:#15171a;position:relative;min-height:68px}.leader.enemy{background:#191517}.leader.potential{border-color:var(--gold);cursor:pointer}.leader.potential:hover{background:#3b3022}.leader>img{width:33px;height:33px;opacity:.75}.leader-name{font:20px var(--serif)}.leader-caption{font-size:9px;letter-spacing:.08em;color:var(--muted);display:block}.leader-health{margin-left:auto;display:flex;gap:7px;align-items:center;font:28px var(--serif);color:var(--paper)}.leader-health svg{color:#aa7372;width:17px}.resource{display:flex;align-items:center;gap:8px;border-left:1px solid var(--line);margin-left:4px;padding-left:14px;font:22px var(--serif)}.resource svg{color:var(--gold);width:17px}.resource small{font:11px var(--sans);color:var(--muted)}.enemy-hand{display:none;align-items:center;gap:3px;margin-left:8px}.enemy-hand i{height:26px;width:18px;background:#171b21;border:1px solid #b1a28650;border-radius:2px;transform:rotate(5deg)}.battlefield{padding:10px 0 0;position:relative}.board-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}.slot{height:113px;border:1px solid #ffffff13;background:#11141860;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;padding:0;border-radius:4px}.slot.empty{flex-direction:column;gap:5px;color:#7b7d7d;font-size:9px;letter-spacing:.13em;background:radial-gradient(ellipse,#ffffff03,transparent 80%)}.slot.empty span{opacity:.75}.slot.empty svg{width:17px;height:17px;opacity:.28}.slot.potential{border-color:#c3ac83;background:#c3ac8312;cursor:pointer}.slot.potential:after{content:'+';position:absolute;right:8px;top:5px;color:var(--gold);font-size:17px}.slot.potential:hover{background:#c3ac8328}.slot:focus-visible,.leader:focus-visible,.unit:focus-visible{outline:3px solid var(--paper);outline-offset:2px;z-index:3}.card:focus-visible{outline-offset:3px}.centerline{display:flex;align-items:center;justify-content:center;gap:14px;margin:15px 0;color:#9f9486;font-size:8px;letter-spacing:.2em;text-transform:uppercase}.centerline:before,.centerline:after{content:'';height:1px;background:linear-gradient(90deg,transparent,#8b786d60);flex:1}.centerline:after{transform:rotate(180deg)}.unit{height:100%;width:100%;position:relative;overflow:hidden;border:1px solid #ffffff22;border-radius:4px;padding:0;text-align:left;background:#14191d}.unit-art{position:absolute;inset:0;overflow:hidden}.unit-art img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.8}.unit:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#090b0e 1%,#090b0e00 75%)}.unit.selected{border-color:var(--gold)}.unit.potential{outline:2px solid var(--gold);outline-offset:2px}.unit.ready{border-color:#abb39970}.unit-top{position:absolute;top:5px;left:6px;right:6px;display:flex;gap:5px;justify-content:space-between;z-index:1}.unit-top .status-tag{font-size:8px;letter-spacing:.05em;background:#080b0dda;padding:2px 5px;border:1px solid #ffffff24}.unit-bottom{position:absolute;left:8px;right:8px;bottom:6px;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:5px}.unit-name{font-size:10px;font-family:var(--serif);line-height:1.15;max-width:80px;text-shadow:0 1px 2px #000}.unit-stats{display:flex;gap:6px;font:19px var(--serif);white-space:nowrap}.unit-stats b{font-weight:400}.unit-stats b:last-child{color:#ddb7b4}.unit-words{position:absolute;left:6px;top:23px;z-index:1;max-width:72%;font-size:7px;letter-spacing:.08em;color:var(--gold);background:#080b0dcc;border:1px solid #c3ac8340;padding:1px 4px;pointer-events:none}.unit-status{position:absolute;right:6px;top:34px;z-index:1;display:flex;gap:4px}.unit-status svg{width:12px;height:12px;filter:drop-shadow(0 1px 3px #000)}.action-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}.turn-copy{font:20px var(--serif)}.turn-copy small{font:10px var(--sans);color:var(--muted);display:block;margin-top:3px}.turn-copy.active:before{content:'';display:inline-block;width:5px;height:5px;background:var(--gold);border-radius:50%;vertical-align:middle;margin-right:9px}.action-strip .primary{min-width:130px;min-height:44px;font-size:11px}.hand-label{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);letter-spacing:.13em;text-transform:uppercase;margin:7px 0 9px}.hand{display:flex;align-items:flex-end;overflow-x:auto;gap:9px;padding:9px 8px 15px;scroll-padding:0 10px;scrollbar-width:thin;scrollbar-color:#524640 #111316;min-height:200px}.card{position:relative;display:block;padding:0;flex:0 0 124px;width:124px;height:184px;border:1px solid #b9a4844a;border-radius:6px;overflow:hidden;background:#11151a;text-align:left;color:var(--paper);transition:transform .2s,border-color .2s}.card:hover{transform:translateY(-4px);border-color:#c3ac83b0}.card.is-selected{border-color:var(--gold);transform:translateY(-4px)}.card.is-unplayable{filter:saturate(.6)}.card.is-unplayable .card-cost{color:#aaa299}.card.is-mulligan:after{content:'AUSTAUSCH';position:absolute;top:42%;left:0;right:0;text-align:center;background:#632d35eb;border-top:1px solid #c68482;border-bottom:1px solid #c68482;padding:8px 0;font-size:9px;letter-spacing:.1em;z-index:3}.card-image{position:absolute;inset:0;overflow:hidden}.card-image img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}.card-fade{position:absolute;inset:0;background:linear-gradient(0deg,#080b0e 1%,#080b0ee6 25%,#080b0e00 71%),linear-gradient(180deg,#080b0e90,transparent 22%)}.card-cost{position:absolute;top:8px;left:10px;font:25px var(--serif);text-shadow:0 2px 8px #000;z-index:1}.card-cost small{display:block;font:6px var(--sans);letter-spacing:.15em;margin-top:-3px}.card-clan{position:absolute;right:9px;top:10px;width:15px;height:19px;z-index:1;opacity:.9}.card-caption{position:absolute;left:10px;right:10px;bottom:9px}.card-type{font-size:6px;text-transform:uppercase;letter-spacing:.13em;color:var(--gold);display:block;margin-bottom:4px}.card-name{font:15px/1.1 var(--serif);display:block;margin-bottom:7px}.card-bottom{border-top:1px solid #ffffff20;padding-top:5px;display:flex;align-items:center;justify-content:space-between}.card-bottom .card-keyword{font-size:6px;letter-spacing:.1em;color:var(--muted);max-width:55px}.card-numbers{display:flex;gap:8px;font:17px var(--serif)}.card-numbers b{font-weight:400}.card-numbers b:last-child{color:#d7b9b3}.card-rules{display:none}.selection-panel{border:1px solid var(--line);background:linear-gradient(135deg,#191a1d,#0e1113);padding:20px;align-self:start;min-width:0}.selection-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.selection-head button{background:none;color:var(--muted);padding:0;min-width:30px;min-height:30px}.selected-card{width:100%;max-width:260px;height:auto;aspect-ratio:2/3;margin:0 auto 20px;pointer-events:none}.selected-card .card-cost{font-size:38px;left:18px;top:16px}.selected-card .card-cost small{font-size:8px}.selected-card .card-clan{width:25px;height:26px;right:18px;top:18px}.selected-card .card-caption{left:18px;right:18px;bottom:18px}.selected-card .card-name{font-size:27px}.selected-card .card-type{font-size:8px}.selected-card .card-bottom{margin-top:10px;padding-top:8px}.selected-card .card-keyword{font-size:8px;max-width:100px}.selected-card .card-numbers{font-size:27px}.selected-card .card-fade{background:linear-gradient(0deg,#080b0e 1%,#080b0ef7 31%,#080b0e00 70%),linear-gradient(180deg,#080b0e80,transparent 22%)}.selected-card .card-rules{display:block;font-size:11px;line-height:1.5;color:#ccc6ba;margin-top:10px}.selection-panel>h3{font-size:22px;margin:14px 0 10px}.selection-panel>p{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:16px}.selection-panel .primary{width:100%;font-size:12px}.selection-prompt{border-left:2px solid var(--accent-soft);padding:10px 0 10px 12px;font-size:12px;line-height:1.7;color:#d4c4b0;margin:18px 0;background:linear-gradient(90deg,#883d4015,transparent)}.action-tabs{display:flex;gap:6px;margin-bottom:12px}.action-tabs button{flex:1;background:#ffffff05;border:1px solid var(--line);font-size:11px;padding:9px 4px;min-height:40px}.action-tabs button.active{border-color:var(--gold);color:var(--gold)}.aside-divider{border:0;border-top:1px solid var(--line);margin:22px 0}.tiny-guide{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:18px}.tiny-guide li{display:flex;gap:12px;align-items:flex-start;font-size:11px;color:var(--muted);line-height:1.7}.tiny-guide svg{width:16px;height:16px;color:var(--gold);margin-top:3px}.tiny-guide strong{display:block;color:var(--paper);font-weight:500}.battle-log{font-size:10px;color:var(--muted);list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}.battle-log li{padding-left:11px;border-left:1px solid #685648}.legal-list{margin-top:18px}.legal-list summary{cursor:pointer;font-size:10px;color:var(--muted);padding:10px 0}.legal-list button{display:block;text-align:left;width:100%;font-size:10px;line-height:1.55;padding:9px;background:#ffffff03;border-bottom:1px solid var(--line);color:#d1c5b3}.legal-list button:hover{background:#ffffff0d}.empty-selection{display:grid;place-items:center;min-height:135px;color:var(--gold)}.empty-selection img{width:60px;opacity:.55}.lobby{max-width:670px;margin:50px auto;text-align:center;padding:35px 24px}.lobby>img{width:68px;height:68px;margin:0 auto 25px;opacity:.8}.lobby h2{margin:16px 0}.lobby>p{color:var(--muted);font-size:14px;line-height:1.9}.room-code{display:block;font:24px/1.4 var(--sans);letter-spacing:.12em;padding:24px 10px;margin:27px 0 16px;border:1px solid var(--line);word-break:break-all;color:var(--gold);user-select:all}.waiting-line{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:12px;margin:28px 0}.waiting-line i{width:5px;height:5px;border-radius:50%;background:var(--accent-soft);animation:breathe 2s infinite}.reconnect-bar{border:1px solid #ac64645c;background:#532f332f;padding:13px 15px;display:flex;align-items:center;gap:15px;font-size:12px;margin-bottom:15px}.reconnect-bar p{flex:1}.reconnect-bar button{white-space:nowrap}.finished-banner{position:relative;padding:32px 25px;border:1px solid #ac95734f;background:linear-gradient(100deg,#29231f,#14171b);margin-bottom:20px}.finished-banner h2{margin:10px 0}.finished-banner p{font-size:13px;color:var(--muted);margin-bottom:20px}.notice{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);z-index:99;max-width:min(560px,calc(100% - 32px));padding:14px 22px;background:#ede3d2;color:#1b1713;border:1px solid #cfb892;font-size:13px;box-shadow:0 8px 40px #0008;opacity:0;pointer-events:none;transition:.25s}.notice.visible{opacity:1;transform:translate(-50%,0)}dialog{background:#131619;color:var(--paper);border:1px solid #b49d795e;padding:32px;max-width:min(520px,calc(100% - 30px));box-shadow:0 30px 100px #000b}dialog::backdrop{background:#030406ce;backdrop-filter:blur(4px)}dialog h2{font-size:30px;margin-bottom:17px}dialog p{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:24px}dialog .button-row{justify-content:flex-end}.busy:after{content:'';display:inline-block;width:12px;height:12px;border:1px solid #ffffff4a;border-top-color:var(--paper);border-radius:50%;animation:spin .8s linear infinite;margin-left:8px}.file-notice{margin:30px;max-width:700px;padding:30px;border:1px solid var(--line)}.file-notice p{color:var(--muted);margin:15px 0}.file-notice code{font-size:13px}.loading-shimmer{background:#111418;padding:24px;color:var(--muted)}
@keyframes breathe{50%{opacity:.35}}@keyframes spin{to{transform:rotate(360deg)}}
.cropped-illustration{position:absolute;inset:0;width:100%;height:100%;display:block;fill:none;stroke:none}.card-image>.cropped-illustration{height:80%}.unit-art>.cropped-illustration{opacity:.86}.story-image>.card-image>.cropped-illustration{height:100%}.hero-card>.card-image>.cropped-illustration{height:86%}
@media(min-width:600px){.clan-choices{grid-template-columns:1fr 1fr}.catalog{grid-template-columns:repeat(3,minmax(0,1fr))}.board-row{gap:12px;margin-bottom:12px}.slot{height:127px}.unit-name{font-size:13px;max-width:135px}.unit-stats{font-size:23px;gap:10px}.unit-bottom{left:12px;right:12px;bottom:8px}.unit-top{left:10px;right:10px;top:8px}.unit-top .status-tag{font-size:9px}.card{flex-basis:135px;width:135px;height:201px}.card-name{font-size:17px}.hand{gap:11px}.enemy-hand{display:flex}.connection{display:flex}.home-bottom{grid-template-columns:repeat(3,1fr);gap:25px}.entry{border:0}.entry span p{max-width:150px}.entry .entry-icon{display:none}}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){.home-main{grid-template-columns:1.12fr 1fr;gap:20px}.home-content{padding-top:45px}.hero-art{min-height:515px}.hero-card{width:265px}.hero-card.back{width:243px;transform:rotate(-12deg) translate(-102px,-10px)}.hero-note{bottom:20px}.home-bottom{margin-top:15px}.form-grid{grid-template-columns:1.25fr 1fr}.story{grid-template-columns:1fr 1fr;gap:70px}.catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.game{padding:12px 3vw 30px}.game .topbar{height:65px}.slot{height:112px}.selected-card.card{width:100%;height:auto}.selection-panel{padding:17px}.selection-head{margin-bottom:14px}.leader{min-height:58px;padding:9px 13px}.card{flex-basis:121px;width:121px;height:178px}.card-name{font-size:15px}.hand{min-height:195px}.unit-art img{object-position:50% 22%}.board-row{margin-bottom:8px;gap:10px}.centerline{margin:10px 0}.topbar.game-header{height:64px;padding:0 3vw}.action-strip{padding:11px 0}.arena-surface{bottom:170px}}
@media(min-width:1250px){.home-content{padding-top:60px}.home-main{min-height:615px}.hero-art{min-height:550px}.hero-card{width:294px}.hero-card.back{width:268px;transform:rotate(-12deg) translate(-115px,-10px)}.hero-note{bottom:0}.entry .entry-icon{display:grid}.game-layout{grid-template-columns:minmax(0,1fr) 278px;gap:30px}.game{padding-left:5vw;padding-right:5vw}.slot{height:121px}.card{flex-basis:133px;width:133px;height:196px}.card-name{font-size:16px}.hand{min-height:212px}.unit-name{font-size:14px}.unit-art img{object-position:50% 26%}.catalog{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:599px){.topbar{height:64px;padding:0 12px;gap:10px}.topnav{gap:7px}.topnav button{font-size:10px;min-height:44px;padding:0 2px;letter-spacing:.02em}.game-toolbar button{min-height:44px}.topnav button[data-go="collection"]{display:block}.brand{gap:8px}.brand strong{font-size:13px;line-height:1.05}.brand small{display:none}.brand img{width:24px}.home-content{padding-top:37px}.intro h1{font-size:55px}.intro .lead{font-size:13px;margin-top:22px}.intro-meta{gap:14px;font-size:9px;margin:25px 0 10px}.hero-art{min-height:420px;max-width:350px}.hero-card{width:205px;transform:rotate(8deg) translateX(43px)}.hero-card.back{width:187px;transform:rotate(-12deg) translate(-70px,-5px)}.hero-note{bottom:7px;right:4%}.home-main{gap:12px;min-height:0}.home-bottom{margin-top:26px}.footer{font-size:9px}.game{padding:12px 12px 20px}.leader{gap:8px;padding:9px 10px}.leader-name{font-size:17px}.leader-caption{font-size:8px}.leader-health{font-size:24px}.resource{font-size:20px;padding-left:9px}.leader>img{width:26px;height:26px}.game-toolbar{gap:7px}.game-toolbar>.eyebrow{max-width:140px;font-size:8px}.game-toolbar .button-row{gap:10px}.unit-name{font-size:10px;max-width:52px}.unit-stats{font-size:17px;gap:4px}.unit-top .status-tag{font-size:7px;padding:2px 3px}.selection-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:18px}.selection-head,.selection-panel>.selection-prompt,.selection-panel>.action-tabs,.selection-panel>.primary,.selection-panel>.legal-list,.selection-panel>.aside-divider,.selection-panel>.tiny-guide,.selection-panel>.battle-log{grid-column:1/-1}.selection-panel>.selected-card{grid-column:1;grid-row:2/6;margin:0 0 20px;width:100%}.selection-panel>h3,.selection-panel>p{grid-column:2}.selection-panel>.empty-selection{grid-column:1/-1;min-height:70px}.selection-panel .selected-card .card-name{font-size:19px}.selection-panel .selected-card .card-rules{font-size:8px}.selection-panel .selected-card .card-cost{font-size:28px;left:12px;top:10px}.selection-panel .selected-card .card-caption{left:10px;right:10px;bottom:10px}.selected-card .card-numbers{font-size:21px}.selected-card .card-keyword{font-size:6px}.selection-panel .selected-card .card-clan{width:17px;right:10px;top:12px}.game-toolbar .pill{display:none}.catalog-item{padding:8px}.catalog-item .card-name{font-size:17px}.page-head{align-items:flex-start;flex-direction:column}.story{min-height:0}.story-image{max-height:370px;aspect-ratio:1}.panel{padding:23px}.lobby{padding:20px 12px;margin:30px auto}.room-code{font-size:17px}.reconnect-bar{flex-wrap:wrap}.reconnect-bar p{flex-basis:100%}.selection-panel>.legal-list{max-height:240px;overflow:auto}.catalog-item .card-bottom .card-keyword{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.card:hover,.card.is-selected{transform:none}.notice{transform:translate(-50%,0)}}

.enemy-hand-count{display:block;font-size:9px;line-height:1.5;color:var(--muted)}

/* Rarity is independent of clan and combat values. Text and star count duplicate color. */
.card-rarity{display:flex;align-items:center;gap:5px;color:var(--rarity-color,#aab2bd);font:600 8px var(--sans);line-height:1.3;margin:5px 0;white-space:nowrap}.rarity-stars{letter-spacing:1px;font-size:9px}.card-rarity.unassigned{color:var(--muted)}.rarity-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px;font-size:11px}.rarity-legend>span{color:var(--rarity-color)}.selected-card .card-rarity,.catalog .card-rarity{font-size:10px}.card-numbers b{border-radius:0;min-width:22px;text-align:center;background:#101216;padding:2px 4px;font-family:var(--sans);font-size:16px;font-variant-numeric:tabular-nums;border:0;border-bottom:2px solid #994942}

/* Sammlung/Deckbau: nicht besessene Karten bleiben lesbar, aber sichtbar gesperrt. */
.locked-card{opacity:.5;border-style:dashed}
.locked-card .card{filter:grayscale(.85)}
.catalog-item .button-row{margin-top:12px;justify-content:space-between}
.catalog-item .button-row strong{font:20px var(--serif);min-width:24px;text-align:center}
.catalog-item h3{font-size:18px}
.catalog-item .muted{font-size:11px;padding-top:6px;min-height:0}

/* Anführer: Ultimate-Knopf und Zustand „verbraucht“ sitzen unter dem Namen, ohne das Leader-Layout zu verändern. */
.leader-ultimate{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.ultimate-button{min-height:32px;padding:5px 10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-color:#c3ac8380;color:var(--gold)}
.ultimate-button:hover{border-color:var(--gold);background:#c3ac8318}
.ultimate-button.is-selected{border-color:var(--gold);background:#c3ac8328;color:var(--paper)}
.ultimate-button svg{width:14px;height:14px}
.ultimate-spent{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8e8b84;border:1px dashed #ffffff30;padding:4px 8px;text-decoration:line-through;text-decoration-color:#8e8b8499}
.ultimate-hint{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.leader-place{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.place-name{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);border:1px solid #ffffff24;padding:4px 8px}
.place-name svg{width:13px;height:13px}
.place-button{min-height:32px;padding:5px 10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-color:#8fb4c380;color:#9cc3d2}
.place-button:hover{border-color:#9cc3d2;background:#8fb4c318}
.place-button.is-selected{border-color:#9cc3d2;background:#8fb4c328;color:var(--paper)}
.place-hint{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.selection-panel>.ultimate-eyebrow{margin-bottom:6px}
.ultimate-focus{min-height:110px}
@media(max-width:599px){.selection-panel>.ultimate-eyebrow{grid-column:1/-1}.leader-ultimate{margin-top:4px}.ultimate-button{min-height:28px;padding:4px 8px;font-size:9px}}
/* Auf Handy und Tablet bleiben Ultimate- und Ortsknopf sichtbar klein -- sonst waechst die
   Anfuehrerzeile und Brett und Hand passen nicht mehr zusammen auf den Schirm. Die Flaeche,
   die einen Finger annimmt, wird trotzdem 44 px hoch: ein unsichtbares Feld ueber dem Knopf,
   das keine Zeile verschiebt. Die Breite bleibt die des Knopfes, damit nichts daneben
   verdeckt wird. */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){.ultimate-button,.place-button{position:relative}
.ultimate-button:after,.place-button:after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}}

/* Worn gear sits on the warrior as a small band, never as a second card on the board. */
.unit-gear{position:absolute;left:0;right:0;bottom:2.55rem;display:flex;align-items:center;gap:.25rem;
  padding:.1rem .3rem;font-size:.58rem;letter-spacing:.04em;text-transform:uppercase;
  background:color-mix(in srgb, var(--ink, #0a0b0d) 72%, transparent);
  border-top:1px solid color-mix(in srgb, currentColor 30%, transparent);pointer-events:none;}
.unit-gear span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.unit-gear .icon{flex:0 0 auto;width:.7rem;height:.7rem;}

/* Ladder and rated-match history: one row per line, readable down to a narrow phone. */
.ladder-list,.ladder-history{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ladder-list li,.ladder-history li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line,#ffffff1a);border-radius:10px;background:#ffffff08}
.ladder-list li.is-you{border-color:var(--accent,#c9a227);background:#c9a2271a}
.ladder-list b{min-width:2ch;font-size:16px;opacity:.7}
.ladder-list span,.ladder-history span{flex:1 1 140px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.ladder-list strong,.ladder-history strong{font-size:17px}
.ladder-list small,.ladder-history small{flex:0 0 auto;opacity:.65;font-size:12px}

/* The paid shop: three plain cards, one column as soon as the screen is narrow. */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.shop-item{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2,rgba(255,255,255,.03))}
.shop-item h4{margin:0;font-size:17px}
.shop-item p{margin:0;font-size:13px;opacity:.75}
.shop-item strong{font-size:26px;letter-spacing:.01em}
.shop-item small{opacity:.7}
.shop-item button{margin-top:8px}

/* Handy-Layout der Partie: Brett und Hand passen bei 375 x 812 gemeinsam auf den Schirm.
   Nur Groessen und Abstaende - keine Regel, keine Reihenfolge, kein neues Bedienelement. */
@media(max-width:599px){
.game{padding:8px 10px 18px}.game .game-toolbar{margin:0 0 8px}
.game .leader{min-height:56px;padding:6px 9px;gap:7px}
.game .leader>img{width:22px;height:22px}
.game .leader-name{font-size:12px;line-height:1.12;display:block}
.game .leader-caption{font-size:7px;line-height:1.35}
.game .enemy-hand-count{font-size:8px}
.game .unit-name{font-size:9px}
.game .leader-health{font-size:20px}
.game .resource{font-size:17px;padding-left:10px}
.battlefield{padding:4px 0 0}
.board-row{gap:5px;margin-bottom:5px}
.slot{height:56px}
.centerline{margin:5px 0}
.game .leader-ultimate{margin-top:2px}
.action-strip{padding:8px 0}
.hand-label{margin:5px 0}
.hand{min-height:0;gap:7px;padding:5px 6px 6px}
.hand .card{flex:0 0 90px;width:90px;height:133px}
.hand .card .card-name{font-size:12px;margin-bottom:4px}
.hand .card .card-cost{font-size:20px;top:5px;left:7px}
.hand .card .card-caption{left:7px;right:7px;bottom:6px}
.hand .card .card-numbers{font-size:14px;gap:6px}
.hand .card .card-clan{width:12px;right:6px;top:7px}
}

/* Der mitgefuehrte Rueckweg-Link kann in projizierten (transformierten) Slots liegen.
   Dort ist position:fixed relativ zum Slot; unbefokussiert darf er keine Felder verdecken. */
.skip-link:not(:focus){opacity:0;pointer-events:none}

/* Tablet: dieselbe Verdichtung, eine Dosis staerker. Ziel ist nicht mehr nur die Spanne,
   sondern dass Brett und Hand ab Seitenanfang gemeinsam auf 1024 px Hoehe passen -- auch im
   teuersten Spielzustand, also mit Ultimate-Zeile bei beiden Anfuehrern. */
@media (min-width:600px) and (max-width:759px) and (min-height:501px),(min-width:600px) and (max-width:759px) and (orientation:portrait){
.topbar.game-header{height:62px;padding:0 3vw}
.game{padding:10px 3vw 22px}
.game .game-toolbar{margin:0 0 8px}
.slot{height:88px}
.board-row{gap:8px;margin-bottom:7px}
.centerline{margin:7px 0}
.battlefield{padding:4px 0 0}
.game .leader{min-height:54px;padding:7px 11px;gap:9px}
.game .leader>img{width:26px;height:26px}
.game .leader-health{font-size:22px}
.hand-label{margin:6px 0}
.hand{min-height:0;gap:9px;padding:6px 7px 8px}
.hand .card{flex:0 0 114px;width:114px;height:170px}
.hand .card .card-name{font-size:14px;margin-bottom:5px}
.hand .card .card-cost{font-size:23px;top:6px;left:9px}
.hand .card .card-caption{left:9px;right:9px;bottom:8px}
.hand .card .card-numbers{font-size:17px;gap:7px}
.hand .card .card-clan{width:14px;right:8px;top:9px}
.action-strip{padding:7px 0}
}

/* Unter 360 px wird es eng fuer Wortmarke und sechs Navigationsziele. Statt den Schriftzug
   ganz zu streichen, wird er kleiner und ohne Sperrung gesetzt und darf umbrechen -- so bleibt
   der Name des Spiels lesbar, ohne die Navigation zu ueberlappen. */
@media(max-width:359px){.topbar{padding:0 8px;gap:6px}.brand{gap:5px}.brand img{width:19px;height:23px}.brand strong{font-size:9px;letter-spacing:0;line-height:1.1;max-width:44px;white-space:normal}.topnav{gap:4px}}
/* A classic scrollbar leaves less than 320 CSS pixels of usable content width. */
@media(max-width:359px){
  body{min-width:0}
  .topbar:not(.game-header){height:auto;min-height:64px;flex-wrap:wrap;padding:10px 12px;gap:4px}
  .topbar:not(.game-header) .brand strong{font-size:13px;max-width:none;white-space:nowrap}
  .topbar:not(.game-header) .topnav{flex-basis:100%;min-width:0;justify-content:space-between;margin-left:0}
}

/* Die visuelle Entwurfsgalerie ist Teil der Hauptnavigation. Auf kleinen Schirmen bleibt
   sie ueber den Startbereich erreichbar, damit die sechs Spielziele in eine Zeile passen. */
.topnav .gallery-nav{padding:10px 0;color:var(--muted);font-size:12px;border-bottom:1px solid #b9a48470}
.topnav .gallery-nav:hover{color:var(--paper)}
@media(max-width:599px){.topnav .gallery-nav{display:none}}

/* Untertitel der Wortmarke auf schmalen Schirmen: gemessen, nicht geschaetzt.
   Ab 412 px bleibt die Marke mit Untertitel 48 px hoch und damit in der 64 px hohen Kopfzeile
   (Unterkante 8 px darueber); darunter steht die Wortmarke selbst zweizeilig, die Marke waechst
   auf 72-84 px und der Untertitel haengt 4-10 px unter der Kopfkante heraus. Deshalb kommt er
   erst ab 420 px zurueck - Ueberhang bleibt 0 px, alle sechs Navigationsziele bleiben 44 px hoch. */
@media(min-width:420px) and (max-width:599px){.brand small{display:block}}

/* ---------------------------------------------------------------------------
   Paket F5 — die 3D-Buehne als Untergrund des Spielbretts.

   Der Wirt liegt fest positioniert UNTER #app und ist ausgeblendet, solange keine
   Buehne laeuft. Mit der Koerperklasse .stage-on werden nur die GEMALTEN Flaechen des
   Bretts durchsichtig: Slots, Figurenkarten, Arenaschleier. Alle Elemente bleiben im
   Layout, bleiben Treffer- und Tabulatorziele und behalten ihre Beschriftung — Hand,
   Chi, Log, Knoepfe und die ganze Auswahl-Logik arbeiten unveraendert weiter.
   Fehlt die Klasse (Rueckfall), sieht alles exakt aus wie zuvor. */
/* Der Wirt deckt NICHT mehr das ganze Fenster, sondern genau das Rechteck des Spielfelds
   (.arena). left/top/width/height setzt app.js (syncStageRect) in Pixeln und fuehrt sie nach;
   die Werte hier sind nur der Anfangszustand, bevor das erste Rechteck gemessen ist. */
#stage-host{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;background:var(--ink)}
#stage-host[hidden]{display:none}
#stage-canvas{display:block;width:100%;height:100%}
#app{position:relative;z-index:1}

body.stage-on .arena-surface{opacity:0;pointer-events:none!important}
body.stage-on .slot{background:transparent;border-color:transparent;backdrop-filter:none}
body.stage-on .slot.empty{background:none;color:#cbc3b5}
body.stage-on .slot.empty>svg,body.stage-on .slot.empty>span{opacity:0}
body.stage-on .slot.empty:hover>svg,body.stage-on .slot.empty:hover>span,
body.stage-on .slot.empty:focus-visible>svg,body.stage-on .slot.empty:focus-visible>span,
body.stage-on .slot.empty.potential>svg,body.stage-on .slot.empty.potential>span{opacity:1}
body.stage-on .slot:hover,body.stage-on .slot:focus-within{border-color:#ffffff40}
body.stage-on .slot.potential{background:#c3ac8320;border-color:var(--gold)}
/* Die Figur steht auf der Buehne: im Overlay bleibt nur der Rahmen mit Namen und Zahlen,
   damit das 3D-Modell sichtbar ist und der Knopf trotzdem anklickbar bleibt. */
body.stage-on .unit{background:transparent;border-color:transparent}
body.stage-on .unit-art{opacity:0}
body.stage-on .unit:after{background:none}
/* Die Buehne zeigt ANG/LP. DOM-Text bleibt fuer assistive Technik erhalten;
   beim 2D-Rueckfall erscheinen die bisherigen Werte automatisch wieder. */
body.stage-on .unit-bottom{opacity:0}
/* Ausruestungsname steht im Kartenfokus und im Accessible Name. Auf dem Boden
   genuegt das Zeichen; ein Textband wuerde die 3D-Lebenspunkte verdecken. */
body.stage-on .unit-gear{left:3px;right:auto;bottom:3px;padding:2px;border:0}
body.stage-on .unit-gear span{display:none}
body.stage-on .unit.selected,body.stage-on .unit.potential{background:#c3ac8318}
/* Lesbar bleiben muss alles, was Text traegt: die Zeilen bekommen einen leichten Grund. */
body.stage-on .leader{background:#12151aca;backdrop-filter:blur(2px)}
body.stage-on .leader.enemy{background:#171319ca}
body.stage-on .hand{background:#0a0c0fa8;backdrop-filter:blur(2px);border-radius:4px}
/* Die Landmarken stehen im 3D-Gelaende. Eine zweite Textzeile quer durch
   gegnerische Figuren verdeckt deren Werte; im 2D-Modus bleibt sie sichtbar. */
body.stage-on .centerline{opacity:0;pointer-events:none}

/* ---------------------------------------------------------------------------
   Paket 8p — die Rahmen folgen den Figuren (Projektion statt Raster).
   Ein geneigter perspektivischer Blick bildet das Rechteckgitter des Bretts als TRAPEZ ab;
   ein CSS-Rechteckgitter kann dem nie folgen (gemessen: docs/STAGE_WIRING.md 8m, RMS
   138-194 px). Darum setzt app.js (syncSlotFrames) jedem Kasten left/top/width/height aus
   der Projektion seines 3D-Ankers, bei jedem Bild.
   Die ZEILEN bleiben dabei als unsichtbare Platzhalter im Fluss und tragen weiter genau ihre
   Rasterhoehe (--slot-h, von app.js vor dem Umschalten gemessen) — sonst aenderte sich die
   Hoehe von .battlefield und damit die von .arena, an der der Buehnenwirt klebt: eine andere
   Leinwand, eine andere Kamera, eine andere Projektion, eine Rueckkopplung.
   KEINE Uebergangsanimation auf left/top/width/height: der Rahmen soll im selben Bild sitzen
   wie die Figur, nicht hinterherfedern. Das gilt mit und ohne prefers-reduced-motion.
   Fehlt die Klasse (Rueckfall, Buehne aus, noch kein Bild), steht wieder genau das Raster. */
.battlefield.slots-projected .board-row{min-height:var(--slot-h,113px)}
.battlefield.slots-projected .slot{position:absolute;left:0;top:0;margin:0;transform:translate(-50%,-50%);transition:none}
/* ---------------------------------------------------------------------------
   Historische Stapelregel aus Schritt 1b. Seit der Wirt nur .battlefield bedeckt,
   liegen die HUD-Zeilen ausserhalb der Leinwand. Die Regel bleibt als Schutz fuer
   ueberstehende Zielrahmen und waehrend des Umschaltens zum 2D-Rueckfall. */
body.stage-on .battlefield.slots-projected .slot{z-index:2}
body.stage-on .game .leader>img,body.stage-on .game .leader-name,body.stage-on .game .leader-caption,
body.stage-on .game .enemy-hand-count,body.stage-on .game .enemy-hand,body.stage-on .game .leader-ultimate,
body.stage-on .game .leader-place,body.stage-on .game .leader-health,body.stage-on .game .resource,
body.stage-on .game .action-strip>:not(.skip-link){position:relative;z-index:3}
body.stage-on .game .hand,body.stage-on .game .hand-label{position:relative;z-index:3}
/* Die gegnerische Zeile ist selbst ein Angriffsziel — sie gehoert als Ganzes nach oben. */
body.stage-on .game .leader.potential{z-index:3}

/* Brett und HUD haben getrennte Rechtecke: syncStageRect misst nur .battlefield.
   Die feste Mindesthoehe haengt allein am Viewport, nie an projizierten Slots. */
body.stage-on .game .battlefield{min-height:clamp(340px,calc(100dvh - 410px),650px)}
body.stage-on .battlefield.slots-projected .unit-name{opacity:0}
body.stage-on .battlefield.slots-projected .slot:hover .unit-name,
body.stage-on .battlefield.slots-projected .slot:focus-within .unit-name{opacity:1}

/* ---------------------------------------------------------------------------
   Paket F6, Punkt 4 — die Denkpause des Offline-Gegners (docs/STAGE_CHOREO.md 3.7).
   Zwei Zustaende, beide reine Darstellung:
   .is-thinking       steht, solange der Abspieler die Pause haelt (Kopfzeile + Zugzeile).
   .is-thinking-pulse ein einmaliger Puls von 0,6 s. Er ist der einzige Hinweis, den der
                      flache Rueckfall ohne Buehne ueberhaupt zeigt — dort wartet nichts.
   Beide Animationen nimmt die globale prefers-reduced-motion-Regel weiter oben
   (animation:none!important) von selbst zurueck; die Farbe bleibt, die Bewegung geht. */
.leader.enemy.is-thinking{border-color:#c3ac8366}
.leader.enemy.is-thinking .leader-name{color:var(--gold)}
.leader.enemy.is-thinking:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);animation:denkpause 1.4s ease-in-out infinite}
.leader.enemy.is-thinking-pulse .leader-name{animation:denkpuls .6s ease-out 1}
.turn-copy.is-thinking{color:#d9c8a8}
.turn-copy.is-thinking small{color:var(--gold);letter-spacing:.04em}
@keyframes denkpause{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes denkpuls{0%{color:var(--gold);text-shadow:0 0 12px #c3ac8366}100%{color:inherit;text-shadow:none}}

/* Ueberspringen: sichtbar genau solange der Abspieler einen Takt haelt. */
.stage-skip{border:1px solid var(--gold);color:var(--gold);background:#0b0d10d9;padding:0 12px;min-height:36px;white-space:nowrap}
.stage-skip:hover{background:#c3ac8326}
/* Die ruhige Zeile des Rueckfalls: eine Feststellung, kein Fehler, kein Technikjargon. */
.stage-flat{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;padding-left:9px;border-left:1px solid #685648}

/* ---------------------------------------------------------------------------
   Paket F4, Punkt 1 — Ziehen von der Hand auf ein Ziel.
   Das Geisterbild ist eine Kopie der Karte, die dem Zeiger folgt: position:fixed,
   pointer-events:none, damit elementFromPoint darunter das echte Ziel findet.
   'potential' bleibt die eine Hervorhebung fuer gueltige Ziele (dieselbe Klasse wie
   im Klickweg); 'drop-ready' kommt nur auf das Ziel unter dem Zeiger obendrauf.
   Der Puls ist eine reine CSS-Animation und faellt unter der globalen
   prefers-reduced-motion-Regel weiter oben (animation:none!important) von selbst weg. */
.drag-ghost{position:fixed;left:0;top:0;z-index:98;pointer-events:none;opacity:.94;transform:translate3d(-9999px,-9999px,0);filter:drop-shadow(0 14px 30px #000c)}
.drag-ghost .card{width:100%;height:100%;transform:rotate(-3deg);border-color:var(--gold);transition:none;opacity:1}
body.is-dragging{cursor:grabbing;user-select:none}
/* Auf einer Handkarte gehoert die Geste dem Ziehen, sonst wird daraus ein Seitenscroll.
   Die Hand selbst bleibt seitlich scrollbar, wenn man NEBEN einer Karte anfasst. */
.hand{touch-action:pan-x}
.hand .card{touch-action:none}
.hand .card.card-dragged{opacity:.3;filter:grayscale(.55);transform:none}
.drop-ready{outline:3px solid var(--gold);outline-offset:2px;z-index:4;animation:dropready 1.05s ease-in-out infinite}
.slot.drop-ready{background:#c3ac834a}
.unit.drop-ready,.leader.drop-ready{background:#c3ac8330}
body.stage-on .slot.drop-ready{background:#c3ac8340}
@keyframes dropready{0%,100%{outline-color:var(--gold)}50%{outline-color:var(--paper)}}

/* Gemessen am 18.09.2026: .arena ist eine Gitterspalte und wurde von der NEBENspalte
   (Auswahl, Verlauf) mitgezogen — bis zu 73 px hoeher als das Brett selbst. Der
   Buehnenwirt klebt auf dem .arena-Rechteck, also rechnete WebGL diesen leeren Streifen
   unter dem Brett mit und auf flachen Fenstern schob er die Arena unter den Falz.
   align-self:start nimmt der Spalte das Strecken; die Buehne ist damit genau das Brett. */
.game-layout>.arena{align-self:start}

/* ---------------------------------------------------------------------------
   Paket F4 — flache Fenster (Punkt 10 der Offen-Liste in docs/STAGE_WIRING.md).
   Gemessen am 18.09.2026: auf 1024 x 768 war die Arena 958 px hoch und ragte
   knapp ein Drittel unter den Falz; die Buehne rechnet diesen Teil mit, weil der
   Wirt genau auf dem .arena-Rechteck sitzt. Nicht die SCHMALEN Fenster sind das
   Problem, sondern die FLACHEN: die Arenahoehe folgt der Breite.
   Darum eine eigene Stufe fuer niedrige Fenster ab Tabletbreite. Das Handybrett
   (max-width:599px) hat sein eigenes Layout und bleibt unberuehrt, ebenso jedes
   Fenster ueber 820 px Hoehe — die dort gemessenen Zahlen aendern sich nicht.
   Nur Hoehen und Abstaende, keine neue Anordnung: dieselbe Bedienung, dichter. */
@media(min-width:700px) and (max-height:820px){
  .topbar.game-header{height:50px}
  .game{padding:6px 3vw 8px}
  .game-toolbar{margin:0 0 6px}
  .game-toolbar button{min-height:28px}
  .leader{min-height:42px;padding:5px 11px}
  .leader-name{font-size:15px}
  .leader-health{font-size:20px}
  .leader-caption{font-size:8px}
  .leader>img{width:22px;height:22px}
  .resource{font-size:18px;padding-left:11px}
  .leader-ultimate,.leader-place{margin-top:3px}
  .battlefield{padding-top:4px}
  .board-row{margin-bottom:5px}
  /* Der Slot traegt die Figur; unter 70 px wird aus dem Rahmen ein Streifen. */
  .slot{height:clamp(68px,8.9vh,112px)}
  .unit-stats{font-size:16px}
  .unit-name{font-size:9px}
  .unit-words{top:20px}
  .unit-status{top:30px}
  .centerline{margin:3px 0}
  .action-strip{padding:5px 0}
  .action-strip .primary{min-height:38px}
  .turn-copy{font-size:15px}
  .turn-copy small{margin-top:1px}
  .hand-label{margin:3px 0 2px}
  .hand{min-height:0;padding:5px 8px 7px}
  /* Seitenverhaeltnis der Karte bleibt 124:184. */
  .card{flex-basis:92px;width:92px;height:136px}
  .card-cost{font-size:20px;top:6px;left:8px}
  .card-name{font-size:12px;margin-bottom:5px}
  .card-numbers{font-size:14px}
  .card-clan{width:12px;height:15px;right:7px;top:8px}
  /* Die Zeile des Rueckfalls steht ueber demselben Brett und darf es nicht schieben. */
  .stage-flat{margin:0 0 2px}
  .selection-panel{padding:14px}
  .arena-surface{bottom:120px}
}

/* Die Ablage wird ein Ort: derselbe Knopf in der gegnerischen Anfuehrerzeile und in der eigenen
   Handzeile. Er traegt die Schrift der Zeile, in der er steht (font/letter-spacing/Farbe geerbt),
   also KEIN Knopfkasten und kein zusaetzlicher Zeilenraum — die Anfuehrerzeile waechst um 0 px,
   was die flachen Fenster (1024x768) gerade erst gewonnen haben. Erkennbar wird er beim Zeigen
   (Goldton mit Unterstrich) und am Fokusring der uebrigen Datei. Stumm gestellt bleibt er an
   seinem Platz und wird nur matt. */
.pile-button{position:relative;display:inline;margin:0;padding:0;border:0;background:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;vertical-align:baseline}
.pile-button:hover:not(.is-empty){color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.pile-button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pile-button.is-empty{opacity:.42;cursor:default;text-decoration:none}
/* Dieselbe Loesung wie bei Ultimate- und Ortsknopf: die Trefferflaeche wird 44 px hoch, ohne dass
   der Text die Zeile hoeher macht. Nur so breit wie der Knopf, damit nichts daneben verdeckt wird. */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){.pile-button:not(.is-empty):after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}}
/* Der Ablage-Dialog: eine Zeile je Kartenart, Anzahl, Name, Art. */
.pile-list{list-style:none;margin:0 0 24px;padding:0;display:grid;max-height:46vh;overflow:auto}
.pile-list li{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.pile-list li:last-child{border-bottom:0}
.pile-list b{flex:0 0 auto;min-width:38px;font:17px var(--serif);font-weight:400;color:var(--gold)}
.pile-list span{flex:1;font-size:14px;color:var(--paper)}
.pile-list small{flex:0 0 auto;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* F6 — die Gegnerwahl vor dem Solo-Duell und das Gesicht im Duell.
   Keine zweite Designsprache: die Kacheln sind die kleinere Fassung von .clan-choice (dieselbe
   Linie, derselbe Goldrand fuer das Gewaehlte, dasselbe Haken-Eck), die Stufenknoepfe tragen die
   Optik von .filterbar. Alle Farben kommen aus den vorhandenen Variablen. Der Fokusring ist der
   Ring der Datei (button:focus-visible ganz oben), hier wird nichts davon ueberschrieben. */
.opponent-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;margin:0 0 20px}
.opponent-face{padding:14px 13px;background:linear-gradient(130deg,#ffffff04,#ffffff01);border:1px solid var(--line);text-align:left;position:relative;min-height:44px}
.opponent-face:hover{border-color:#ffffff40}
.opponent-face.selected{border-color:var(--gold);background:linear-gradient(130deg,#c3ac830b,#ffffff01)}
.opponent-face .opponent-portrait{display:block;width:46px;height:46px;overflow:hidden;margin-bottom:12px;border:1px solid #ffffff14;background:#0d1013}
.opponent-face .opponent-art{width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.9}
/* Ohne Anfuehrerbild steht das Wappen des Hauses da — kein leerer Kasten und keine erfundene Datei. */
.opponent-face .opponent-art.is-crest{object-fit:contain;padding:8px;opacity:.75}
.opponent-face strong{display:block;font:17px/1.15 var(--serif);font-weight:400}
.opponent-face small{display:block;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.opponent-pick .opponent-face p{font-size:11px;line-height:1.55;color:var(--muted);margin:9px 0 0}
.opponent-face .check{position:absolute;right:11px;top:11px;color:var(--gold)}
.panel .opponent-level-label{font-size:10px;letter-spacing:.14em;color:var(--muted);margin:0 0 9px;line-height:1.5}
.level-pick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.level-choice{flex:1 1 84px;background:none;border:1px solid var(--line);padding:9px 10px;min-height:44px;color:var(--muted);font-size:12px}
.level-choice:hover{border-color:#ffffff40;color:var(--paper)}
.level-choice.selected{border-color:var(--gold);color:var(--paper);background:#c3ac830b}
.panel .opponent-note{font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 22px}
/* Die Tagline steht einmal lesbar ueber dem Brett — nicht nur als Titel im DOM. Eigene Zeile,
   weil die Augenbraue der Spielleiste auf schmalen Fenstern auf 140 px gedeckelt ist. */
.opponent-tagline{font:italic 13px/1.6 var(--serif);color:#c9bda9;margin:0 0 12px;max-width:78ch}
@media(max-width:599px){
  .opponent-face{padding:12px 11px}
  .opponent-face .opponent-portrait{width:38px;height:38px;margin-bottom:10px}
  .opponent-face strong{font-size:15px}
  .opponent-pick .opponent-face p{font-size:10px;margin-top:7px}
  .level-choice{font-size:11px;padding:9px 6px;flex:1 1 72px}
  .opponent-tagline{font-size:12px;margin-bottom:10px}
}


/* ---------------------------------------------------------------------------
   F4-Schliff Schritt 1 — "Bild fuellen".
   Das Tipp-Panel belegte im Spielbildschirm eine eigene Gitterspalte (252 px) und nahm
   der Arena damit rund ein Fuenftel der Fensterbreite. Jetzt ist .game-layout einspaltig
   und das geschlossene Panel liegt ausserhalb der Buehne: .arena — und mit ihr der
   Buehnenwirt, der per syncStageRect() auf ihrem Rechteck klebt — bekommt die volle Breite.
   Ein offenes Panel erhaelt auf breiten Fenstern unten eine eigene Spalte.
   Geschlossen traegt das Panel im Markup inert UND hier visibility:hidden: es ist damit
   weder anklickbar noch Tabulatorziel, also keine Tastaturfalle. Die Klappbewegung ist
   eine reine transition und faellt unter die globale prefers-reduced-motion-Regel
   (transition:none!important) weiter oben — dort springt das Panel ohne Bewegung. */
.game-layout{grid-template-columns:minmax(0,1fr)}
.selection-panel{position:fixed;right:0;top:50%;z-index:6;width:min(360px,94vw);
  max-height:78vh;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(135deg,#191a1df2,#0e1113f2);backdrop-filter:blur(7px);
  border:1px solid var(--line);border-right:0;box-shadow:-20px 0 56px #000b;
  transform:translate(102%,-50%);visibility:hidden;
  transition:transform .22s ease,visibility 0s linear .22s}
.selection-panel.is-open{transform:translate(0,-50%);visibility:visible;
  transition:transform .22s ease,visibility 0s}
/* Auf breiten Fenstern bekommt ein offenes Detailpanel eine eigene Spalte. So bleiben
   Zugende und alle Felder neben dem Panel erreichbar, auch im flachen 2D-Brett. */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  .game-layout.has-panel{grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:16px}
  .game-layout.has-panel>.selection-panel{position:sticky;top:16px;right:auto;
    width:auto;max-height:calc(100vh - 32px);align-self:start;
    transform:none;border-right:1px solid var(--line);box-shadow:none}
}
/* Auf schmalen Fenstern steht das geoeffnete Panel nach der Arena im Seitenfluss.
   Das Brett bleibt vollstaendig anklickbar; der Inhalt des Panels kann normal scrollen. */
@media(width < 900px){
  .game-layout:not(.has-panel)>.selection-panel{display:none}
  .game-layout.has-panel>.selection-panel{position:static;top:auto;right:auto;
    width:100%;max-height:none;overflow:visible;z-index:auto;
    transform:none;transition:none;visibility:visible;
    border-right:1px solid var(--line);box-shadow:none}
}
/* Der "?"-Knopf traegt aria-expanded und die Beschriftung "Details"; das Fragezeichen ist
   nur Schmuck (aria-hidden) und bleibt deshalb aus dem Namen heraus. */
.panel-toggle .panel-toggle-mark{display:inline-block;width:16px;height:16px;line-height:15px;
  text-align:center;border:1px solid currentColor;border-radius:50%;font-size:10px;margin-right:5px}
.panel-toggle.is-on{color:var(--gold)}
/* Das Kampf-Log ist jetzt einklappbar und startet zu. */
.selection-rules p{font-size:13px;line-height:1.55;margin:0 0 12px}
@media(max-width:599px){.selection-panel>.selection-rules{grid-column:1/-1}}
.selection-panel>.log-box{margin-top:2px}
.selection-panel>.log-box>summary{cursor:pointer;font-size:10px;color:var(--muted);padding:8px 0;
  letter-spacing:.13em;text-transform:uppercase}
.selection-panel>.log-box .battle-log{margin-top:8px}
/* Das Handybrett stellt das Panel zweispaltig; als Overlay gilt dasselbe innerhalb des
   Blattes. Die frueheren Gitterplaetze der Log-Liste erbt jetzt das <details>. */
@media(max-width:599px){.selection-panel{width:94vw;max-height:80vh}
  .selection-panel>.log-box{grid-column:1/-1}}
@media(min-width:700px) and (max-height:820px){.selection-panel{max-height:86vh}}

/* ---------------------------------------------------------------------------
   F4-Schliff Schritt 1b — ".arena passt in die Fensterhoehe".
   Gemessen am 19.09.2026 bei 1536 x 864: .arena war 1008,5 px hoch und begann erst bei
   y = 222 — zwei Drittel der Leinwand lagen unter dem Falz. Das ist nicht nur laestig zu
   scrollen: der Buehnenwirt klebt per syncStageRect() genau auf dem .arena-Rechteck, WebGL
   rechnet den unsichtbaren Teil also mit, und weil die Brettgroesse an der Canvas-HOEHE
   haengt (Brettbreite px = 2,2 * Hoehe / (z_v * tan(fov/2))), verschenkt jede Kameraarbeit
   genau diesen Anteil.

   Gemacht wird dasselbe wie in der vorhandenen Stufe fuer flache Fenster weiter oben: nur
   Hoehen und Abstaende, keine neue Anordnung, kein neues Bedienelement. Neu ist allein, dass
   die beiden GROSSEN Posten — die vier Brettreihen und die Handkarten — nicht mehr fest in
   Pixeln stehen, sondern aus der Fensterhoehe folgen. Die Rechnung dahinter:

     .arena = fester Teil (zwei Anfuehrerzeilen, Zugzeile, Handbeschriftung, Fugen) ~278 px
              + 4 * Reihenhoehe + Kartenhoehe
     ueber .arena stehen Kopfzeile, Werkzeugzeile und Tagline mit 174 px (gemessen)
     dazu ein Vorrat von ~30 px, damit auch der teuerste Spielzustand passt: beide
     Anfuehrerzeilen koennen eine Ultimate- UND eine Ortszeile tragen
     => 4 * Reihe + Karte darf 100vh - 470 px nicht ueberschreiten.
   Mit Karte = 2 * Reihe loest sich das zu Reihe = (100vh - 470px) / 6. Die Klammern halten
   die Reihe zwischen 46 und 121 px (darueber bliebe Platz liegen, darunter waere der Kasten
   kein Ziel mehr) und die Karte zwischen 96 und 196 px.

   KEINE Rueckkopplung: 100vh kennt die Bretthoehe nicht. --slot-h misst app.js weiterhin am
   fertigen Kasten (syncSlotFrames), bekommt also genau den Wert der Klammer und schreibt ihn
   in .board-row zurueck — derselbe Wert, kein Schwingen.
   Die Hauptknoepfe bleiben bei 44 px Trefferhoehe ("Zug beenden", Werkzeugzeile). */
@media(min-width:700px){
  /* Die Tagline ist Schmuck und nahm vier Zeilen (83 px) ueber dem Brett. Zwei reichen. */
  .opponent-tagline{font-size:12px;line-height:1.5;margin:0 0 8px;max-width:110ch;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .game{padding-bottom:10px}
  .game-toolbar{margin:0 0 10px}
  .game-toolbar button{min-height:44px}
  /* Die beiden Anfuehrerzeilen: dichter, aber mit derselben Zeilenordnung. */
  .game .leader{min-height:46px;padding:5px 12px;gap:10px}
  .game .leader>img{width:24px;height:24px}
  .game .leader-name{font-size:16px}
  .game .leader-caption{font-size:8px}
  .game .leader-health{font-size:21px}
  .game .resource{font-size:19px;padding-left:12px}
  .game .leader-ultimate,.game .leader-place{margin-top:3px}
  .battlefield{padding-top:4px}
  .board-row{margin-bottom:6px}
  .centerline{margin:5px 0}
  .slot{height:clamp(46px,calc((100vh - 470px)/6),121px)}
  .action-strip{padding:7px 0}
  .action-strip .primary{min-height:44px}
  .hand-label{margin:4px 0}
  .hand{min-height:0;padding:6px 8px 8px}
  /* Breite folgt der Hoehe; das Seitenverhaeltnis der Karte bleibt 124:184. */
  .hand .card{flex:0 0 auto;width:auto;aspect-ratio:124/184;
    height:clamp(170px,calc((100vh - 470px)/3),196px)}
  .hand .card .card-cost{font-size:21px;top:6px;left:8px}
  .hand .card .card-name{font-size:13px;margin-bottom:5px}
  .hand .card .card-numbers{font-size:15px}
  .hand .card .card-clan{width:13px;height:16px;right:7px;top:8px}
  .hand .card .card-caption{left:9px;right:9px;bottom:8px}
  /* Der gemalte Bodenschleier sass auf der alten, hohen Arena auf. */
  .arena-surface{inset:40px -10px 130px}
}
/* Hand cards retain readable values even in short windows. Full names and rules
   remain available through the card's accessible label and selection panel. */
.hand .card{min-width:114px;min-height:170px}
.hand .card .card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.15}
.hand .card .card-type{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hand .card .card-rarity{flex-wrap:wrap;gap:2px 5px;white-space:normal}
.hand .card .card-bottom{flex-wrap:wrap;gap:4px}
.hand .card .card-keyword{max-width:100%;overflow-wrap:anywhere}
.hand .card .card-numbers{margin-left:auto;flex-shrink:0}
/* Kampagne: each unlocked encounter remains a real keyboard-focusable action. */
.campaign-list{list-style:none;margin:24px 0;padding:0;display:grid;gap:18px}
.campaign-encounter{display:grid;grid-template-columns:minmax(110px,190px) 1fr;gap:24px;align-items:center}
.campaign-encounter h2{margin:0 0 8px}
.campaign-encounter p{line-height:1.5}
.campaign-art{max-width:190px;aspect-ratio:3/4;overflow:hidden;border-radius:12px}
.campaign-art .card-image{width:100%;height:100%;display:block}
.campaign-encounter button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:560px){.campaign-encounter{grid-template-columns:1fr}.campaign-art{max-width:120px;aspect-ratio:1}}
/* Campaign-only public objective, outside the board and card layout. */
.campaign-scenario{border:1px solid #756387;background:#19151e;padding:14px 18px;margin:0 0 16px;display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,2fr);gap:6px 20px;color:var(--paper)}
.campaign-scenario p{margin:0;font-size:13px;line-height:1.5}.campaign-scenario .eyebrow{font-size:10px;color:#c4b0dc;margin-bottom:4px}.campaign-scenario .scenario-status{grid-column:1/-1;color:#d4c1a3}.campaign-scenario.is-secured .scenario-status{color:#a5d2b5}.campaign-scenario-brief{padding:10px 12px;border-left:2px solid #9e85b4;background:#211c27}
@media(max-width:600px){.campaign-scenario{grid-template-columns:1fr;padding:12px;gap:8px}.campaign-scenario .scenario-status{grid-column:1}}
.campaign-deck{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.campaign-deck p{margin:5px 0}.campaign-deck .secondary{flex-shrink:0}@media(max-width:600px){.campaign-deck{align-items:stretch;flex-direction:column}}

/* Legal choices are counted once per card/warrior, outside the card artwork. */
.turn-guide{margin:0 0 10px;padding:7px 10px;border-left:2px solid var(--gold);font-size:12px;line-height:1.5;color:var(--paper);overflow-wrap:anywhere}
/* Deck analysis is independent of the printed card layout. */
.deck-analysis{margin:20px 0}.deck-analysis h2{font-size:26px;margin:0 0 8px}.deck-analysis p{line-height:1.5}.chi-curve{list-style:none;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;padding:0;margin:20px 0 12px;align-items:end}.chi-curve li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-height:100px;font-size:12px}.chi-bar{display:block;width:100%;max-width:36px;background:var(--gold);border-radius:3px 3px 0 0}.deck-type-counts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0}.deck-hints{padding-left:20px;line-height:1.6}.deck-hints li+li{margin-top:6px}@media(max-width:480px){.chi-curve{gap:4px}.deck-analysis h2{font-size:23px}}

/* Short practice decisions share the dojo controls; no card-art overrides. */
.combo-lesson{max-width:780px;margin:auto}.combo-lesson h1{font-size:clamp(28px,5vw,48px);line-height:1.15}.lesson-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}.lesson-body,.lesson-feedback{border:1px solid var(--line,#5e584c);border-radius:12px;padding:20px}.lesson-body h3{font-size:18px}.lesson-resource{padding:8px 0}.lesson-choices{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.lesson-choices button{flex:1 1 230px;white-space:normal;min-height:48px}.combo-lesson .button-row{flex-wrap:wrap}.lesson-feedback h2{font-size:24px}.combo-lesson p{overflow-wrap:anywhere}@media(max-width:480px){.lesson-board{grid-template-columns:1fr;gap:10px}.lesson-body,.lesson-feedback{padding:14px}.combo-lesson .button-row button{white-space:normal}}

/* Long card names must wrap inside the narrow deck editor columns. */
.catalog-item h3{overflow-wrap:anywhere}

/* ===== Arena-Schliff 23.09.2026: HUD-Platten, Handfächer, Hover-Zoom, spielbare Karten =====
   Nur Darstellung. Alle Klick-/Drag-Ziele, ARIA und Datenattribute bleiben unverändert. */
.game .hand{justify-content:center;overflow:visible;gap:0;padding:30px 48px 12px;min-height:178px}
.game .hand .card{margin:0 -12px;position:relative;z-index:1;
  transform:translateY(calc(var(--lift,0) * var(--lift,0) * 3px)) rotate(calc(var(--fan,0) * 3.5deg));
  transform-origin:50% 130%;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .2s;
  box-shadow:0 10px 24px #000b}
.game .hand .card:not(.is-unplayable){box-shadow:0 0 0 2px #8fe0a8d9,0 0 22px #58d08f70,0 10px 24px #000b}
.game .hand .card.is-unplayable{filter:saturate(.55) brightness(.72)}
.game .hand .card:hover,.game .hand .card:focus-visible{z-index:30;filter:none;
  transform:translateY(-64px) scale(1.6) rotate(0deg);
  box-shadow:0 0 0 2px var(--gold),0 26px 60px #000e}
.game .hand .card.is-selected{z-index:25;transform:translateY(-34px) scale(1.18) rotate(0deg);
  box-shadow:0 0 0 3px #f1cf7e,0 0 34px #f1b85c99,0 18px 40px #000d}
.game .hand .card.is-mulligan{filter:grayscale(1) brightness(.55)}
@media (prefers-reduced-motion:reduce){.game .hand .card{transition:none}}
@media(max-width:599px){.game .hand{padding:22px 22px 8px}.game .hand .card{margin:0 -20px}
  .game .hand .card:hover,.game .hand .card:focus-visible{transform:translateY(-40px) scale(1.3)}}

/* Anführer als HUD-Platten: dunkles Lack, Goldkante, Leben als roter Edelstein */
.game .leader{background:linear-gradient(180deg,#1f1b17,#0e0d0c);border:1px solid #6d5630;
  box-shadow:inset 0 1px 0 #caa04e55,inset 0 -1px 0 #0008,0 8px 22px #0009;border-radius:6px}
.game .leader.enemy{background:linear-gradient(180deg,#221719,#0f0b0c);border-color:#6d3a36}
.game .leader.potential{border-color:#f1cf7e;box-shadow:0 0 0 1px #f1cf7e,0 0 26px #f1b85c88}
.game .leader-name{font-family:var(--serif);letter-spacing:.02em}
.game .leader-health{min-width:74px;justify-content:center;padding:4px 12px;border-radius:999px;
  background:radial-gradient(circle at 35% 30%,#e0645a,#7a1016 70%);border:2px solid #e8c878;
  color:#fff6e4;text-shadow:0 2px 3px #000c;box-shadow:0 0 18px #c0392b66}
.game .leader-health svg{color:#ffe0d6}

/* Zug beenden: goldener Hauptknopf, pulsiert wenn nichts mehr geht */
.game .action-strip .primary{background:linear-gradient(180deg,#e3c275,#a57c32);color:#1a1206;border:1px solid #f4dc9c;
  box-shadow:0 0 0 1px #0008,0 8px 20px #000a,inset 0 1px 0 #fff6;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.game .action-strip .primary:disabled{filter:grayscale(.8) brightness(.6)}
.game .turn-copy.active{color:#f3dca8;text-shadow:0 0 14px #f1b85c66}
.game .action-strip .primary.is-last{animation:endturn-pulse 1.6s ease-in-out infinite}
@keyframes endturn-pulse{50%{box-shadow:0 0 0 1px #0008,0 0 28px #f1c26bcc,inset 0 1px 0 #fff6}}
@media (prefers-reduced-motion:reduce){.game .action-strip .primary.is-last{animation:none}}
/* Alles auf einen Bildschirm: kompakte Kopfzeilen, Anführer + Zugknopf in einer Reihe */
.game .opponent-tagline{display:none}
.topbar.game-header{height:48px}
.game .game-toolbar{margin:0 0 4px;min-height:0}
.game .arena{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
.game .arena>*{grid-column:1/-1}
.game .arena>.leader:not(.enemy){grid-column:1}
.game .arena>.action-strip{grid-column:2;padding:0}
.game .arena>.turn-guide{grid-column:1;margin:6px 0 0;font-size:12px}
.game .arena>.hand-label{grid-column:1/-1;margin:4px 0 0}
.game .arena>.hand{margin-top:-10px}
/* ===== Vollbild-Arena (Desktop): die Bühne füllt das Fenster, das HUD liegt darüber =====
   .battlefield wird fest aufs Fenster gelegt; syncStageRect folgt ihm, die Slot-Rahmen
   projizieren sich wie bisher aus den 3D-Ankern. Mobil bleibt der geprüfte Fluss. */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .topbar.game-header{position:relative;z-index:6;background:linear-gradient(180deg,#07080ae6,#07080a00);border-bottom:0}
  body.stage-on .game{max-width:none;padding:4px 24px 0;min-height:calc(100vh - 48px);display:flex;flex-direction:column}
  body.stage-on .game>*{position:relative;z-index:4}
  body.stage-on .game .game-layout,body.stage-on .game .game-layout.has-panel{flex:1;grid-template-columns:minmax(0,1fr)}
  body.stage-on .game .arena{grid-template-rows:auto 1fr}
  body.stage-on .game .arena-gap{min-height:120px}
  body.stage-on .game .battlefield{position:fixed;inset:0;z-index:1;pointer-events:none;padding:0}
  body.stage-on .game .battlefield .slot,body.stage-on .game .battlefield .unit{pointer-events:auto}
  body.stage-on .game .arena>:not(.battlefield):not(.arena-surface){position:relative;z-index:4}
  body.stage-on .game .leader.enemy{width:min(760px,64vw);justify-self:center;background:linear-gradient(180deg,#221719f0,#0f0b0cf0)}
  body.stage-on .game .leader:not(.enemy){background:linear-gradient(180deg,#1f1b17f0,#0e0d0cf0)}
  body.stage-on .game .selection-panel.is-open{position:fixed;right:18px;top:96px;width:320px;max-height:calc(100vh - 330px);overflow:auto;z-index:7;
    background:#0f0e0df2;border:1px solid #6d5630;box-shadow:0 20px 50px #000c}
  body.stage-on .game .turn-guide{background:#0b0a09cc;padding:6px 10px;border-radius:4px}
  body.stage-on .game .hand-label{opacity:.7}
}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game .arena{min-height:calc(100vh - 92px);align-content:stretch}
  body.stage-on .game .arena,body.stage-on .game .game-layout,body.stage-on .game .hand,body.stage-on .game .action-strip{background:transparent}
  body.stage-on .game .hand{padding-bottom:6px}
}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){body.stage-on .game .hand{backdrop-filter:none}}
/* ===== HUD-Grundlage (Platzhalter bis zu den UI-PNGs des Nutzers): Ecken-Porträts,
   Hand-Tisch unten, runder Zug-Knopf rechts. Nur Position/Grundform, Stil folgt den PNGs. */
.leader-portrait,.leader-hpbar,.chi-orbs{display:none}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .topbar.game-header{display:none}
  body.stage-on .game .game-toolbar{position:fixed;top:8px;right:16px;z-index:10;margin:0}
  body.stage-on .game .game-toolbar>.eyebrow{display:none}
  body.stage-on .game .leader{position:fixed;left:16px;z-index:9;width:410px;min-height:100px;padding:10px 14px 10px 112px;display:block}
  body.stage-on .game .leader.enemy{top:12px;width:430px}
  body.stage-on .game .leader:not(.enemy){bottom:16px;top:auto}
  body.stage-on .game .leader-portrait{display:block;position:absolute;left:10px;top:50%;transform:translateY(-50%);width:88px;height:88px;border-radius:50%;overflow:hidden;border:3px solid #caa04e;box-shadow:0 0 0 2px #000,0 6px 16px #000c;background:#111}
  body.stage-on .game .leader-portrait>img,body.stage-on .game .leader-portrait .card-image img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
  body.stage-on .game .leader-portrait .leader-crest{position:absolute;right:-2px;bottom:-2px;width:26px!important;height:26px!important;opacity:1;background:#0d0c0b;border-radius:50%;border:1px solid #caa04e}
  body.stage-on .game .leader>img{display:none}
  body.stage-on .game .leader-hpbar{display:block;height:15px;margin:6px 0 4px;background:#240b0b;border:1px solid #7a4a2a;border-radius:3px;overflow:hidden}
  body.stage-on .game .leader-hpbar i{display:block;height:100%;background:linear-gradient(180deg,#f06a5a,#a5161a 60%,#6d0c10);transition:width .4s}
  body.stage-on .game .leader-health{position:absolute;right:12px;top:10px;min-width:0;padding:2px 10px;font-size:18px}
  body.stage-on .game .resource{position:absolute;right:14px;bottom:10px}
  body.stage-on .game .chi-orbs{display:flex;gap:5px}
  body.stage-on .game .chi-orbs i{width:15px;height:15px;border-radius:50%;background:#16202c;border:1px solid #4a6a90}
  body.stage-on .game .chi-orbs i.on{background:radial-gradient(circle at 35% 30%,#c9ecff,#2a86e0 60%,#0b3a7a);box-shadow:0 0 10px #4aa8ff}
  body.stage-on .game .enemy-hand{position:fixed;top:0;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:8}
  body.stage-on .game .enemy-hand i{width:50px;height:70px;margin-top:-22px;border-radius:5px;background:linear-gradient(160deg,#3a1414,#140707);border:2px solid #b8913f;box-shadow:0 6px 14px #000b}
  body.stage-on .game-layout::after{content:'';position:fixed;left:0;right:0;bottom:0;height:120px;z-index:3;pointer-events:none;
    background:linear-gradient(180deg,#4a2e18 0,#2b1a0c 55%,#170d06);border-top:2px solid #9a7438;box-shadow:0 -12px 34px #000a}
  body.stage-on .game .hand{position:fixed;left:50%;bottom:-26px;transform:translateX(-50%);width:min(1000px,58vw);z-index:9;margin:0;padding:24px 20px 0;min-height:0}
  body.stage-on .game .hand .card{flex:0 0 118px;width:118px;height:174px}
  body.stage-on .game .action-strip{position:fixed;right:26px;bottom:26px;z-index:9;flex-direction:column;gap:8px;align-items:center}
  body.stage-on .game .action-strip .primary{width:128px;height:128px;min-width:0;border-radius:50%;padding:0 12px;font-size:13px;line-height:1.2;justify-content:center;border:3px solid #f4dc9c;box-shadow:0 0 0 3px #3a2410,0 10px 26px #000c}
  body.stage-on .game .turn-copy{text-align:center;background:#0d0b09d9;padding:6px 12px;border:1px solid #6d5630;border-radius:6px}
  body.stage-on .game .turn-guide{position:fixed;top:62px;right:16px;z-index:9;max-width:300px;font-size:12px}
  body.stage-on .game .hand-label{position:fixed;right:176px;bottom:22px;z-index:9;flex-direction:column;gap:4px;opacity:.9;background:#0d0b09cc;padding:6px 10px;border:1px solid #6d5630;border-radius:6px}
  body.stage-on .game .selection-panel.is-open{top:130px;right:16px}
}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){body.stage-on .game .arena>.leader,body.stage-on .game .arena>.hand,body.stage-on .game .arena>.action-strip,body.stage-on .game .arena>.turn-guide,body.stage-on .game .arena>.hand-label{position:fixed;grid-column:auto}body.stage-on .game .arena>.leader.enemy{justify-self:auto}body.stage-on .game .arena-gap{display:none}}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){body.stage-on .game .arena>.leader,body.stage-on .game .arena>.hand,body.stage-on .game .arena>.action-strip,body.stage-on .game .arena>.turn-guide,body.stage-on .game .arena>.hand-label{position:fixed!important}}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){body.stage-on .game .leader{backdrop-filter:none!important}}
/* ===== HUD-Leisten (Nutzer-PNGs, wählbar): Kulisse + echte Werte darüber ===== */
.hud-skin,.hud-skin-pick{display:none}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .hud-skin-pick{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#d8c6ac}
  body.stage-on .hud-skin-pick select{background:#120d0a;color:#f1dcae;border:1px solid #6d5630;border-radius:4px;padding:4px 6px;font-size:11px}
  body.stage-on .game.has-hud-skin{--W:min(100vw,150vh);--H:calc(var(--W) * var(--hud-ratio));--card-h:calc(var(--H) * var(--hand-h) * 0.95);--card-w:calc(var(--card-h) * 0.69)}
  body.stage-on .game.has-hud-skin .hud-skin{display:block;position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:var(--W);height:calc(var(--W) * var(--ratio));z-index:8;pointer-events:none;font-size:calc(var(--W) * 0.0105);color:#f4e6c8}
  .hud-skin>*{position:absolute}
  .hud-skin .hud-skin-art{left:0;top:0;width:100%;height:100%;user-select:none;filter:drop-shadow(0 -6px 18px #000a)}
  .hud-skin .hud-portrait{border-radius:50%;overflow:hidden;background:#0d0908;box-shadow:inset 0 0 12px #000}
  .hud-skin .hud-portrait img,.hud-skin .hud-portrait .card-image img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
  .hud-skin .hud-portrait .card-image{display:block;width:100%;height:100%}
  .hud-skin .hud-name{display:flex;flex-direction:column;justify-content:center;padding:0 .7em;background:linear-gradient(90deg,#140d0bf2,#140d0bd9);border-radius:.4em;overflow:hidden}
  .hud-skin .hud-name b{font:600 1.35em/1.1 Georgia,'Times New Roman',serif;color:#f6e3b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-skin .hud-name small{font-size:.8em;color:#c9b48c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-skin .hud-hp{background:#220808;border-radius:.35em;overflow:hidden;box-shadow:inset 0 0 0 1px #000}
  .hud-skin .hud-hp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#ff7466,#c21b1f 55%,#7d0b10);transition:width .45s}
  .hud-skin .hud-hp b{position:relative;display:flex;height:100%;align-items:center;justify-content:center;font:700 1.25em Georgia,serif;text-shadow:0 1px 3px #000,0 0 6px #000}
  .hud-skin .hud-orbs{display:flex;align-items:center;justify-content:space-between;gap:.4em;padding:0 .8em;background:linear-gradient(90deg,#0d0b0cf2,#120e0cf2);border-radius:2em}
  .hud-skin .hud-orbs>span{display:flex;gap:.28em;flex-wrap:nowrap}
  .hud-skin .hud-orbs i{width:1.35em;height:1.35em;border-radius:50%;background:#15202c;border:1px solid #4a6a90}
  .hud-skin .hud-orbs i.on{background:radial-gradient(circle at 35% 30%,#dff4ff,#3a96f0 55%,#0b3a7a);box-shadow:0 0 .7em #4aa8ff,0 0 1.4em #2a7fd688}
  .hud-skin[data-theme="sakura"] .hud-orbs i{background:#2a1420;border-color:#9a4a78}
  .hud-skin[data-theme="sakura"] .hud-orbs i.on{background:radial-gradient(circle at 35% 30%,#ffe6f4,#ff4fb4 55%,#8a0f5c);box-shadow:0 0 .7em #ff5fc0,0 0 1.4em #ff2fa088}
  .hud-skin .hud-orbs b{font:700 1.3em/1 Georgia,serif;text-align:center;white-space:nowrap}
  .hud-skin .hud-orbs b small{display:block;font:500 .6em system-ui,sans-serif;letter-spacing:.08em;color:#c9b48c}
  .hud-skin .hud-end{pointer-events:auto;border:0;border-radius:50%;background:transparent;cursor:pointer;color:transparent;font-size:0;transition:box-shadow .2s,filter .2s}
  .hud-skin .hud-end:hover:not(:disabled),.hud-skin .hud-end:focus-visible{box-shadow:0 0 0 3px #f6d58a,0 0 2.2em #ffb85c}
  .hud-skin .hud-end:disabled{background:radial-gradient(circle,#000a 55%,#0006);cursor:default}
  .hud-skin .hud-end.is-last{animation:hud-end-pulse 1.5s ease-in-out infinite}
  @keyframes hud-end-pulse{50%{box-shadow:0 0 0 3px #f6d58a,0 0 2.6em #ffb85ccc}}
  .hud-skin .hud-count{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0e0b0af2;border:1px solid #6d5630;border-radius:.3em;line-height:1}
  .hud-skin .hud-count small{font-size:.75em;color:#c9b48c}
  .hud-skin .hud-count b,.hud-skin .hud-count button{font:700 1.4em Georgia,serif;color:#fff2d6;background:none;border:0;padding:0;pointer-events:auto;cursor:pointer}
  /* bisherige Elemente an die Leiste anpassen */
  body.stage-on .game.has-hud-skin .game-layout::after{display:none}
  body.stage-on .game.has-hud-skin .arena>.hand-label{display:none}
  body.stage-on .game.has-hud-skin .action-strip .primary{display:none}
  body.stage-on .game.has-hud-skin .action-strip{top:52px;bottom:auto;right:16px}
  body.stage-on .game.has-hud-skin .arena>.leader:not(.enemy){bottom:calc(var(--H) * 0.93);left:16px;width:auto;min-height:0;padding:6px 10px;background:#0e0b0ad9}
  body.stage-on .game.has-hud-skin .arena>.leader:not(.enemy)>:not(div),body.stage-on .game.has-hud-skin .arena>.leader:not(.enemy) .leader-name,body.stage-on .game.has-hud-skin .arena>.leader:not(.enemy) .leader-caption{display:none}
  body.stage-on .game.has-hud-skin .arena>.leader:not(.enemy):not(:has(.leader-ultimate,.leader-place)){display:none}
  body.stage-on .game.has-hud-skin .arena>.hand{left:calc(50vw - var(--W) / 2 + var(--W) * var(--hand-x));top:calc(100vh - var(--H) + var(--H) * var(--hand-y));bottom:auto;width:calc(var(--W) * var(--hand-w));height:calc(var(--H) * var(--hand-h));transform:none;padding:0;margin:0;align-items:center;justify-content:space-evenly;gap:0;z-index:9;overflow:visible}
  body.stage-on .game.has-hud-skin .hand .card{flex:0 0 var(--card-w);width:var(--card-w);height:var(--card-h);margin:0;transform:none;transform-origin:50% 100%}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(6)) .card{margin:0 calc(var(--card-w) * -0.1)}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(7)) .card{margin:0 calc(var(--card-w) * -0.2)}
  body.stage-on .game.has-hud-skin .hand .card:hover,body.stage-on .game.has-hud-skin .hand .card:focus-visible{transform:translateY(-58%) scale(1.55);z-index:30}
  body.stage-on .game.has-hud-skin .hand .card.is-selected{transform:translateY(-22%) scale(1.12)}
}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game.has-hud-skin .hud-skin{z-index:3}
  body.stage-on .game.has-hud-skin .game-layout,body.stage-on .game.has-hud-skin .arena{pointer-events:none}
  body.stage-on .game.has-hud-skin .arena>:not(.battlefield),body.stage-on .game.has-hud-skin .selection-panel{pointer-events:auto}
  .hud-skin .hud-orbs,.hud-skin .hud-name,.hud-skin .hud-count{background:#0e0b0b}
}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game.has-hud-skin .hud-enemy{display:block;position:fixed;left:50%;top:0;transform:translateX(-50%);width:min(58vw,90vh);height:calc(min(58vw,90vh) * var(--ratio));z-index:8;font-size:calc(min(58vw,90vh) * 0.017);color:#f4e6c8;pointer-events:none;filter:drop-shadow(0 8px 18px #000b)}
  body.stage-on .game.has-hud-skin .hud-enemy.potential{pointer-events:auto;cursor:crosshair;filter:drop-shadow(0 0 14px #ff5a3a) drop-shadow(0 8px 18px #000b)}
  .hud-enemy>*{position:absolute}
  .hud-enemy .hud-skin-art{left:0;top:0;width:100%;height:100%}
  .hud-enemy .hud-name,.hud-enemy .hud-turn{display:flex;flex-direction:column;justify-content:center;padding:0 .6em;background:#0e0b0b;border-radius:.3em;overflow:hidden}
  .hud-enemy .hud-name b{font:600 1.15em/1.1 Georgia,serif;color:#f6e3b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-enemy .hud-name small,.hud-enemy .hud-turn small{font-size:.75em;color:#c9b48c;white-space:nowrap}
  .hud-enemy .hud-turn{align-items:center;text-align:center}
  .hud-enemy .hud-turn b{font:600 1.2em Georgia,serif}
  .hud-enemy .hud-hp{background:#220808;border-radius:.3em;overflow:hidden}
  .hud-enemy .hud-hp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#ff7466,#c21b1f 55%,#7d0b10);transition:width .45s}
  .hud-enemy .hud-hp b{position:relative;display:flex;height:100%;align-items:center;justify-content:center;font:700 1.05em Georgia,serif;text-shadow:0 1px 3px #000}
  .hud-enemy .hud-enemy-cards{display:flex}
  .hud-enemy .hud-enemy-cards i{flex:1;margin:0 1%;border-radius:.3em;transition:background .3s}
  .hud-enemy .hud-enemy-cards i.gone{background:#0b0807e6}
  .hud-enemy .hud-enemy-cards em{position:absolute;right:-.4em;top:-.4em;font:700 1em Georgia,serif;background:#7a1016;border:1px solid #d6ae5c;border-radius:1em;padding:0 .4em}
  body.stage-on .game.has-hud-skin .arena>.leader.enemy{display:none}
  body.stage-on .game.has-hud-skin .game-toolbar{top:auto;bottom:auto;top:calc(min(58vw,90vh) * var(--enemy-r,0.26) + 6px)}
  body.stage-on .game.has-hud-skin .turn-guide,body.stage-on .game.has-hud-skin .action-strip{top:calc(min(58vw,90vh) * 0.26 + 48px)}
  body.stage-on .game.has-hud-skin .selection-panel.is-open{top:calc(min(58vw,90vh) * 0.26 + 96px)}
}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){body.stage-on .game.has-hud-skin .turn-copy{display:none}}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){body.stage-on .game.has-hud-skin .selection-panel.is-open{max-height:calc(100vh - var(--H) * 0.62 - min(58vw,90vh) * 0.26 - 110px)}body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(8)) .card{margin:0 calc(var(--card-w) * -0.26)}body.stage-on .game.has-hud-skin .arena>.leader:not(.enemy){bottom:calc(var(--H) * 0.72)}}
/* ===== Endbildschirm: Vollbild, Pinsel-Titel, Kanji (Referenz „Victory“) ===== */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game .finished-banner{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:0;border:0;
    background:radial-gradient(ellipse at 50% 45%,#1a0d0acc 0%,#0a0605ee 60%,#050303 100%);animation:finish-in .6s ease-out both}
  body.stage-on .game .finished-banner .finish-title{font:700 clamp(40px,7vw,120px)/1 'Yu Mincho','MS Mincho',serif;letter-spacing:.1em;color:#e8c070;
    text-shadow:0 0 30px #ffb24a88,0 6px 0 #5a2a08,0 10px 30px #000;margin-bottom:6px}
  body.stage-on .game .finished-banner .finish-title b{display:block;font:italic 700 clamp(48px,6vw,104px)/1.05 Georgia,serif;letter-spacing:.02em;
    background:linear-gradient(180deg,#fff1c6,#e4b35a 45%,#8a5418 90%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 6px 10px #000)}
  body.stage-on .game .finished-banner.is-loss .finish-title{color:#c83a2e;text-shadow:0 0 30px #ff2a1a66,0 6px 0 #3a0806,0 10px 30px #000}
  body.stage-on .game .finished-banner.is-loss .finish-title b{background:linear-gradient(180deg,#ffd0c6,#d0463a 50%,#5a0e0a 95%);-webkit-background-clip:text;background-clip:text}
  body.stage-on .game .finished-banner .eyebrow{letter-spacing:.4em;color:#d8b77a;border-top:1px solid #8a6a2e;border-bottom:1px solid #8a6a2e;padding:6px 28px;margin:10px 0}
  body.stage-on .game .finished-banner h2{font:600 24px Georgia,serif;color:#f1e2c0;margin:6px 0}
  body.stage-on .game .finished-banner p{color:#cbb994}
  body.stage-on .game .finished-banner .button-row{margin-top:26px;gap:16px}
  body.stage-on .game .finished-banner .primary{background:linear-gradient(180deg,#b3261e,#6d0f0c);border:2px solid #e2b861;color:#fff1d6;min-width:220px;min-height:52px;font:600 16px Georgia,serif;box-shadow:0 0 22px #b3261e66}
  body.stage-on .game .finished-banner .secondary{background:#120d0b;border:2px solid #8a6a2e;color:#f1e2c0;min-width:200px;min-height:52px;font:600 16px Georgia,serif}
  body.stage-on .game:has(.finished-banner) .hud-skin,body.stage-on .game:has(.finished-banner) .hud-enemy{filter:blur(2px) brightness(.5)}
  @keyframes finish-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){body.stage-on .game .finished-banner{animation:none}}
/* HUD-Leiste näher heran: breiter als der Schirm (Katana-Enden laufen raus), tiefer gesetzt. */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game.has-hud-skin{--W:min(122vw,190vh);--drop:calc(var(--H) * 0.16)}
  body.stage-on .game.has-hud-skin .hud-skin{bottom:calc(var(--drop) * -1)}
  body.stage-on .game.has-hud-skin .arena>.hand{top:calc(100vh - var(--H) + var(--drop) + var(--H) * var(--hand-y))}
  body.stage-on .game.has-hud-skin .arena>.leader:not(.enemy){bottom:calc(var(--H) * 0.62)}
  body.stage-on .game.has-hud-skin .hud-enemy{width:min(56vw,88vh);height:calc(min(56vw,88vh) * var(--ratio));top:-.6vh;font-size:calc(min(56vw,88vh) * 0.017)}
  body.stage-on .game.has-hud-skin .game-toolbar{top:calc(min(56vw,88vh) * 0.26 + 4px)}
  body.stage-on .game.has-hud-skin .turn-guide,body.stage-on .game.has-hud-skin .action-strip{top:calc(min(56vw,88vh) * 0.26 + 46px)}
  body.stage-on .game.has-hud-skin .selection-panel.is-open{top:calc(min(56vw,88vh) * 0.26 + 92px);max-height:calc(100vh - (var(--H) - var(--drop)) * 0.7 - min(56vw,88vh) * 0.26 - 100px)}
}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){body.stage-on .game.has-hud-skin{--W:min(96vw,140vh);--drop:calc(var(--H) * 0.12)}}
/* Nutzer 26.09.: Pult „weiter weg“ auf großen Schirmen; schmale Fenster (760–1199 px) brauchen die Breite für die Hand. */
@media (min-width:1200px){body.stage-on .game.has-hud-skin{--W:min(82vw,128vh)}}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){body.stage-on .game.has-hud-skin .arena>.hand .card{min-width:0!important}}
/* Spielbare Karte: dezenter Goldschimmer statt grünem Rand */
.game .hand .card:not(.is-unplayable){box-shadow:0 0 0 1px #e8c87a99,0 0 16px #f0b85a55,0 10px 24px #000b!important}
.game .hand .card.is-unplayable{filter:saturate(.5) brightness(.6)}
/* Freie Kamera */
.free-cam-btn{position:fixed;right:16px;top:calc(min(56vw,88vh) * 0.26 + 44px);z-index:11;background:#120d0bee;color:#f1dcae;border:1px solid #8a6a2e;border-radius:6px;padding:6px 12px;font:600 12px Georgia,serif;cursor:pointer}
.free-cam-btn[aria-pressed=true]{background:#7a1016;border-color:#f1cf7e}
body:not(.stage-on) .free-cam-btn{display:none}
body.free-cam #stage-host{pointer-events:auto;z-index:2;cursor:grab}
body.free-cam #stage-host:active{cursor:grabbing}
body.free-cam .game .battlefield{visibility:hidden}
.free-cam-btn{top:auto;bottom:calc(var(--H,200px) * 0.72 + 8px);right:18px}
.free-cam-btn{top:14px;bottom:auto;right:auto;left:16px}
/* --- Gespielte Karten (play-rail.js): Master-Duel-Prinzip, eigene gold / Gegner rot ---------- */
.play-rail{position:fixed;left:14px;top:64px;z-index:40;width:188px;max-height:calc(100vh - 420px);min-height:120px;overflow:hidden;padding:8px 8px 10px;
  background:linear-gradient(180deg,#140d0bf0,#0c0808e6);border:1px solid #b8913f80;border-radius:6px;box-shadow:0 10px 30px #000a,inset 0 0 0 1px #00000080;pointer-events:auto}
.play-rail[hidden]{display:none}
.play-rail h3{margin:0 0 6px;font:14px var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#e8cf8e;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #b8913f50;padding-bottom:5px}
.play-rail h3 small{font-size:15px;color:#b8913f;letter-spacing:0}
.play-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rail-item{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:3px 5px 3px 3px;border-radius:4px;cursor:help;
  background:linear-gradient(90deg,#b8913f24,transparent 80%);border-left:3px solid #d9b25c}
.rail-item.is-foe{background:linear-gradient(90deg,#b8323224,transparent 80%);border-left-color:#d8433e}
.rail-item.is-new{animation:railIn .45s ease-out}
.rail-item:hover{background:linear-gradient(90deg,#ffffff1c,transparent)}
.rail-art{grid-row:1/3;width:34px;height:48px;border-radius:3px;overflow:hidden;border:1px solid #d9b25c;background:#0b0b0d}
.is-foe .rail-art{border-color:#d8433e}
.rail-art img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.rail-name{font:12px/1.15 var(--serif);color:#f2e6cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-tag{display:none}
.rail-kind{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#c9a55a}
.is-foe .rail-kind{color:#e0716b}
.is-foe .rail-kind:before{content:'Enemy · '}
.is-own .rail-kind:before{content:'You · '}
.rail-empty{font-size:10px;color:#9d917f;padding:6px 2px}
.play-rail-pop{position:fixed;z-index:60;width:230px;pointer-events:none;filter:drop-shadow(0 18px 30px #000c)}
.play-rail-pop[hidden],.play-reveal[hidden]{display:none}
.play-rail-pop .card,.play-reveal .card{width:100%;max-width:none;height:auto;aspect-ratio:2/3;margin:0;border:2px solid #d9b25c;transform:none}
.play-rail-pop[data-side="foe"] .card,.play-reveal[data-side="foe"] .card{border-color:#d8433e}
/* 18.10.: Gegnerkarte kleiner + an den Rand (lag gross ueber dem Feld, Video 0432) */
.play-reveal{position:fixed;z-index:58;left:214px;top:9vh;width:clamp(130px,11vw,170px);pointer-events:none;filter:drop-shadow(0 0 26px #d8433e88) drop-shadow(0 20px 40px #000)}
.play-reveal.is-in{animation:revealIn 1.9s cubic-bezier(.2,.8,.2,1) both}
.reveal-tag{display:block;text-align:center;margin-bottom:6px;font:13px var(--serif);letter-spacing:.2em;text-transform:uppercase;color:#ffd9d0;text-shadow:0 2px 6px #000}
@keyframes railIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes revealIn{0%{opacity:0;transform:translateX(-40px) scale(.8) rotateY(70deg)}14%{opacity:1;transform:none}82%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-20px) scale(.95)}}
@media (prefers-reduced-motion:reduce){.rail-item.is-new,.play-reveal.is-in{animation:none}}
@media (max-width:900px){.play-rail{width:56px;padding:6px 4px}.play-rail h3,.rail-name,.rail-kind{display:none}.rail-item{grid-template-columns:1fr;padding:2px}}
/* V4 personal reserve; distinct from the shared Supply shown beside each leader. */
.unit-chi{position:absolute;right:7px;top:34px;padding:3px 6px;border:1px solid #65dce06b;border-radius:4px;background:#07181de8;color:#b4f5f5;font-size:10px;font-weight:700;letter-spacing:.03em}

/* Seitenfluegel der Tischleiste (Claude 24.09.): Lackholz mit Goldkante schliesst die schmalere Leiste bis zum Bildrand. */
body.stage-on .game.has-hud-skin .hud-wing{position:absolute;bottom:var(--drop,0px);height:calc(var(--H) * 0.36);z-index:-1;pointer-events:none;
  width:calc((100vw - var(--W)) / 2 + var(--W) * 0.05);
  background:linear-gradient(180deg,#e2c173 0 2px,#6b4a1c 2px 3px,transparent 3px 11px,#b8924a55 11px 12px,transparent 12px),
    repeating-linear-gradient(45deg,transparent 0 13px,#d9b25c12 13px 14px),repeating-linear-gradient(-45deg,transparent 0 13px,#d9b25c12 13px 14px),
    linear-gradient(180deg,#2c1a10,#150c07 62%,#0c0704);
  box-shadow:0 -12px 26px #0009,inset 0 10px 18px #0008}
body.stage-on .game.has-hud-skin .hud-wing.left{right:calc(100% - var(--W) * 0.05);border-top-right-radius:18px}
body.stage-on .game.has-hud-skin .hud-wing.right{left:calc(100% - var(--W) * 0.05);border-top-left-radius:18px}
body.stage-on .game.has-hud-skin .hud-wing::after{content:'';position:absolute;top:34%;width:clamp(18px,1.8vw,30px);aspect-ratio:1;transform:rotate(45deg);
  border:2px solid #d9b25c;background:radial-gradient(circle,#b8323a 0 28%,#2c1a10 30%);box-shadow:0 0 12px #f0b85a55}
body.stage-on .game.has-hud-skin .hud-wing.left::after{left:clamp(16px,2.4vw,40px)}
body.stage-on .game.has-hud-skin .hud-wing.right::after{right:clamp(16px,2.4vw,40px)}
body.stage-on .game.has-hud-skin .hud-skin[data-theme="sakura"] .hud-wing{
  background:linear-gradient(180deg,#f3a9c2 0 2px,#7a2c48 2px 3px,transparent 3px 11px,#e58aa955 11px 12px,transparent 12px),
    repeating-linear-gradient(45deg,transparent 0 13px,#f3a9c214 13px 14px),repeating-linear-gradient(-45deg,transparent 0 13px,#f3a9c214 13px 14px),
    linear-gradient(180deg,#3a1422,#1a0910 62%,#0f0509)}
body.stage-on .game.has-hud-skin .hud-skin[data-theme="sakura"] .hud-wing::after{border-color:#f3a9c2;background:radial-gradient(circle,#f06a95 0 28%,#3a1422 30%)}

/* Karten-Fokus gross (Claude 24.09.): ganze Karte + Regeln lesbar, rechts ueber dem End-Turn-Knopf; "–" klappt zur Kopfzeile ein. */
.selection-head .focus-name{display:none}
.selection-head .focus-min{margin-left:auto}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game .selection-panel.is-open.has-card{top:150px;right:16px;bottom:35vh;width:min(600px,40vw);max-height:none;height:auto;
    display:grid;grid-template-columns:minmax(190px,40%) 1fr;column-gap:22px;align-content:start;align-items:start;
    padding:16px 20px 18px;overflow:auto;z-index:9;transform:none;border-radius:14px;
    background:linear-gradient(160deg,#1b130cf2,#0c0806f5);border:1px solid #8a6a2e;box-shadow:0 0 0 1px #000,0 30px 70px #000d,inset 0 1px 0 #f1cf7e22}
  body.stage-on .game .selection-panel.is-open.has-card>*{grid-column:2;min-width:0}
  body.stage-on .game .selection-panel.is-open.has-card>.selection-head{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0 0 12px}
  body.stage-on .game .selection-panel.is-open.has-card>.card{grid-column:1;grid-row:2/span 14;width:100%;height:auto;aspect-ratio:2/3;max-width:none;margin:0;transform:none;
    position:sticky;top:0;filter:drop-shadow(0 12px 24px #000c)}
  body.stage-on .game .selection-panel.is-open.has-card>h3{font-size:24px;line-height:1.15;margin:0 0 8px}
  body.stage-on .game .selection-panel.is-open.has-card .selection-rules p{font-size:15px;line-height:1.6}
  body.stage-on .game .selection-panel.is-open.has-card .selection-prompt{font-size:14px;padding:10px 12px;border:1px solid #d9b25c55;border-radius:8px;background:#d9b25c12}
  body.stage-on .game .selection-panel .focus-min{width:34px;height:34px;border-radius:50%;border:1px solid #8a6a2e;background:#20150d;color:#f1e6cf;font-size:18px;line-height:1;cursor:pointer}
  body.stage-on .game .selection-panel .focus-min:hover{border-color:#f1cf7e}
  /* eingeklappt: nur Kopfzeile mit Kartenname, oben rechts */
  body.stage-on .game .selection-panel.is-open.is-min{bottom:auto;width:auto;max-width:min(460px,40vw);display:block;padding:8px 10px 8px 16px}
  /* 10.10.: Anleitung + Bestätigen bleiben auch eingeklappt sichtbar (Nutzer: „kein Legen-Knopf“) */
  body.stage-on .game .selection-panel.is-open.is-min>:not(.selection-head):not(.selection-prompt):not([data-do="confirm-action"]){display:none}
  body.stage-on .game .selection-panel.is-open.is-min>.selection-prompt{display:block;margin:8px 0 0;font-size:15px;line-height:1.35}
  body.stage-on .game .selection-panel.is-open.is-min>[data-do="confirm-action"]{display:inline-flex;margin:8px 0 0}
  body.stage-on .game .selection-panel.is-open.is-min>.selection-head{margin:0}
  body.stage-on .game .selection-panel.is-open.is-min .focus-name{display:inline;margin-left:8px;font:600 15px Georgia,serif;letter-spacing:.02em;color:#f1e6cf;text-transform:none}
}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game .selection-panel.is-open.has-card{bottom:auto;max-height:calc(65vh - 150px)}
  body.stage-on .game .selection-panel.is-open.has-card>.card .card-rules{display:none}
}