:root{--ink:#17120e;--paper:#e5dcc5;--paper2:#cfc3a6;--red:#9c2d24;--green:#435848;--gold:#c69845;--muted:#8e826b;--line:rgba(229,220,197,.22)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:Manrope,Arial,sans-serif}button,a{color:inherit}button{font:inherit}.topbar{height:68px;padding:0 3.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.14em}.topbar a{text-decoration:none;font-weight:700}.topbar b{color:var(--red);margin-right:8px}.sound{border:0;background:0;padding:10px;cursor:pointer;font-size:10px;letter-spacing:.1em}.intro{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);position:relative;display:grid;grid-template-columns:.7fr 1.6fr .7fr;align-items:center;overflow:hidden;padding:6vw 4vw}.intro:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,#3b3024 0,transparent 42%),repeating-linear-gradient(90deg,transparent 0 10vw,rgba(229,220,197,.025) 10vw calc(10vw + 1px));pointer-events:none}.intro-mark{font:400 clamp(170px,24vw,410px)/.7 "PT Serif",serif;color:transparent;-webkit-text-stroke:1px rgba(229,220,197,.17);transform:rotate(-90deg);justify-self:center}.intro-copy{z-index:1}.eyebrow,.micro{font-size:10px;letter-spacing:.17em;color:var(--gold);margin:0 0 25px}.intro h1,.section-head h2,.rules h2{margin:0;font-size:clamp(58px,8vw,126px);line-height:.8;letter-spacing:-.065em;font-weight:650}.intro h1 em,.section-head h2 em,.rules h2 em{font-family:"PT Serif",serif;font-weight:400}.lead{font:400 clamp(18px,1.7vw,27px)/1.45 "PT Serif",serif;max-width:690px;margin:42px 0 34px}.primary{padding:15px 20px;border:1px solid var(--paper);background:var(--paper);color:var(--ink);cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.primary:hover{background:var(--gold);border-color:var(--gold)}.intro-note{align-self:end;z-index:1;border-top:1px solid var(--gold);padding-top:16px;font-size:12px;line-height:1.6}.intro-note span{color:var(--gold);font-size:9px;letter-spacing:.15em}.case-select{padding:110px 4vw;background:var(--paper2);color:var(--ink)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:60px}.section-head h2{font-size:clamp(48px,6.5vw,96px)}.section-head>p{max-width:420px;line-height:1.7}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.case-card{padding:0;text-align:left;border:1px solid var(--ink);background:var(--paper);cursor:pointer;transition:transform .2s,box-shadow .2s}.case-card:hover{transform:translateY(-6px);box-shadow:0 14px 0 rgba(23,18,14,.15)}.case-art{height:280px;overflow:hidden;position:relative;background:#30271d}.case-art img{width:100%;height:100%;object-fit:cover;filter:sepia(.18) contrast(1.12)}.case-number{position:absolute;top:16px;left:16px;background:var(--red);color:white;padding:7px 9px;font-size:9px;letter-spacing:.12em}.case-body{padding:25px}.difficulty{font-size:9px;letter-spacing:.14em;color:var(--red)}.case-body h3{font:400 34px/1.05 "PT Serif",serif;margin:15px 0}.case-body p{font-size:12px;line-height:1.65;min-height:60px}.case-meta{display:flex;justify-content:space-between;border-top:1px solid rgba(23,18,14,.2);padding-top:16px;font-size:9px;letter-spacing:.1em}.game-shell{min-height:100vh;min-height:100dvh;background:#191510;padding:25px 3vw 0}.game-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-bottom:18px}.game-head h2{font:400 clamp(28px,3vw,45px)/1 "PT Serif",serif;margin:0}.game-head .eyebrow{margin-bottom:8px}.turn-box{text-align:center;border:1px solid var(--line);padding:10px 18px}.turn-box span{display:block;font-size:8px;letter-spacing:.15em}.turn-box strong{font:400 30px "PT Serif",serif}.text-button{background:none;border:0;text-decoration:underline;text-underline-offset:5px;cursor:pointer;font-size:10px;letter-spacing:.1em}.game-head>.text-button{justify-self:end}.table-wrap{display:grid;grid-template-columns:210px 1fr;border:1px solid var(--line);background:#211b15;min-height:610px}.opponent-panel{padding:22px;border-right:1px solid var(--line)}.opponent-panel h3{font:400 25px "PT Serif",serif;margin:-12px 0 18px}.portrait{height:205px;overflow:hidden;filter:sepia(.2);border:1px solid var(--line)}.portrait img{width:100%;height:100%;object-fit:cover}.intent-label{font-size:8px;color:var(--gold);letter-spacing:.13em;margin:25px 0 8px}.intent{font:italic 15px/1.45 "PT Serif",serif;min-height:66px}.hint{width:100%;margin-top:15px;padding:11px;background:transparent;color:var(--paper);border:1px solid var(--line);cursor:pointer;font-size:9px}.hint span{color:var(--gold)}.board{padding:18px 22px;display:flex;flex-direction:column}.score-line{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:12px}.score-line>div:first-child,.score-line>div:last-child{display:flex;gap:12px;align-items:baseline}.score-line>div:last-child{justify-content:flex-end}.score-line span{font-size:8px;letter-spacing:.15em}.score-line strong{font:400 32px "PT Serif",serif}.round-marks{display:flex;gap:7px}.round-marks i{width:8px;height:8px;border:1px solid var(--gold);border-radius:50%}.round-marks i.done{background:var(--gold)}.lanes{display:grid;gap:7px;flex:1}.lane{display:grid;grid-template-columns:96px 1fr 1fr;min-height:145px;border:1px solid var(--line);position:relative;background:rgba(229,220,197,.025);padding:8px;gap:10px}.lane.available{border-color:var(--gold);background:rgba(198,152,69,.07)}.lane-button{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;z-index:0}.lane:not(.available) .lane-button{pointer-events:none}.lane-name{z-index:1;border-right:1px solid var(--line);padding:10px;pointer-events:none}.lane-name strong{display:block;font:400 18px "PT Serif",serif}.lane-name span{font-size:8px;color:var(--muted);letter-spacing:.1em}.side{display:flex;align-items:center;gap:6px;z-index:1;pointer-events:none}.side.enemy{border-right:1px dashed var(--line)}.mini-card{height:118px;width:76px;background:var(--paper);color:var(--ink);position:relative;overflow:hidden;border:1px solid #0c0907;flex:0 0 auto}.mini-card img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) contrast(1.18)}.mini-card b{position:absolute;top:4px;left:4px;background:var(--ink);color:var(--paper);width:22px;height:22px;display:grid;place-items:center;font:400 15px "PT Serif",serif}.mini-card em{position:absolute;bottom:0;inset-inline:0;background:rgba(23,18,14,.88);color:var(--paper);font:normal 7px/1.2 Manrope,sans-serif;padding:4px}.status{text-align:center;padding:10px 0 0;font:italic 13px "PT Serif",serif;color:var(--gold);min-height:28px}.hand-zone{display:grid;grid-template-columns:190px 1fr 130px;align-items:center;gap:20px;padding:18px 0}.hand-copy p:last-child{font-size:9px;line-height:1.5;color:var(--muted)}.hand{display:flex;justify-content:center;gap:9px;min-height:188px}.card{width:118px;height:184px;padding:0;position:relative;background:var(--paper);color:var(--ink);border:1px solid #080604;cursor:pointer;overflow:hidden;transition:transform .15s}.card:hover,.card.selected{transform:translateY(-9px)}.card.selected{outline:3px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 6px #000}.card img{width:100%;height:100%;object-fit:cover;filter:sepia(.18) contrast(1.13)}.card .power{position:absolute;top:5px;left:5px;width:28px;height:28px;background:var(--red);color:white;display:grid;place-items:center;font:400 18px "PT Serif",serif}.card .row-icon{position:absolute;right:6px;top:8px;background:var(--ink);color:var(--paper);padding:5px;font-size:8px}.card-info{position:absolute;inset:auto 0 0;padding:8px;background:rgba(229,220,197,.94);text-align:left}.card-info strong{display:block;font:400 13px "PT Serif",serif}.card-info span{display:block;font-size:7px;line-height:1.35;margin-top:3px}.pass{background:none;border:1px solid var(--line);padding:12px;color:var(--paper);cursor:pointer;font-size:9px}.rules{padding:110px 5vw;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1fr 3fr;gap:5vw}.rules .eyebrow{color:var(--red)}.rules h2{font-size:clamp(46px,6vw,90px)}.rules ol{display:grid;grid-template-columns:repeat(3,1fr);padding:0;list-style:none;counter-reset:steps;gap:35px;margin-top:55px}.rules li{counter-increment:steps;font-size:13px;line-height:1.7;border-top:1px solid var(--ink);padding-top:20px}.rules li:before{content:"0" counter(steps);display:block;color:var(--red);font-size:10px;margin-bottom:18px}.rules li b{display:block;font:400 22px "PT Serif",serif;margin-bottom:10px}footer{padding:30px 4vw;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em}footer a{text-decoration:none}dialog{width:min(800px,92vw);padding:0;border:1px solid var(--ink);background:var(--paper);color:var(--ink)}dialog::backdrop{background:rgba(8,6,4,.8)}dialog[open]{display:grid;grid-template-columns:220px 1fr}.dialog-art{background:var(--red);color:var(--paper);display:grid;place-items:center;font:400 120px "PT Serif",serif}.dialog-copy{padding:45px}.dialog-copy .eyebrow{color:var(--red)}.dialog-copy h2{font:400 48px/1 "PT Serif",serif;margin:0 0 22px}.dialog-copy p{line-height:1.65}.dialog-actions{display:flex;gap:14px;align-items:center;margin-top:28px}.dialog-copy .primary{background:var(--ink);color:var(--paper)}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:900px){.intro{grid-template-columns:1fr;padding:80px 7vw}.intro-mark{position:absolute;right:-10vw;opacity:.5}.intro-note{margin-top:60px;max-width:300px}.case-grid{grid-template-columns:1fr}.case-art{height:350px}.game-shell{padding:18px}.table-wrap{grid-template-columns:1fr}.opponent-panel{display:grid;grid-template-columns:120px 1fr;column-gap:18px;border:0;border-bottom:1px solid var(--line)}.portrait{grid-row:1/5;height:130px}.opponent-panel .micro,.opponent-panel h3{grid-column:2}.opponent-panel h3{margin:0}.intent-label,.intent{grid-column:2}.hint{display:none}.hand-zone{grid-template-columns:1fr}.hand-copy{display:none}.hand{overflow-x:auto;justify-content:flex-start;padding:10px}.pass{justify-self:start}.rules{grid-template-columns:1fr}.section-head{display:block}.section-head>p{margin-top:30px}}
@media(max-width:580px){.topbar{height:56px;padding:0 12px;font-size:8px}.sound{display:none}.intro{min-height:calc(100vh - 56px);min-height:calc(100svh - 56px);padding:60px 20px}.intro h1{font-size:52px}.case-select,.rules{padding:70px 16px}.section-head h2{font-size:46px}.case-art{height:260px}.game-shell{padding:10px}.game-head{grid-template-columns:1fr auto}.game-head>.text-button{display:none}.game-head h2{font-size:24px}.table-wrap{min-height:0}.opponent-panel{padding:12px;grid-template-columns:80px 1fr}.portrait{height:95px}.intent{min-height:0;margin:4px 0;font-size:12px}.intent-label{margin:5px 0}.board{padding:10px 6px}.lane{grid-template-columns:58px 1fr 1fr;min-height:112px;padding:5px;gap:4px}.lane-name{padding:4px}.lane-name strong{font-size:13px}.lane-name span{font-size:6px}.mini-card{height:88px;width:55px}.mini-card em{display:none}.hand-zone{padding:8px 0}.hand{min-height:158px}.card{width:96px;height:150px;flex:0 0 auto}.rules ol{grid-template-columns:1fr}.score-line strong{font-size:24px}dialog[open]{grid-template-columns:1fr}.dialog-art{display:none}.dialog-copy{padding:28px}.dialog-copy h2{font-size:38px}footer{padding:25px 16px;gap:20px}}
.campaign-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);margin:-25px 0 38px}.campaign-strip>div{padding:17px 20px;border-right:1px solid var(--ink);display:flex;justify-content:space-between;align-items:center}.campaign-strip>div:last-child{border:0}.campaign-strip span{font-size:8px;letter-spacing:.14em}.campaign-strip strong{font:400 20px "PT Serif",serif}.case-card.locked{filter:grayscale(1);opacity:.5;cursor:not-allowed}.case-card.locked:hover{transform:none;box-shadow:none}.case-card.completed .case-number{background:var(--green)}.case-card.current{box-shadow:0 8px 0 var(--red)}.case-card.current .case-number{animation:pulse 1.8s infinite}.act-title{grid-column:1/-1;border-top:1px solid var(--ink);padding:24px 0 4px;margin-top:20px;display:flex;justify-content:space-between;align-items:end}.act-title:first-child{margin-top:0}.act-title h3{font:400 30px "PT Serif",serif;margin:0}.act-title span{font-size:9px;letter-spacing:.14em}.collection{margin-top:70px;border-top:1px solid var(--ink);padding-top:30px;display:grid;grid-template-columns:220px 1fr 2fr;gap:35px;align-items:center}.collection .eyebrow{color:var(--red);margin:0 0 8px}.collection h3{font:400 28px "PT Serif",serif;margin:0}.collection>p{font-size:11px;line-height:1.6}.reward-list{display:flex;gap:10px;flex-wrap:wrap}.reward-chip{width:92px;height:134px;position:relative;border:2px solid var(--gold);background:var(--ink);overflow:hidden;color:var(--paper)}.reward-chip img{width:100%;height:100%;object-fit:cover;filter:sepia(.2)}.reward-chip span{position:absolute;inset:auto 0 0;padding:5px;background:rgba(23,18,14,.88);font:9px "PT Serif",serif}.reward-chip.new{animation:rewardIn .7s both}.card.reward{border:2px solid var(--gold);box-shadow:0 0 16px rgba(198,152,69,.3)}.mini-card{animation:deal .35s both}.score-line strong.changed{animation:scorePop .35s}.reward-reveal{border-left:3px solid var(--gold);padding:12px 15px;margin:18px 0;background:rgba(198,152,69,.12)}.reward-reveal b{display:block;font:400 20px "PT Serif",serif}.reward-reveal span{font-size:11px}.table-wrap.shake{animation:shake .3s}.lane.flash{animation:laneFlash .45s}
@keyframes deal{from{opacity:0;transform:translateY(-8px) rotate(-2deg)}to{opacity:1;transform:none}}@keyframes scorePop{50%{transform:scale(1.35);color:var(--gold)}}@keyframes rewardIn{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(156,45,36,0)}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes laneFlash{50%{background:rgba(198,152,69,.22)}}
@media(max-width:900px){.campaign-strip{grid-template-columns:1fr}.campaign-strip>div{border-right:0;border-bottom:1px solid var(--ink)}.collection{grid-template-columns:1fr}.case-grid .act-title{margin-top:30px}}
@media(prefers-reduced-motion:reduce){.mini-card,.reward-chip.new,.case-card.current .case-number,.table-wrap.shake,.lane.flash{animation:none!important}}

/* Правила кона на столе: условие победы видно во время игры, а не только в итоговом окне. */
.round-rules{display:grid;grid-template-columns:1.15fr 1fr auto;gap:14px;align-items:start;padding:11px 13px;margin-bottom:12px;border:1px solid var(--line);background:rgba(229,220,197,.04)}
.round-rules .micro{display:block;margin:0 0 5px}
.round-rules p{margin:0;font:400 13px/1.45 "PT Serif",serif}
.rules-button{align-self:center;background:none;border:1px solid var(--line);color:var(--paper);padding:9px 11px;cursor:pointer;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.rules-button:hover{border-color:var(--gold);color:var(--gold)}
.rules-button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 6px #000}
/* Окно предыстории длиннее итогового — ему нужна прокрутка. */
#briefDialog .dialog-copy{max-height:min(86vh,780px);overflow:auto}
#briefDialog h3{font-size:10px;letter-spacing:.16em;color:var(--red);margin:26px 0 10px}
#briefDialog ul,#briefDialog ol{margin:0;padding-left:20px}
#briefDialog li{line-height:1.6;margin-bottom:7px}
#briefStory{font:400 17px/1.6 "PT Serif",serif}
/* План соперника на весь кон: цель «ровно 40» нельзя посчитать, не зная,
   когда по вашим картам ударят. На узком экране остаётся только текущий ход. */
.intent-plan{list-style:none;margin:0;padding:0;display:grid;gap:5px;min-height:0}
.intent-plan li{position:relative;padding-left:19px;opacity:.5;line-height:1.35}
.intent-plan li i{position:absolute;left:0;top:1px;font:normal 9px/1 Manrope,sans-serif;color:var(--muted);letter-spacing:.05em}
.intent-plan li.done{opacity:.3;text-decoration:line-through}
.intent-plan li.now{opacity:1;color:var(--gold)}
.intent-plan li.now i{color:var(--gold)}
@media(max-width:900px){.intent-plan{display:block}.intent-plan li:not(.now){display:none}}
/* Зверь — не украшение, а условие половины дел: капканы, Ламия и Симург
   работают только по зверям, поэтому метка нужна и в руке, и на столе. */
.beast-mark{position:absolute;left:5px;top:38px;background:var(--green);color:var(--paper);padding:3px 4px;font-size:7px;letter-spacing:.08em;z-index:2}
.mini-card .beast-dot{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--green);border:1px solid rgba(23,18,14,.6);z-index:2}
@media(max-width:900px){.round-rules{grid-template-columns:1fr}.rules-button{justify-self:start}}
@media(max-width:580px){.round-rules{padding:9px 10px}.round-rules p{font-size:12px}}
/* Рука к финалу вырастает до 13 карт — в одну строку она не помещается ни на
   телефоне, ни на десктопе, поэтому переносим, а не выпускаем за край экрана. */
.hand{flex-wrap:wrap}
/* В ряду к финалу скапливается по пять-шесть карт: они ужимаются по ширине,
   но не выталкивают стол за край экрана. */
.side{min-width:0}
.mini-card{flex:0 1 auto;min-width:0}

/* Игровой режим — самостоятельный стол ровно в один экран. */
body.game-active{overflow:hidden}
body.game-active>.topbar{display:none}
.game-shell:not([hidden]){position:fixed;inset:0;z-index:40;width:100vw;height:100vh;height:100dvh;min-height:0;padding:10px 14px;background:#191510;display:grid;grid-template-rows:minmax(45px,7vh) minmax(0,1fr) minmax(118px,22vh);overflow:hidden}
.game-shell .game-head{min-height:0;padding:0 2px 8px}
.game-shell .game-head h2{font-size:clamp(20px,2.5vw,36px)}
.game-shell .game-head .eyebrow{margin-bottom:3px;font-size:8px}
.game-shell .turn-box{padding:5px 14px}
.game-shell .turn-box strong{font-size:24px}
.game-shell .table-wrap{min-height:0;height:100%;overflow:hidden}
.game-shell .opponent-panel{min-height:0;padding:12px;overflow:hidden}
.game-shell .opponent-panel h3{font-size:19px;margin:-7px 0 8px}
.game-shell .portrait{height:min(20vh,155px)}
.game-shell .intent-label{margin:12px 0 4px}
.game-shell .intent{min-height:0;margin:0;font-size:12px}
.game-shell .hint{margin-top:9px;padding:7px}
.game-shell .board{min-height:0;padding:8px 12px;overflow:hidden}
.game-shell .round-rules{padding:6px 9px;margin-bottom:6px;gap:8px}
.game-shell .round-rules p{font-size:clamp(9px,1.25vh,12px);line-height:1.3}
.game-shell .rules-button{padding:6px 8px;font-size:7px}
.game-shell .score-line{min-height:25px;margin-bottom:4px}
.game-shell .score-line strong{font-size:24px}
.game-shell .lanes{min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));gap:5px}
.game-shell .lane{min-height:0;height:auto;padding:4px;gap:5px;grid-template-columns:78px minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.game-shell .lane-name{padding:5px}
.game-shell .lane-name strong{font-size:14px}
.game-shell .lane-name span{font-size:6px}
.game-shell .side{height:100%;overflow:hidden}
.game-shell .mini-card{height:min(12vh,96px);width:auto;aspect-ratio:76/118}
.game-shell .mini-card b{width:18px;height:18px;font-size:12px}
.game-shell .status{padding-top:4px;min-height:18px;font-size:10px}
.game-shell .hand-zone{min-height:0;padding:7px 0;gap:10px;grid-template-columns:140px minmax(0,1fr) 105px;overflow:hidden}
.game-shell .hand-copy .micro{margin-bottom:4px}
.game-shell .hand{min-width:0;min-height:0;height:100%;padding:3px;gap:4px;align-content:center;overflow:hidden;flex-wrap:nowrap}
.game-shell .card{height:min(19vh,150px);width:auto;aspect-ratio:118/184;min-width:0;flex:0 1 auto}
.game-shell .card .power{width:22px;height:22px;font-size:14px}
.game-shell .card .row-icon{top:5px;right:4px;padding:3px;font-size:6px}
.game-shell .card-info{padding:5px}
.game-shell .card-info strong{font-size:12px;line-height:1.15;overflow-wrap:anywhere}
.game-shell .card-info span{font-size:9px;line-height:1.3;margin-top:4px}

/* Правила и предыстория также целиком помещаются в окно. */
#briefDialog{width:min(920px,94vw);max-height:94vh;max-height:94dvh;overflow:hidden}
#briefDialog[open]{grid-template-columns:min(170px,18vw) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#briefDialog .dialog-art{font-size:clamp(60px,10vw,105px)}
#briefDialog .dialog-copy{max-height:none;min-height:0;overflow:auto;padding:clamp(14px,2.4vh,26px);display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-content:center}
#briefDialog .eyebrow,#briefDialog h2,#briefDialog #briefStory,#briefDialog .dialog-actions{grid-column:1/-1}
#briefDialog .eyebrow{margin:0 0 5px}
#briefDialog h2{font-size:clamp(28px,5vh,44px);margin:0 0 8px}
#briefDialog #briefStory{font-size:clamp(13px,1.9vh,17px);line-height:1.45;margin:0 0 8px}
#briefDialog h3{font-size:10px;margin:9px 0 5px}
#briefDialog h3:first-of-type{grid-column:1;grid-row:4}
#briefDialog h3:last-of-type{grid-column:2;grid-row:4}
#briefDialog ul{grid-column:1;grid-row:5}
#briefDialog ol{grid-column:2;grid-row:5}
#briefDialog li{font-size:clamp(11px,1.5vh,14px);line-height:1.4;margin-bottom:4px}
#briefDialog .dialog-actions{margin-top:8px}
#briefDialog .primary{padding:10px 14px}
#resultDialog{max-height:92vh;max-height:92dvh;overflow:hidden}
#resultDialog .dialog-copy{padding:clamp(20px,4vh,40px)}

@media(max-width:900px){
 .game-shell:not([hidden]){padding:7px;grid-template-rows:minmax(42px,6vh) minmax(0,1fr) minmax(130px,23vh)}
 .game-shell .table-wrap{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(58px,10vh) minmax(0,1fr)}
 .game-shell .opponent-panel{display:grid;grid-template-columns:minmax(50px,8vh) minmax(100px,.8fr) minmax(140px,1.5fr) auto;grid-template-rows:1fr;gap:8px;align-items:center;border:0;border-bottom:1px solid var(--line);padding:5px 8px}
 .game-shell .portrait{grid-column:1;grid-row:1;height:min(8vh,62px)}
 .game-shell .opponent-panel .micro{display:none}
 .game-shell .opponent-panel h3{grid-column:2;grid-row:1;margin:0;font-size:15px}
 .game-shell .intent-label{display:none}
 .game-shell .intent{grid-column:3;grid-row:1;font-size:10px}
 .game-shell .hint{display:block;grid-column:4;grid-row:1;width:auto;margin:0;padding:6px}
 .game-shell .hand-zone{grid-template-columns:minmax(0,1fr) 85px}
 .game-shell .hand-copy{display:none}
 .game-shell .pass{justify-self:stretch}
}
@media(max-width:580px){
 .game-shell:not([hidden]){grid-template-rows:42px minmax(0,1fr) minmax(142px,25vh);padding:5px}
 .game-shell .game-head{grid-template-columns:minmax(0,1fr) auto auto;gap:5px}
 .game-shell .game-head>.text-button{display:block;font-size:0}
 .game-shell .game-head>.text-button:after{content:'←';font-size:16px}
 .game-shell .turn-box span{font-size:6px}
 .game-shell .turn-box strong{font-size:18px}
 .game-shell .table-wrap{grid-template-rows:52px minmax(0,1fr)}
 .game-shell .opponent-panel{grid-template-columns:42px minmax(70px,.7fr) minmax(0,1.4fr);padding:3px 5px}
 .game-shell .portrait{height:42px}
 .game-shell .opponent-panel h3{font-size:11px}
 .game-shell .intent{font-size:8px;line-height:1.25}
 .game-shell .hint{display:none}
 .game-shell .board{padding:4px}
 .game-shell .round-rules{grid-template-columns:minmax(0,1fr) auto;padding:4px 6px;margin-bottom:3px}
 .game-shell .round-rules>div:nth-child(2){display:none}
 .game-shell .round-rules .micro{font-size:6px;margin-bottom:2px}
 .game-shell .round-rules p{font-size:8px}
 .game-shell .score-line{min-height:19px;margin:0}
 .game-shell .score-line strong{font-size:18px}
 .game-shell .lane{grid-template-columns:46px minmax(0,1fr) minmax(0,1fr);gap:2px;padding:2px}
 .game-shell .lane-name{padding:2px}
 .game-shell .lane-name strong{font-size:10px}
 .game-shell .lane-name span{display:none}
 .game-shell .mini-card{height:min(10vh,68px)}
 .game-shell .mini-card em{display:none}
 .game-shell .status{font-size:11px;line-height:1.25;white-space:normal;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:25px}
 .game-shell .hand-zone{grid-template-columns:minmax(0,1fr) 60px;padding:3px 0;gap:3px}
 .game-shell .hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;align-items:center}
 .game-shell .card{width:100%;height:auto;max-height:68px;aspect-ratio:118/184}
 .game-shell .card-info{padding:2px}
 .game-shell .card-info strong{font-size:8px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .game-shell .card-info span{display:none}
 .game-shell .card .power{width:15px;height:15px;font-size:9px;top:2px;left:2px}
 .game-shell .card .row-icon{font-size:4px;padding:2px}
 /* На карте в 68 px слово не помещается — метка зверя становится точкой. */
 .game-shell .beast-mark{top:19px;left:2px;width:9px;height:9px;padding:0;border-radius:50%;font-size:0;overflow:hidden}
 .game-shell .pass{padding:4px;font-size:7px}
 #briefDialog[open]{grid-template-columns:1fr;width:96vw}
 #briefDialog .dialog-art{display:none}
 #briefDialog .dialog-copy{padding:12px;column-gap:12px}
 #briefDialog h2{font-size:clamp(24px,5vh,34px)}
 #briefDialog #briefStory{font-size:clamp(11px,1.6vh,14px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 #briefDialog li{font-size:clamp(10px,1.35vh,12px);line-height:1.3}
 #briefDialog .dialog-actions{margin-top:5px}
}
@media(max-height:650px){
 .game-shell:not([hidden]){grid-template-rows:38px minmax(0,1fr) 128px}
 .game-shell .round-rules>div:nth-child(2){display:none}
 .game-shell .portrait{display:none}
 #briefDialog #briefStory{-webkit-line-clamp:2}
 #briefDialog h3{margin-top:4px}
 #briefDialog li{margin-bottom:1px}
}
@media(max-height:650px) and (orientation:landscape){
 #briefDialog #briefStory{display:none}
 .game-shell:not([hidden]){grid-template-rows:34px minmax(0,1fr) 96px;padding:4px}
 .game-shell .game-head{padding-bottom:3px}
 .game-shell .game-head h2{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .game-shell .turn-box{padding:2px 10px}
 .game-shell .turn-box strong{font-size:16px}
 .game-shell .table-wrap{grid-template-rows:36px minmax(0,1fr)}
 .game-shell .opponent-panel{grid-template-columns:minmax(110px,.7fr) minmax(0,1.5fr) auto;padding:2px 6px}
 .game-shell .opponent-panel h3{grid-column:1;font-size:12px}
 .game-shell .intent{grid-column:2;font-size:8px}
 .game-shell .hint{grid-column:3;display:block;font-size:7px;padding:5px}
 .game-shell .round-rules{display:none}
 .game-shell .board{padding:3px 7px}
 .game-shell .score-line{min-height:18px;margin:0}
 .game-shell .score-line strong{font-size:18px}
 .game-shell .lane{grid-template-columns:62px minmax(0,1fr) minmax(0,1fr)}
 .game-shell .lane-name strong{font-size:11px}
 .game-shell .lane-name span{display:none}
 .game-shell .mini-card{height:min(11vh,44px)}
 .game-shell .mini-card em{display:none}
 .game-shell .status{min-height:18px;padding:1px 6px;font-size:9px;line-height:1.15}
 .game-shell .hand-zone{grid-template-columns:minmax(0,1fr) 80px;padding:2px 0}
 .game-shell .hand{display:flex;flex-wrap:nowrap;gap:3px}
 .game-shell .card{height:min(21vh,82px);width:auto}
 .game-shell .card-info{padding:2px}
 .game-shell .card-info strong{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .game-shell .card-info span{display:none}
 .game-shell .card .power{width:15px;height:15px;font-size:9px}
 .game-shell .beast-mark{top:20px;left:4px;width:9px;height:9px;padding:0;border-radius:50%;font-size:0;overflow:hidden}
 .game-shell .pass{padding:4px;font-size:7px}
}

/* Десктоп: карту можно читать как физическую — поднять над рукой наведением. */
@media(min-width:901px) and (min-height:651px){
 .game-shell .hand-zone,.game-shell .hand{overflow:visible}
 .game-shell .hand-zone{grid-template-columns:180px minmax(0,1fr) 105px;position:relative;z-index:5}
 .game-shell .card{transform-origin:50% 100%;transition:transform .18s ease,box-shadow .18s ease;z-index:1}
 .game-shell .card:hover,.game-shell .card:focus-visible,.game-shell .card.selected{transform:translateY(-8px) scale(1.5);z-index:20;box-shadow:0 14px 32px rgba(0,0,0,.65)}
 .game-shell .card:hover .card-info,.game-shell .card:focus-visible .card-info,.game-shell .card.selected .card-info{padding:7px}
 .game-shell .card:hover .card-info strong,.game-shell .card:focus-visible .card-info strong,.game-shell .card.selected .card-info strong{white-space:normal}
 .game-shell .status{font-size:16px;line-height:1.35}
 /* На большом экране стол наполовину пуст, а текст набран под телефон.
    Кегли и карты считаются от высоты окна, а не остаются мобильными. */
 .game-shell:not([hidden]){grid-template-rows:minmax(45px,7vh) minmax(0,1fr) minmax(150px,25vh)}
 .game-shell .card{height:min(23vh,208px)}
 .game-shell .card .power{width:30px;height:30px;font-size:19px}
 .game-shell .card .row-icon{font-size:9px;padding:5px}
 .game-shell .card-info{padding:7px}
 .game-shell .card-info strong{font-size:15px;line-height:1.2;overflow-wrap:anywhere}
 .game-shell .lane{grid-template-columns:112px minmax(0,1fr) minmax(0,1fr)}
 .game-shell .card-info span{font-size:11px;line-height:1.35}
 .game-shell .beast-mark{top:42px;font-size:8px;padding:3px 5px}
 .game-shell .mini-card{height:min(15vh,132px)}
 .game-shell .mini-card b{width:24px;height:24px;font-size:16px}
 .game-shell .mini-card em{font-size:9px;padding:5px}
 .game-shell .lane-name strong{font-size:20px}
 .game-shell .lane-name span{font-size:9px}
 .game-shell .round-rules p{font-size:15px;line-height:1.4}
 .game-shell .round-rules .micro{font-size:9px}
 .game-shell .rules-button{font-size:9px;padding:9px 12px}
 .game-shell .opponent-panel h3{font-size:23px}
 .game-shell .intent-label{font-size:9px;margin:14px 0 6px}
 .game-shell .intent{font-size:14px}
 .game-shell .hand-copy p:last-child{font-size:11px;line-height:1.5}
 .game-shell .turn-box strong{font-size:30px}
 .game-shell .score-line strong{font-size:34px}
 #briefDialog{width:min(1040px,94vw)}
 #briefDialog[open]{grid-template-columns:190px minmax(0,1fr)}
 #briefDialog .dialog-copy{padding:30px;column-gap:34px}
 #briefDialog #briefStory{font-size:18px;line-height:1.5}
 #briefDialog h3{font-size:13px;margin:12px 0 7px}
 #briefDialog li{font-size:clamp(13px,1.7vh,16px);line-height:1.5;margin-bottom:6px}
}

/* Длинное русское слово в крупном заголовке шире экрана 320 px: «МАСТЕРСКОЙ»
   при clamp-кегле занимает 336 px и уезжает за край — прокрутки нет, буквы
   просто пропадают. Разрешаем переносить по слогам, а если словарь переносов
   не подхватился — рвать слово принудительно.

   Только на узких экранах. На десктопе крупный заголовок намеренно выходит
   за текстовую колонку в пустое поле справа — это часть оформления, и
   переносить его там незачем: получается лишняя строка и рваный вид. */
@media(max-width:520px){h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}}

/* --- контраст: приведено к WCAG AA ----------------------------------
   Значения посчитаны: тот же тон и насыщенность, другая светлота —
   минимальная, при которой пара «текст/фон» проходит норму. Область
   действия — секция, которая задаёт фон: один и тот же .index на тёмной
   и на светлой полосе требует разных цветов. */
/* 4.26→4.66 при норме 4.5 на #cfc3a6 ×1 — «КАРМАН РУКОПИСИ» */
#cases .collection .eyebrow{color:#922a22}
/* 1.5→4.68 при норме 4.5 на #cfc3a6 ×1 — «01 / КАМПАНИЯ НА ОДИН ВЕЧЕР» */
#cases .eyebrow, #cases .micro{color:#644b1f}

/* --- тач-цели: минимум 24 px (WCAG 2.5.8) ------------------------------
   Ссылки и кнопки в шапке, подвале и на первом экране были высотой 11-22 px.
   Растим область нажатия симметричным вертикальным отступом: содержимое
   остаётся по центру коробки и не переносится, поэтому вёрстка не меняется.
   Менять display на flex здесь нельзя — у «● ИНТЕРЕСНОЕ ТУТ» точка и текст
   стали бы отдельными флекс-элементами и разъехались на две строки. */
.topbar a,.topbar button,.bar a,.legal-top a,footer a,.links a,.map-actions a,
.controls a,.controls button,.hero-copy a,.hero-text a,.hero>a,.hero .down,
.sound-toggle,.about-open,.fullscreen,.compact-prev,.compact-next,
.translation-toggle,.pin,.hotspot,nav a,.meta a,.sources a{min-height:24px;padding-block:7px}
/* Ползунки: полоса была 16 px, пальцем не поймать. Высоту поднимаем у самого
   поля - область нажатия растёт, родная отрисовка бегунка не ломается. */
input[type=range]{height:26px}
/* Флажки и переключатели: 13-17 px до пальца не дотягивают. */
input[type=checkbox],input[type=radio]{width:24px;height:24px}
/* Ссылки-«источники» и вспомогательная навигация: у строчных растим область
   нажатия отступом (высота строки не меняется), у блочных — задаём высоту. */

/* Прошлое правило гасило только пять именованных анимаций, а на столе движется
   больше. Гасим всё разом — конкретные исключения выше остаются в силе. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Кегли в игре опускались до 4–8 px: на таком размере подписи «осталось ходов»
   и «правила кона» просто не читаются. Ставим нижнюю границу 9 px. Игра
   рассчитана помещаться на экран без прокрутки — после правки это проверено
   на 320×640 и 390×844. */
.turn-box span,.intent-label,.score-line span,.lane-name span,.card .row-icon,
.card-info span,.card-info strong,.campaign-strip span,.beast-mark,.intent,
.round-rules .micro,.round-rules p,.hint,.pass,.rules-button,
.game-head .eyebrow,.micro{font-size:9px}

/* Правила выше перекрывались более точными селекторами .game-shell …,
   и часть подписей осталась на 6–8 px. Поднимаем именно их. */
.game-shell .game-head .eyebrow,.game-shell .rules-button,.game-shell .pass,
.game-shell .round-rules .micro,.game-shell .round-rules p,.game-shell .micro,
.topbar span,.topbar a.brand,.game-head p{font-size:9px}
/* На узком экране счётчик ходов уходил до 6 px — правило точнее общего. */
@media(max-width:580px){.game-shell .turn-box span{font-size:9px}}
/* Явная кнопка закрытия в обоих окнах: итоговое окно было тупиком — Escape в нём
   блокировался, а выйти к делам было нечем. Эйброу подвинут, чтобы не попасть под кнопку. */
.dialog-close{position:absolute;top:10px;right:10px;z-index:2;min-height:28px;padding:7px 11px;background:var(--paper);border:1px solid var(--ink);color:var(--ink);font-size:10px;letter-spacing:.12em;cursor:pointer}
.dialog-close:hover{background:var(--gold);border-color:var(--gold)}
.dialog-copy .eyebrow{padding-right:104px}

/* Слова КАПИТЕЛЬЮ Firefox и WebKit по слогам не переносят: при
   overflow-wrap:break-word слово рвётся посреди без дефиса («ЧУДОВИЩА/МИ»),
   а Chromium ставит в крупном заголовке дефис. Поэтому на узких экранах
   автоперенос в h1–h3 выключен, а кегль подобран так, чтобы самое длинное
   слово влезало в строку целиком. Значения измерены Playwright на 320,
   360 и 390 px в Chromium, Firefox и WebKit. Десктоп не затронут. */
@media(max-width:520px){h1,h2,h3{hyphens:manual;-webkit-hyphens:manual}}

/* Подпись акта не помещалась в одну flex-строку и задавала case-grid ширину
   312 px при доступных 288 px. Разрешаем строке перенестись, а карточкам —
   сжиматься ровно до ширины мобильной колонки. */
@media(max-width:520px){.case-grid,.case-card,.act-title>*{min-width:0}.case-card{width:100%;max-width:100%}.act-title{flex-wrap:wrap;gap:8px 16px}.act-title span{overflow-wrap:anywhere}}
:focus-visible{outline:3px solid var(--paper);outline-offset:3px;box-shadow:0 0 0 6px #000}
.case-card:focus-visible{box-shadow:0 0 0 6px #000;transition-property:transform}