:root{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;color:#142845;background:#0d2847;font-size:16px}*{box-sizing:border-box}body{margin:0;min-width:320px}.game{--board-width:min(calc(100vw - 40px),350px);--cell:calc(var(--board-width)/6);min-height:100dvh;max-width:680px;margin:auto;background:linear-gradient(#1c69a1 0%,#0e447b 40%,#082745 100%);box-shadow:0 0 35px #06192d;overflow:hidden}.scene{height:clamp(96px,15.5vh,133px);position:relative;background-image:linear-gradient(180deg,#2590d0 0%,#9dd8e6 55%,#187ca4 56%,#145b86 100%);background-size:cover;background-position:center 45%;border-bottom:6px solid #8e6b42}.scene.has-image{background-image:linear-gradient(180deg,#0e4a7b17,#07233e42),var(--scene-image)}.mission{position:absolute;left:max(10px,calc((100% - 390px)/2));top:9px;max-width:56%;padding:6px 12px;background:#f3dfae;border:3px solid #8e5f35;border-radius:10px;box-shadow:2px 4px 0 #3c2d25;color:#132743;transform:rotate(-2deg)}.mission small{display:block;font-size:14px;font-weight:bold}.mission strong{font-size:clamp(18px,5vw,27px);line-height:1.15}.mission .stamp{color:#bc1f18;border:2px solid #bc1f18;border-radius:50%;padding:0 5px;margin-right:4px}.turn-label{position:absolute;right:10px;top:8px;padding:4px 8px;border-radius:4px;background:#102744e8;color:#fff;font-weight:bold;font-size:14px}.scene-note{position:absolute;bottom:6px;right:10px;background:#f5e3bcf2;border:2px solid #ba874d;border-radius:5px;padding:3px 7px;font-size:14px;font-weight:bold}.battle{background:linear-gradient(90deg,#175c85,#72acd1 7%,#e2d1a7 9%,#e2d1a7 91%,#72acd1 93%,#175c85);padding:4px 0 8px}.board-top{display:flex;justify-content:space-between;align-items:center;width:var(--board-width);margin:0 auto 2px;gap:4px}.hint{font-weight:bold;font-size:14px;background:#f1dfb5;border:2px solid #a77a48;padding:2px 7px;border-radius:5px;min-height:26px;flex:1;text-align:center}.danger-toggle{border:2px solid #8b53b3;background:#f6e8c4;color:#251b36;min-height:30px;padding:2px 6px;font:700 14px inherit;white-space:nowrap}.danger-toggle[aria-pressed="true"]{background:#ead5f4}.legend{display:flex;width:var(--board-width);margin:auto;justify-content:center;gap:10px;min-height:20px;font-size:14px;font-weight:bold}.swatch{display:inline-block;width:16px;height:14px;vertical-align:middle;border:1px solid #433}.swatch.move{background:#58bafb}.swatch.danger{background:repeating-linear-gradient(135deg,#bd84d9 0 3px,#e6c9e6 3px 7px)}.board-shell{width:var(--board-width);margin:auto}.columns{height:20px;display:grid;grid-template-columns:repeat(6,1fr);color:#112847;background:#f3dfad;border:1px solid #926f48;font-size:14px;font-weight:bold;text-align:center}.board-and-rows{position:relative}.rows{position:absolute;top:0;bottom:0;left:-17px;width:17px;display:grid;grid-template-rows:repeat(7,1fr);font-size:14px;font-weight:bold;color:#192844;background:#f3dfad}.rows span{display:grid;place-items:center}.board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(7,var(--cell));box-shadow:0 0 0 2px #8f704d;background:#c9ae7d}.cell{position:relative;min-width:0;min-height:0;margin:0;padding:0;border:1px solid #9f845b;border-radius:2px;background-color:#e9d1a4;background-image:var(--floor-image,linear-gradient(125deg,#f7e7c1,#d2b384));background-size:100% 100%;box-shadow:inset 0 1px 2px #fff7;cursor:pointer;font:700 14px inherit;color:#10233e;overflow:hidden}.cell::before{content:"";position:absolute;inset:2px;pointer-events:none;z-index:1}.cell.danger::before{background:repeating-linear-gradient(135deg,#a455ad66 0 3px,#c386b733 3px 8px)}.cell.move::before{background:#4db7f7b8;border:2px solid #0875c3;border-radius:4px}.cell.move.danger::before{background:repeating-linear-gradient(135deg,#54b9f5bc 0 6px,#9f6dceaf 6px 10px);border:2px solid #1588c8}.cell.attack-target::before{background:#d74e48a3;border:2px solid #9d211d}.cell.current::after,.cell.preview::after{content:"";position:absolute;inset:2px;border:3px solid #f8b33e;z-index:5;pointer-events:none}.cell.preview::after{border-color:#fff;box-shadow:0 0 0 2px #098ed2}.cell:focus-visible{outline:4px solid #fff;outline-offset:-4px;z-index:9}.cell.terrain{background-color:#9f8867}.prop{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:88%;height:82%;background-size:contain;background-position:center;background-repeat:no-repeat;z-index:2}.prop.fallback::after{content:"▣";font-size:calc(var(--cell)*.67);color:#66513b;text-shadow:2px 2px #e7ce8d}.prop.rock.fallback::after{content:"◆";color:#65707a}.unit-sprite{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);background-repeat:no-repeat;z-index:3;filter:drop-shadow(1px 2px 1px #171d29b3);pointer-events:none}.unit-fallback{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);z-index:3;font-size:calc(var(--cell)*.57);line-height:1}.hp-mini{position:absolute;top:1px;left:1px;z-index:4;padding:0 2px;background:#152d49df;color:white;font:700 11px Arial,sans-serif;border-radius:2px;line-height:1.15}.enemy .hp-mini{background:#aa2523}.threat-mark{position:absolute;right:1px;top:0;z-index:4;color:#fff;background:#7740aa;border-radius:50%;font:700 12px Arial;min-width:14px;height:14px;line-height:14px}.dock{background-color:#112b4b;background-image:linear-gradient(#0d234ac0,#0a1e3bde),var(--fabric-image,none);background-size:cover;border-top:5px dashed #b9874b;padding:7px max(9px,calc((100% - 390px)/2)) max(9px,env(safe-area-inset-bottom));color:#f8e8ca;min-height:172px}.dock-heading{text-align:center;background:#f2dfb4;color:#152944;border:2px solid #aa7c4a;border-radius:8px;font-size:clamp(19px,5vw,24px);font-weight:bold;line-height:1.25;min-height:33px;padding:2px}.portraits{display:flex;gap:5px;margin-top:6px}.portrait-card{flex:1;min-width:0;min-height:105px;border:2px solid #d6b887;border-radius:7px;background:#efe0bc;color:#132c48;padding:0;position:relative;font:700 15px inherit;cursor:pointer;overflow:hidden}.portrait-card.active{border-color:#fbb640;box-shadow:0 0 0 2px #fbb640}.portrait-picture{display:block;height:70px;background:linear-gradient(145deg,#b8c9c7,#bd8557);background-position:center;background-size:cover}.portrait-card .portrait-name{display:block;background:#f5dfb4;padding:1px}.portrait-card .portrait-hp{display:block;background:#123756;color:#fff;font:700 13px Arial,sans-serif}.portrait-card.done{filter:saturate(.55);opacity:.75}.portrait-card:disabled{cursor:default}.portrait-card:focus-visible,.button:focus-visible,.danger-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}.action-panel{display:grid;grid-template-columns:75px 1fr;gap:7px;margin-top:5px}.action-portrait{height:88px;border:2px solid #d8b88c;border-radius:5px;background:#c6a277 center/cover}.action-copy{min-height:74px;background:#f2dfb7;color:#172a45;border:2px solid #b68956;border-radius:5px;padding:4px 7px;font-size:14px;line-height:1.25}.action-copy strong{display:block;font-size:17px}.action-copy p{margin:2px 0}.buttons{display:flex;gap:6px;margin-top:6px}.button{flex:1;min-height:48px;border:2px solid #d8b988;border-radius:7px;background:#f1dfb8;color:#112844;font:700 16px inherit;cursor:pointer}.button.primary{background:#c72820;color:#fff;border-color:#f1bd89;box-shadow:inset 0 0 0 1px #831811}.button.secondary{background:#173c66;color:#fff}.button:disabled{opacity:.55;cursor:default}.notice{background:#fff0cb;color:#5b251b;font-size:14px;padding:4px 6px;border:2px solid #d07047;margin:4px 0}.enemy-info{background:#f3dfb6;color:#202b42;border:2px solid #8557a4;padding:3px 6px;font-size:14px;margin:4px 0}.enemy-interlude{position:fixed;inset:0;display:grid;place-items:center;background:#081d38bd;z-index:20;padding:18px}.interlude-card{max-width:390px;width:100%;background:#f2dfb6;border:4px solid #9e6c3e;border-radius:8px;padding:15px;color:#112944;text-align:center}.interlude-card h2{margin:0 0 8px;font-size:25px}.interlude-card p{font-size:16px;line-height:1.4}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-height:650px){.scene{height:58px}.mission{top:2px;padding:1px 7px}.mission small{display:none}.mission strong{font-size:17px}.turn-label{top:2px}.scene-note{display:none}.battle{padding-top:2px;padding-bottom:2px}.board-top{margin-bottom:0}.hint{min-height:22px;padding:0 3px}.legend{min-height:15px;font-size:12px}.columns{height:16px}.dock{padding-top:3px;min-height:0}.dock-heading{min-height:25px;font-size:18px}.portrait-card{min-height:70px}.portrait-picture{height:41px}.action-panel{grid-template-columns:54px 1fr;margin-top:2px}.action-portrait{height:68px}.action-copy{min-height:68px}.buttons{margin-top:3px}.button{min-height:48px}}
@media(max-width:350px){.scene{height:58px}.mission strong{font-size:16px}.turn-label{font-size:13px}.dock{padding-left:6px;padding-right:6px}.action-copy{font-size:14px}.action-copy strong{font-size:15px}}
@media(min-width:600px){.game{--board-width:350px}.scene{height:170px}.battle{padding:7px 0 12px}.dock{min-height:200px}.portrait-card{min-height:115px}}
@media(orientation:landscape) and (max-height:500px){.game{--board-width:max(264px,min(calc((100vh - 65px)*6/7),350px));display:grid;grid-template-columns:var(--board-width) minmax(245px,1fr);max-width:none;min-height:100vh}.scene{grid-column:2;grid-row:1;height:65px}.battle{grid-column:1;grid-row:1/3;padding-top:0}.board-top,.legend,.board-shell{margin-left:0;margin-right:0}.dock{grid-column:2;grid-row:2;border-top:0;border-left:5px dashed #b9874b}.portrait-picture{height:55px}.portrait-card{min-height:85px}}
@media(prefers-reduced-motion:no-preference){.cell.move:hover::before{filter:brightness(1.2)}.button:hover:not(:disabled),.portrait-card:hover:not(:disabled){filter:brightness(1.08)}}

@media(max-width:430px) and (min-height:651px){.portrait-card{min-height:95px}.portrait-picture{height:60px}}
@media(max-width:350px) and (max-height:650px){.scene{height:25px}.mission{top:1px}.turn-label{top:1px}.board-top{height:26px}.danger-toggle{min-height:26px}.legend{height:14px;min-height:14px}.columns{height:14px}.dock-heading{min-height:23px;padding:0}.portrait-card{min-height:60px}.portrait-picture{height:27px}.portraits{margin-top:3px}.dock{padding-top:2px;padding-bottom:0}}
.board-top{position:relative;height:30px;padding-right:98px}
.danger-toggle{position:absolute;right:0;bottom:0;z-index:6;min-height:48px;height:48px}
.scene-note{left:10px;right:auto}
.hp-mini{font-size:14px;line-height:1}
.portrait-card .portrait-hp{font-size:14px}
@media(max-width:430px) and (min-height:651px){.portrait-picture{height:58px}}
@media(max-height:650px){.legend{font-size:14px;min-height:16px}.battle{padding-bottom:0}}
@media(max-width:350px) and (max-height:650px){.board-top{height:26px}.legend{height:16px;min-height:16px}.turn-label{display:none}.portrait-picture{height:26px}}
.board{background-image:var(--floor-image,linear-gradient(145deg,#f4dfb5,#bb955e));background-size:100% 100%;background-position:center}
.cell{background-image:none;background-color:#fff5d518;border-color:#806c4b9c;box-shadow:inset 1px 1px 2px #fff5,inset -1px -1px 2px #583b2b55}
.cell:nth-child(3n){background-color:#f8e7bc14}
.cell.current::after{inset:18%;transform:rotate(45deg);border-color:#ffbb45;background:#f7b84520;box-shadow:0 0 6px #ffdd7c}
.cell.preview::after{inset:2px;transform:none;border-color:#fff;box-shadow:0 0 0 2px #098ed2}
.foot-shadow{position:absolute;left:19%;right:19%;bottom:2px;height:12%;border-radius:50%;background:radial-gradient(ellipse,#2e25199c 0%,#2e251900 72%);z-index:2;pointer-events:none}
.delivery-marker{position:absolute;left:37%;bottom:4%;width:26%;height:58%;z-index:3;background:linear-gradient(90deg,#402a1e,#e8b66e 35%,#593727 70%,#36251c);border:2px solid #3b281c;border-radius:5px 5px 2px 2px;box-shadow:0 2px 2px #25180d80}
.delivery-marker::before{content:"";position:absolute;left:-42%;top:-24%;width:172%;height:43%;background:radial-gradient(circle at 50% 46%,#fff7c3 0 25%,#ffc847 26% 46%,#6a3b22 48% 60%,transparent 62%);filter:drop-shadow(0 0 4px #ffd75f)}
.delivery-marker::after{content:"⚑";position:absolute;left:45%;top:28%;color:#fbe4af;background:#bd251e;font:700 15px Arial,sans-serif;padding:1px 3px;box-shadow:1px 1px 1px #27130e}
.dock{background-image:linear-gradient(#0d234a16,#0a1e3b30),var(--fabric-image,none);background-size:100% 100%;border-top:0}
.dock-heading,.portrait-card,.action-copy{background-image:radial-gradient(#fff7d535 1px,transparent 1px),linear-gradient(135deg,#f7e8c7,#ddbf8c);background-size:6px 6px,100% 100%;box-shadow:inset 0 0 0 2px #fff6,0 2px 3px #06172a8c}
.portrait-card.active{box-shadow:0 0 0 2px #fbb640,0 3px 8px #06172a}
.portraits:has(.portrait-card.active) .portrait-card.active{flex:1.65}
.portraits:has(.portrait-card.active) .portrait-card:not(.active){flex:.85}
@media(min-width:351px) and (min-height:651px) and (max-width:430px){.game:has(.portrait-card.active) .scene{height:calc(clamp(96px,15.5vh,133px) - 12px)}.portrait-card.active .portrait-picture{height:70px}}
.board{position:relative}
.unit-overlay{position:absolute;width:calc(var(--cell)*1.25);height:calc(var(--cell)*1.42);transform:translate(-50%,-100%);pointer-events:none}
.unit-overlay .unit-sprite{bottom:0}
.unit-overlay .foot-shadow{left:15%;right:15%;bottom:-2px;height:12%}
.cell .hp-mini{z-index:20}
.cell.current::after{z-index:3}
.unit-overlay .hp-mini{top:calc(var(--cell)*.3);left:50%;transform:translateX(-50%);white-space:nowrap;padding:1px 3px;background:#b5221d;border:1px solid #e9c897;box-shadow:1px 1px 2px #24120d9c}
.cell{background-image:var(--tile-image,none);background-size:100% 100%;background-color:#ebd4a6;border:1px solid #7a5a3d66;box-shadow:none}
.cell.terrain{background-color:#8d765b}
.goal-overlay{position:absolute;left:calc(var(--cell)*3.5);top:var(--cell);width:calc(var(--cell)*1.2);height:var(--cell);transform:translate(-50%,-100%);z-index:5;pointer-events:none}
.goal-overlay .unit-sprite{bottom:0}
.dock-heading,.scene-note,.hint,.portrait-card .portrait-name{background-image:var(--paper-image,linear-gradient(#f8e9c8,#e0c28e));background-size:var(--paper-size,100% 100%);background-position:var(--paper-position,center);border-color:transparent;box-shadow:none}
@media(min-width:351px) and (min-height:651px) and (max-width:430px){.game:has(.portrait-card.active) .scene{height:clamp(96px,15.5vh,133px)}.portrait-card.active .portrait-picture{height:58px}}
.game{overflow-x:auto;overflow-y:hidden}
.mission h1{margin:0;font-size:clamp(18px,5vw,27px);line-height:1.15}
.button,.danger-toggle,.portrait-card{font-family:inherit;font-weight:700}
.button{font-size:16px}
.danger-toggle{top:0;bottom:auto;font-size:14px}
.portrait-card,.portrait-card .portrait-name{font-size:15px}
.battle{background-image:linear-gradient(90deg,#0c6082cc 0%,#a98f6580 7%,#f5e5be18 14%,#f5e5be18 86%,#a98f6580 93%,#0c6082cc 100%),var(--floor-image,linear-gradient(#e7cf9e,#c09e68));background-size:100% 100%,cover;background-position:center;border-top:4px solid #926b3f;border-bottom:4px solid #735335;box-shadow:inset 0 3px #e4ba75,inset 0 -3px #e4ba75}
.cell.move::before{background:linear-gradient(135deg,#67c9f2a8,#1c9de4a0);border:1px solid #f7df9a;border-radius:3px;box-shadow:inset 0 0 0 1px #ffffff9c,0 0 0 1px #1199c1a3}
.cell.move.danger::before{background:repeating-linear-gradient(135deg,#65c7efd1 0 6px,#9b77c6a8 6px 10px);border:1px solid #f7df9a;box-shadow:inset 0 0 0 1px #ffffff9c,0 0 0 1px #1199c1a3}
@media(max-width:350px) and (max-height:650px){.mission h1{font-size:16px}.portrait-card{min-height:82px}.portrait-picture{height:48px}}
@media(orientation:landscape) and (max-height:500px){.game{grid-template-columns:calc(var(--board-width) + 20px) minmax(245px,1fr)}.battle{padding-left:20px}}
.board-shell{width:calc(var(--board-width) + 4px);padding-right:4px;box-sizing:border-box}
.board-top{display:grid;grid-template-columns:minmax(0,1fr) 94px;align-items:center;height:48px;padding-right:0}
.board-top .hint{min-width:0}
.danger-toggle{position:static;width:94px;height:48px;min-height:48px;padding:2px 3px}
.portraits{align-items:flex-end}
.portrait-card:first-child .portrait-picture{background-position-y:89.9%!important}
@media(max-width:430px) and (min-height:651px){.portrait-picture{height:96px}.portraits:has(.portrait-card.active) .portrait-card.active .portrait-picture{height:132px}.portraits:has(.portrait-card.active) .portrait-card:not(.active) .portrait-picture{height:72px}}
@media(max-width:350px) and (max-height:650px){.portrait-picture{height:80px}.portraits:has(.portrait-card.active) .portrait-card.active .portrait-picture{height:108px}.portraits:has(.portrait-card.active) .portrait-card:not(.active) .portrait-picture{height:69px}}

/* A cropped SVG viewBox keeps every face inside its card at any aspect ratio. */
.game{overflow:hidden}
.portrait-picture,.action-portrait{overflow:hidden;background:linear-gradient(145deg,#d8c9a8,#9db8b8);background-image:none}
.portrait-picture{display:grid;place-items:center}
.portrait-art{display:block;width:100%;height:100%;object-fit:contain}
.action-portrait{display:grid;place-items:center}
.portrait-card:not(.active) .portrait-art{opacity:.98}
@media(orientation:landscape) and (max-height:500px){.portrait-picture{height:72px}.portraits:has(.portrait-card.active) .portrait-card.active .portrait-picture{height:85px}.portraits:has(.portrait-card.active) .portrait-card:not(.active) .portrait-picture{height:64px}}
.landing{min-height:100dvh;display:flex;flex-direction:column;align-items:stretch;background:linear-gradient(#80c8e7bb,#16547a95 56%,#112b4b),var(--home-image,var(--scene-image,linear-gradient(#77c9e8,#0b4972)));background-size:cover;background-position:center;color:#17304d}
.landing.growth{background-image:linear-gradient(#abdcf188,#85542d55 62%,#142c49),var(--growth-image,var(--home-image,var(--scene-image,none)))}
.landing-title{margin:15px 14px 0;align-self:flex-start;padding:8px 15px;background:#f4e2b9;color:#17304d;border:3px solid #a36d37;box-shadow:3px 4px 0 #493a2d}
.landing-title small{font-size:14px;font-weight:bold}
.landing-title h1{font-size:clamp(23px,6vw,35px);line-height:1.2;margin:2px 0}
.landing-hero{flex:1 1 180px;min-height:160px;max-height:320px;display:grid;place-items:center;padding:8px}
.landing-hero .portrait-art{max-width:min(78%,350px);max-height:100%;filter:drop-shadow(2px 5px 6px #10243bbd)}
.landing-paper{background:#f4e2b9;border-top:6px solid #9d6d3f;padding:15px 16px max(20px,env(safe-area-inset-bottom));min-height:220px}
.landing-lead{font-size:18px;font-weight:bold;line-height:1.35;margin:0 0 10px}
.play-guide,.growth-reason{font-size:14px;font-weight:bold;line-height:1.3;margin:4px 0}
.landing-story{font-size:14px;margin-top:8px}
.landing-story summary{cursor:pointer;min-height:28px}
.battle-purpose{font-size:13px;line-height:1.2;text-align:center;margin:0 0 3px;color:#f8e8ca}
.story-line{font-size:14px;line-height:1.4;margin:4px 0}
.story-line strong{margin-right:5px}
.landing-paper .button{width:100%;margin-top:13px}
.growth-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 2px}
.growth-option{min-height:108px;padding:9px 6px;border:3px solid #88663d;background:#fff2d4;color:#142844;font:inherit;text-align:left;cursor:pointer}
.growth-option strong{display:block;font-size:21px;margin-bottom:3px}
.growth-option span{font-size:14px;line-height:1.3}
.growth-option.chosen{border-color:#b4261e;box-shadow:inset 0 0 0 2px #e6ad69}
.growth-option:focus-visible{outline:3px solid #123a65}
.legacy-link{font-size:14px;margin:12px 0 0;text-align:center}
.legacy-link a{color:#173a64}
.completion-mark{font-size:18px;font-weight:bold;text-align:center}
@media(orientation:landscape) and (max-height:500px){.landing{display:grid;grid-column:1/-1;grid-template-columns:minmax(190px,38%) 1fr;grid-template-rows:auto 1fr}.landing-title{grid-column:1;grid-row:1;z-index:1}.landing-hero{grid-column:1;grid-row:2;min-height:100px;max-height:none}.landing-paper{grid-column:2;grid-row:1/3;border-top:0;border-left:6px solid #9d6d3f;overflow:auto;min-height:100vh}.landing-hero .portrait-art{max-width:95%}}
.growth-option img{display:block;width:100%;height:82px;object-fit:contain;margin-bottom:4px}
.mission-story{font-size:14px;color:#f8e8ca;margin-top:7px}
.mission-story summary{cursor:pointer;min-height:28px}
.mission-story .story-line{background:#f1dfb8;color:#152944;padding:3px 5px}
.landing-hero .hero-art{display:block;max-width:min(78%,350px);max-height:100%;width:auto;height:100%;object-fit:contain;filter:drop-shadow(2px 5px 6px #10243bbd)}
@media(orientation:landscape) and (max-height:500px){.landing-hero .hero-art{max-width:95%}.buttons .button{font-size:14px;padding:0 2px}}
@media(orientation:portrait){.game{container-type:inline-size;--board-width:min(calc(100cqw - 44px),350px)}}
.portrait-card.done{opacity:1;filter:none}
.portrait-card:not(.active) .portrait-picture{background:#e7d6b3}
.landing-hero{height:clamp(200px,35vh,320px);min-height:0;max-height:none;flex:none}
.landing-hero .hero-art{height:100%;max-height:100%;max-width:min(78%,350px);width:auto}
@media(orientation:landscape) and (max-height:500px){.landing-hero{height:auto;min-height:0;max-height:none}.landing-hero .hero-art{max-width:95%}}
.landing-hero{position:relative;overflow:hidden}
.landing-hero .hero-art{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;pointer-events:none}
.legend span{display:inline-flex;align-items:center;gap:2px;padding:0 4px;background:#f3dfad;color:#112847;border:1px solid #926f48;border-radius:3px;line-height:1}

/* ---- 2X: mobile basics, direct targeting, first-move coach, motion, sound, opening, teaser ---- */
html,body,button,a,.board{touch-action:manipulation}
body{-webkit-tap-highlight-color:transparent}
.game{position:relative;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.scene{margin-top:env(safe-area-inset-top,0px)}
.board{-webkit-user-select:none;user-select:none}
.sound-toggle{position:absolute;top:calc(env(safe-area-inset-top,0px) + 4px);right:calc(env(safe-area-inset-right,0px) + 4px);z-index:25;min-width:52px;height:48px;padding:0 8px;border:2px solid #a77a48;border-radius:8px;background:#f1dfb5;color:#142845;font:700 15px inherit;font-family:inherit;cursor:pointer;box-shadow:0 2px 3px #06172a8c}
.sound-toggle .sound-icon{margin-right:2px;opacity:.45;text-decoration:line-through}
.sound-toggle.on{background:#c72820;color:#fff;border-color:#f1bd89}
.sound-toggle.on .sound-icon{opacity:1;text-decoration:none}
.sound-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.turn-label{right:64px}
.swatch.attack{background:#e0453d;border-color:#8d1611}
.cell.attack-target::before{background:radial-gradient(circle,#ff5b4fd0 0 45%,#c4231cb8 70%);border:3px solid #ffdf8c;border-radius:4px;box-shadow:0 0 0 2px #a11a14,0 0 10px #ff3b30}
.cell.repair-target::before{background:radial-gradient(circle,#73e08ac4 0 45%,#2f9e4ab0 70%);border:3px solid #fff2b8;border-radius:4px;box-shadow:0 0 0 2px #1f6e33}
.unit-overlay.targetable .unit-sprite{filter:drop-shadow(0 0 3px #ff3b30) drop-shadow(0 0 2px #fff)}
.unit-overlay.repairable .unit-sprite{filter:drop-shadow(0 0 3px #3ccf61) drop-shadow(0 0 2px #fff)}
.sword-badge,.heal-badge{position:absolute;right:-2px;bottom:calc(var(--cell)*.42);z-index:6;min-width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 14px Arial,sans-serif;color:#fff;background:#b5221d;border:2px solid #ffe2a0;box-shadow:0 1px 2px #24120d9c}
.heal-badge{background:#21863c}
.coach{position:absolute;z-index:40;pointer-events:none;transform:translate(-50%,6px);padding:3px 9px;background:#fff7dc;color:#7d140f;border:3px solid #c72820;border-radius:9px;font:700 15px inherit;font-family:inherit;white-space:nowrap;box-shadow:0 3px 6px #06172a8c}
.coach::after{content:"";position:absolute;left:50%;top:-11px;margin-left:-8px;border:8px solid transparent;border-top:0;border-bottom:9px solid #c72820}
.coach.above{transform:translate(-50%,calc(-100% - 6px))}
.coach.above::after{top:auto;bottom:-11px;border-bottom:0;border-top:9px solid #c72820}
.button.big{font-size:18px;min-height:52px}
.button.coached{position:relative;overflow:visible;box-shadow:0 0 0 3px #ffd979,inset 0 0 0 1px #831811}
.coach-badge{position:absolute;right:6px;top:-13px;padding:0 6px;border-radius:7px;background:#fff7dc;color:#7d140f;border:2px solid #c72820;font-size:13px;line-height:20px;pointer-events:none}
.objective-card{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;transform:translateX(-50%);z-index:30;width:min(88%,360px);padding:10px 14px;pointer-events:none;text-align:center;background:#f4e2b9;color:#142845;border:3px solid #8e5f35;border-radius:10px;box-shadow:3px 5px 0 #3c2d25}
.objective-card small{display:block;font-weight:bold;color:#bc1f18}
.objective-card strong{display:block;font-size:24px;line-height:1.2}
.objective-card p{margin:4px 0 0;font-weight:bold}
.battle-purpose{font-size:14px;font-weight:bold}
.hit-flash{position:absolute;width:var(--cell);height:var(--cell);z-index:35;pointer-events:none;background:#fff;opacity:0}
.float-number{position:absolute;width:var(--cell);z-index:36;pointer-events:none;text-align:center;font:900 22px Arial,sans-serif;color:#fff;text-shadow:0 0 3px #a3110b,0 2px 0 #5c0805,0 -1px 0 #5c0805;opacity:0}
.float-number.heal{color:#e2ffd8;text-shadow:0 0 3px #186b1d,0 2px 0 #0d3f12}
.opening{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#0b1d33;cursor:pointer}
.opening-art,.opening-video{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;object-fit:cover}
.opening-art{background-color:#173a5c}
.opening-copy{position:relative;z-index:2;background:#f4e2b9;border-top:6px solid #9d6d3f;padding:12px 16px max(16px,env(safe-area-inset-bottom));color:#17304d}
.opening-count{margin:0;font-size:14px;font-weight:bold;color:#8e5f35}
.opening-speaker{display:block;font-size:16px;margin-top:2px}
.opening-text{font-size:19px;font-weight:bold;line-height:1.5;margin:4px 0 8px}
.landing-paper .opening-copy .button,.opening-copy .button{min-height:52px}
.growth-label{display:block;font-weight:bold}
.growth-effect{display:block;color:#8e1d17;font-weight:bold}
.growth-line{display:block;margin-top:4px;font-size:13px}
.result-dialogue{background:#fff3d6;border:2px solid #b68956;border-radius:6px;padding:4px 8px}
.teaser-art{position:absolute;inset:0;background-size:cover;background-position:center;filter:sepia(.35) saturate(.85)}
.teaser-card{text-align:center}
.teaser-card small{display:block;font-weight:bold;color:#8e5f35;font-size:15px}
.teaser-card .story-line{font-size:16px;font-weight:bold}
.teaser-title{font-size:28px;color:#8e1d17;margin:8px 0 4px}
.teaser-note{font-size:14px;margin:0 0 10px}
.pvp-link{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:8px;border:2px solid #d8b988;border-radius:7px;background:#173c66;color:#fff;font-weight:bold;text-decoration:none}
.pvp-link:focus-visible{outline:3px solid #123a65;outline-offset:2px}
.legacy-link a{display:inline-block;min-height:24px;padding:4px 0}
@media(orientation:landscape) and (max-height:500px){.opening{min-height:100vh;display:grid;grid-template-columns:1fr minmax(260px,46%)}.opening-copy{grid-column:2;align-self:end;border-top:0;border-left:6px solid #9d6d3f}.opening-text{font-size:17px}}
@media(prefers-reduced-motion:no-preference){
  .cell.attack-target::before{animation:target-pulse 1.1s ease-in-out infinite alternate}
  .coach{animation:coach-bob .9s ease-in-out infinite alternate}
  .objective-card{animation:objective-in 1.5s ease both}
  .hit-flash{animation:hit-flash .32s ease-out}
  .float-number{animation:float-up .95s ease-out forwards}
  .unit-overlay.hit{animation:unit-shake .34s ease-in-out}
  .unit-overlay.stopped{animation:unit-stop .85s ease-in forwards}
  .opening-art{animation:art-in .5s ease both}
  .landing.won .landing-hero::before,.landing.result:not(.teaser) .landing-hero::before{content:"";position:absolute;left:50%;top:18%;width:160%;height:46px;z-index:2;pointer-events:none;transform-origin:0 50%;background:linear-gradient(90deg,#fff9d2f0,#ffe58f80 40%,transparent);border-radius:0 50% 50% 0;opacity:0;animation:beam-sweep 2.6s ease-out 1}
}
@keyframes target-pulse{from{filter:brightness(.92)}to{filter:brightness(1.25)}}
@keyframes coach-bob{from{margin-top:0}to{margin-top:4px}}
@keyframes objective-in{0%{opacity:0;translate:0 -8px}15%,85%{opacity:1;translate:0 0}100%{opacity:1}}
@keyframes hit-flash{0%{opacity:.9}100%{opacity:0}}
@keyframes float-up{0%{opacity:1;translate:0 0}100%{opacity:0;translate:0 calc(var(--cell)*-.9)}}
@keyframes unit-shake{0%,100%{translate:0 0}20%{translate:-5px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:3px 0}}
@keyframes unit-stop{0%{filter:none;opacity:1}40%{filter:grayscale(1) brightness(.45);opacity:1}100%{filter:grayscale(1) brightness(.3);opacity:0}}
@keyframes art-in{from{opacity:.2;scale:1.04}to{opacity:1;scale:1}}
@keyframes beam-sweep{0%{opacity:0;rotate:-200deg}15%{opacity:1}85%{opacity:1}100%{opacity:0;rotate:20deg}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hit-flash,.float-number{display:none}}
/* Until the generated night images arrive, the approved daytime art is dimmed to read as the storm night. */
.opening-art.fallback{filter:brightness(.5) saturate(.6) contrast(1.1)}
.teaser-art{filter:sepia(.35) saturate(.85)}
@media(orientation:landscape) and (max-height:500px){.turn-label{display:none}.mission{max-width:calc(100% - 80px)}}
.opening-art.fallback::after{content:"";position:absolute;inset:0;background:linear-gradient(170deg,#06122ae6,#0b1d3aa8 55%,#06122ad9)}
.opening{grid-column:1/-1}

/* ---- 2X fix round: sticky main actions, sound in the board row, guard names, story recap ---- */
/* overflow:clip (not hidden) keeps .game from becoming a scroll box, so the action row can stick to the screen bottom. */
.game{overflow:hidden;overflow:clip}
html{scroll-padding-bottom:64px}
.dock .main-actions{position:sticky;bottom:0;z-index:12;margin-left:-6px;margin-right:-6px;padding:5px 6px max(5px,env(safe-area-inset-bottom));background:#0d2442f2;border-radius:8px 8px 0 0;box-shadow:0 -3px 6px #06172a8c}
.board-top{grid-template-columns:minmax(0,1fr) 94px 52px;gap:4px}
.board-top .sound-toggle{position:static;min-width:0;width:52px;height:48px;padding:0 2px;font-size:14px;box-shadow:none}
.turn-label{right:10px}
.unit-overlay .hp-mini{top:calc(var(--cell)*.22);font-size:12px;line-height:1.05;text-align:center}
.hp-mini .hp-name{display:block;font-size:11px}
.sword-badge,.heal-badge{bottom:calc(var(--cell)*.02);right:-4px}
.objective-card{top:0;left:0;right:0;width:auto;transform:none;border-radius:0 0 12px 12px;border-top:0;padding:8px 14px 10px}
.objective-card .objective-intro{margin:5px 0 0;font-size:13px;font-weight:normal;line-height:1.35}
.opening-lead{margin:2px 0 0;font-size:15px;line-height:1.4;color:#5a3c22}
.growth-recap{margin:8px 14px 0;align-self:flex-start;max-width:min(92%,420px);padding:4px 10px;background:#fff3d6ee;border:2px solid #b68956;border-radius:8px;color:#17304d;box-shadow:2px 3px 0 #493a2d80}
.growth-recap .story-line{margin:2px 0;font-size:14px;line-height:1.35}
.landing.growth .landing-hero{height:clamp(150px,27vh,280px)}
.landing-hero .hero-art{z-index:1}
.landing.won .landing-hero::before,.landing.result:not(.teaser) .landing-hero::before{z-index:0}
.landing-story summary,.mission-story summary{display:flex;align-items:center;min-height:48px}
.legacy-link a{min-height:48px;display:inline-flex;align-items:center}
@media(orientation:landscape) and (max-height:500px){
  .landing-paper::before{content:"";float:right;width:58px;height:42px}
  .landing.growth{grid-template-rows:auto auto 1fr}
  .growth-recap{grid-column:1;grid-row:2;margin-top:4px}
  .landing.growth .landing-hero{grid-row:3;height:auto}
  .landing.growth .landing-paper{grid-row:1/4}
  .game{--board-width:max(264px,min(calc((100vh - 90px)*6/7),350px))}
  .legend{min-height:14px;font-size:12px}
  .columns{height:14px}
  .battle{padding-bottom:0}
}
.objective-card{position:fixed;left:max(0px,calc(50% - 340px));right:max(0px,calc(50% - 340px))}
@media(orientation:landscape) and (max-height:500px){.objective-card{left:0;right:0}}
.objective-card .objective-speaker{font-weight:bold;margin-right:4px}
@media(max-height:650px){.objective-card{padding:4px 10px 6px}.objective-card strong{font-size:20px}.objective-card p{font-size:14px}}
.ending-art{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center 50%;background-color:#3a4a62}

/* ---- 2X fix round 2 ---- */
/* Enemy tag sits above the guard's body (in the band above its square), never across it. */
.unit-overlay .hp-mini{top:auto;bottom:calc(var(--cell)*.95 + 1px)}
.hp-mini .hp-value{display:block}
/* Row 1 has no band above it (the column letters and legend are there), so a guard on row 1 keeps its tag at the top of its own square. */
.unit-overlay.top-row .hp-mini{bottom:auto;top:calc(var(--cell)*.92 + 1px)}
@media(max-width:350px),(orientation:landscape) and (max-height:500px){
  .unit-overlay .hp-mini{font-size:11px;padding:0 2px;line-height:1.15}
  .hp-mini .hp-kind{display:none}
  .hp-mini .hp-name,.hp-mini .hp-value{display:inline}
  .hp-mini .hp-name{margin-right:2px}
}
/* Compact battle (short portrait screens): board, end turn, danger and the chosen face fit without scrolling. */
.game.compact .main-actions .danger-toggle{flex:none;width:58px;height:48px;min-height:48px;padding:0 2px;font-size:12px;line-height:1.15;white-space:normal}
.game.compact .main-actions .sound-toggle{position:static;flex:none;width:48px;min-width:0;height:48px;padding:0;font-size:13px;box-shadow:none}
.game.compact .main-actions .button{font-size:14px;padding:0 3px}
.game.compact .main-actions{gap:4px}
.game.compact .portraits{margin-top:2px;align-items:stretch}
.game.compact .portrait-card{min-height:0!important;display:grid;grid-template-columns:1fr auto;grid-template-rows:44px auto;align-items:center}
.game.compact .portrait-card .portrait-picture{grid-column:1/-1;height:44px!important}
.game.compact .portrait-card .portrait-name,.game.compact .portrait-card .portrait-hp{font-size:12px;line-height:16px;padding:0 2px;white-space:nowrap;overflow:hidden}
.game.compact .battle-purpose{font-size:12px;line-height:1.25;margin-bottom:1px}
.game.compact .dock-heading{font-size:16px;min-height:22px}
.game.compact .battle{padding-top:2px}
.game.compact .portraits .portrait-card{flex:1!important}
.game.compact .main-actions .danger-toggle{width:60px;word-break:keep-all}
.landing.growth .growth-option{min-height:0}
@media(max-height:650px) and (orientation:portrait){.landing.growth .landing-hero{height:96px}.landing.growth .landing-title{margin-top:8px;padding:4px 12px}.growth-option img{height:56px}}
@media(max-height:650px) and (orientation:portrait){.landing.growth .landing-hero{display:none}.landing.growth .landing-paper{border-top-width:4px;padding-top:10px}.landing.growth .landing-paper .button{margin-top:8px}.landing.growth .growth-options{margin-top:6px}}
@media(orientation:landscape) and (max-height:340px){.landing.growth .growth-option{padding:4px 6px}.landing.growth .growth-option img{height:44px;margin-bottom:2px}.landing.growth .growth-option strong{font-size:18px;margin-bottom:0}.landing.growth .landing-paper .button{margin-top:8px}.landing.growth .growth-options{margin-top:4px}.landing.growth .landing-paper{padding-top:10px}}
html:has(.game.compact){scroll-padding-bottom:0}

/* ---- 2X fix round 3: 390/430 portrait use the compact battle too, with larger faces ---- */
@media(orientation:portrait) and (min-height:651px){
  .game.compact .scene{height:84px!important}
  .game.compact .portrait-card{grid-template-rows:96px auto}
  .game.compact .portrait-card .portrait-picture{height:96px!important}
  .game.compact .portrait-card .portrait-name,.game.compact .portrait-card .portrait-hp{font-size:14px;line-height:20px}
  .game.compact .battle-purpose{font-size:14px}
  .game.compact .dock-heading{font-size:19px;min-height:28px}
  .game.compact .main-actions .danger-toggle{width:72px;font-size:13px}
  .game.compact .main-actions .sound-toggle{width:52px}
  .game.compact .main-actions .button{font-size:16px}
}
@media(orientation:portrait) and (min-height:900px){.game.compact .scene{height:100px!important}.game.compact .portrait-card{grid-template-rows:116px auto}.game.compact .portrait-card .portrait-picture{height:116px!important}}
/* ---- 公開準備: title screen, demo end, feedback, credit ---- */
.title-logo{position:relative;max-width:calc(100% - 84px);padding:9px 16px 8px;border-width:3px 3px 5px;transform:rotate(-1.5deg);background:#f4e2b9 linear-gradient(#fff5d84d,#e7c98c33)}
.title-logo::after{content:"";position:absolute;inset:4px;border:1px dashed #a36d3799;pointer-events:none}
.title-logo .logo-series{margin:0;font-size:clamp(30px,9.4vw,46px);font-weight:900;line-height:1.05;letter-spacing:.04em;color:#b5221a;text-shadow:2px 2px 0 #f9eccd,3px 3px 0 #6b3a1d}
.title-logo h1{display:flex;align-items:center;gap:6px;margin:4px 0 1px;font-size:clamp(19px,5.4vw,26px);letter-spacing:.12em;color:#17304d}
.title-logo h1::before,.title-logo h1::after{content:"";flex:0 0 18px;height:3px;background:linear-gradient(90deg,#f8b33e,#c98a2f);border-radius:2px}
.title-logo .logo-sub{display:block;font-size:13px;letter-spacing:.08em;color:#6b4a2a}
.autosave-note{margin:10px 0 0;font-size:13px;line-height:1.35;text-align:center;color:#4a3a28}
.title-pvp{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:8px;padding:0 8px;border:2px solid #173c66;border-radius:7px;background:#f8ecd0;color:#173c66;font-weight:bold;text-decoration:none;text-align:center}
.title-pvp:focus-visible,.feedback-link:focus-visible{outline:3px solid #123a65;outline-offset:2px}
.credit{margin:12px 0 0;font-size:12px;line-height:1.4;text-align:center;color:#5a4730}
.demo-end{margin:12px 0 4px;padding:4px 0;border-top:2px dashed #a36d37;border-bottom:2px dashed #a36d37;font-size:16px;font-weight:bold;letter-spacing:.1em;color:#17304d}
.feedback-link{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:8px;border:2px solid #a36d37;border-radius:7px;background:#f8ecd0;color:#5b2f17;font-weight:bold;text-decoration:none}
@media(max-height:650px) and (orientation:portrait){.landing.home .landing-hero{height:clamp(130px,26vh,200px)}.title-logo{margin-top:8px;padding:6px 12px}.title-logo .logo-series{font-size:clamp(26px,8.4vw,36px)}}
@media(orientation:landscape) and (max-height:500px){.title-logo{max-width:calc(min(38%,100% - 260px) - 8px)}.title-logo .logo-series{font-size:min(30px,3.8vw)}.title-logo h1{font-size:min(19px,2.8vw)}.title-logo .logo-sub{font-size:12px}}
.stars-line{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px}
.stars{font-size:20px;line-height:1;letter-spacing:1px;color:#b8a27c}
.stars .on{color:#e09a1a;text-shadow:1px 1px 0 #7a4a12}
.stars-copy{font-size:13px}
.retry-button{display:block;width:100%;min-height:44px;margin-top:10px;border:2px solid #a36d37;border-radius:7px;background:#f8ecd0;color:#5b2f17;font:700 15px inherit;font-family:inherit;cursor:pointer}
.retry-button:focus-visible{outline:3px solid #123a65;outline-offset:2px}
.danger-toggle{min-height:44px}
.landing-story summary,.mission-story summary{text-decoration:underline;text-underline-offset:3px;font-weight:bold;list-style:none}
.landing-story summary::-webkit-details-marker,.mission-story summary::-webkit-details-marker{display:none}
.landing-story summary::before,.mission-story summary::before{content:"▶";display:inline-block;margin-right:6px;font-size:12px;text-decoration:none;transition:transform .15s}
.landing-story[open] summary::before,.mission-story[open] summary::before{transform:rotate(90deg)}
@media(orientation:portrait){.landing.home .landing-hero{flex:1 1 auto;min-height:clamp(200px,35vh,320px);height:auto;max-height:none}}
/* Title key picture: full-width art under the logo plate */
.landing.has-title-art{position:relative;background:#0d2847}
.landing.has-title-art .title-logo{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;margin:0;z-index:3}
/* The top quarter of the picture is canvas and sky: the logo plate sits there; the hero shows down to Post where the height allows. */
.landing.has-title-art .landing-hero{padding:0;flex:none;min-height:240px;height:min(calc(min(100vw,680px)*1.43),calc(100dvh - 290px))}
.landing.has-title-art .landing-hero .hero-art{object-fit:cover;object-position:50% 0;filter:none}
@media(orientation:landscape) and (max-height:500px){.landing.has-title-art .landing-hero{grid-row:1/3;height:auto;min-height:100vh}.landing.has-title-art .landing-hero .hero-art{object-position:50% 28%}}
@media(orientation:portrait){.landing-paper{flex:1 0 auto}}
/* ---- 点検2: one-line title at any width or font, landscape title art, HP note ---- */
.title-logo{width:calc(100% - 84px);max-width:440px;container-type:inline-size}
.title-logo .logo-series{white-space:nowrap;overflow:hidden;font-size:clamp(22px,7.6vw,44px)}
@supports (font-size:1cqw){.title-logo .logo-series{font-size:min(44px,calc(100cqw / 7.7))}}
@media(orientation:landscape) and (max-height:500px){
  .title-logo{width:calc(min(38%,100% - 260px) - 8px)}
  .landing:not(.has-title-art) .title-logo{width:calc(100% - 20px)}
  .landing.has-title-art{background:#0d2847 var(--title-art,none) no-repeat left 30%/max(190px,38%) auto}
}
.objective-card .hp-note{margin:4px 0 0;font-size:12px;opacity:.85}
.portrait-hp .hp-word{font-size:10px;margin-right:3px;font-weight:normal}
@media(max-width:360px){.portrait-hp .hp-word{display:none}}
.game.compact .portrait-hp .hp-word{display:none}
@media(orientation:landscape) and (max-height:500px){.landing:not(.home) .landing-title{margin:8px 10px 0;padding:5px 10px}.landing:not(.home) .landing-title h1{font-size:18px;line-height:1.2}.stars-line{flex-wrap:nowrap;white-space:nowrap;font-size:12px}.stars{font-size:16px}}
/* Mission 3: entrance on the teaser, and the next-line hook on the "つづく" screen. */
.teaser-card .mission3-start{display:block;width:100%;min-height:52px;margin:8px 0 6px}
.mission3-next{margin:10px 0 4px;font-size:17px;font-weight:bold;line-height:1.5;text-align:center;color:#8e1d17}
/* Landscape phones: the mission card sits over the board column only, and the title stays on one line, so card, title, goal and heading never overlap. */
@media(orientation:landscape) and (max-height:500px){.objective-card{top:52px;left:0;right:auto;width:calc(var(--board-width) + 20px);max-height:calc(100vh - 56px);overflow:hidden}.mission{top:12px}.mission h1{font-size:clamp(16px,2.6vw,22px);white-space:nowrap}}

/* ---- 2X design round: closer to ui-battle-concept-v1 (stone board, parchment tab, navy canvas + brass, 3-row dock) ---- */
:root{--mincho:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;--gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;font-family:var(--gothic)}
/* Two type faces only: one mincho for headings and the title, one gothic for everything else. */
h1,h2,.logo-series,.teaser-title,.objective-card strong,.interlude-card h2,.seal{font-family:var(--mincho)}
.hp-mini,.portrait-card .portrait-hp,.float-number,.threat-mark,.sword-badge,.heal-badge,.coach,.sound-toggle,.retry-button{font-family:var(--gothic)}

/* Top: mission tab with a wax seal, whose turn under the title; legend at the top right. */
.scene .mission{left:8px;top:6px;display:flex;align-items:center;min-width:176px;max-width:calc(100% - 136px);padding:5px 16px 6px 50px;background:url(assets/ui/mission-tab-plain-crop-v1.webp) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;transform:none;filter:drop-shadow(1px 3px 2px #06172a80);color:#2a1a0e}
.mission .seal{position:absolute;left:3px;top:50%;width:44px;height:44px;translate:0 -50%;display:grid;place-items:center;background:url(assets/ui/seal-crop-v1.webp) center/contain no-repeat;color:#fff3d8;font-size:21px;font-weight:700;text-shadow:0 1px 1px #5c0b07}
.mission-copy{min-width:0}
.mission small{font-size:12px;line-height:1.1;letter-spacing:.1em;color:#6b3a1d}
.mission h1{font-size:clamp(17px,4.9vw,24px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .mission .turn-label{position:static;display:block;padding:0;margin-top:1px;background:none;color:#5a3418;font-size:12px;font-weight:700;line-height:1.2;border-radius:0}
.scene-tools{position:absolute;top:4px;right:6px;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.scene-tools .sound-toggle{position:static;box-shadow:0 2px 3px #06172a8c}
.scene .legend{display:flex;width:auto;margin:0;gap:4px;min-height:0;font-size:12px}
.scene .legend span{gap:3px;padding:2px 6px 2px 3px;background:#102744e6;color:#fff4dc;border:1px solid #c99a4f;border-radius:4px;line-height:1.2}
.scene .legend .swatch{width:16px;height:16px;border:0;background:center/100% 100% no-repeat}
.scene .legend .swatch.move{background-image:url(assets/ui/tile-move-v1.webp)}
.scene .legend .swatch.attack{background-image:url(assets/ui/icon-sword-v1.webp);background-color:transparent}

/* Board: bright flagstones, clear blue moves, red frames on targets, danger only as a pink outline. */
.board{background:#7f776a;box-shadow:0 0 0 3px #a49b87,0 0 0 6px #5b5446,0 4px 10px 6px #0b1d3366}
.cell,.cell.terrain{background:#e7d3a8 url(assets/ui/tile-floor-v1.webp) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none}
.cell::before{inset:3px}
.cell.move::before{background:url(assets/ui/tile-move-v1.webp) center/100% 100% no-repeat;opacity:.86;border:0;border-radius:3px;box-shadow:0 0 6px #5fd0ff99}
.cell.danger::before{background:repeating-linear-gradient(135deg,#ff6f9a2e 0 4px,transparent 4px 9px);border:2px dashed #e0457a;border-radius:3px;box-shadow:none}
.cell.move.danger::before{background:url(assets/ui/tile-move-v1.webp) center/100% 100% no-repeat;opacity:.9;border:2px dashed #e0457a;box-shadow:none}
.cell.attack-target::before{background:#ff3b2e2e;border:3px solid #e2261b;border-radius:3px;box-shadow:0 0 0 1px #ffd9a0,0 0 10px #ff3b30}
.cell.current::after{inset:1px;transform:none;border:0;background:url(assets/ui/tile-select-v1.webp) center/100% 100% no-repeat;box-shadow:none;opacity:.9}
.threat-mark{background:#c2185b;border:1px solid #fff}
.columns{background:none;border:0;color:#fff4dc;text-shadow:0 1px 2px #06172a;font-size:12px;opacity:.85}
.rows{background:none;color:#fff4dc;text-shadow:0 1px 2px #06172a;font-size:12px;opacity:.85}
/* Characters: a dark outline and a shadow at the feet so they read on the light stone. */
.unit-overlay .unit-sprite{filter:drop-shadow(1px 0 0 #24170e) drop-shadow(-1px 0 0 #24170e) drop-shadow(0 1px 0 #24170e) drop-shadow(0 -1px 0 #24170e) drop-shadow(0 3px 2px #0b0a0880)}
.unit-overlay.targetable .unit-sprite{filter:drop-shadow(1px 0 0 #24170e) drop-shadow(-1px 0 0 #24170e) drop-shadow(0 1px 0 #24170e) drop-shadow(0 -1px 0 #24170e) drop-shadow(0 0 4px #ff3b30)}
.unit-overlay.repairable .unit-sprite{filter:drop-shadow(1px 0 0 #24170e) drop-shadow(-1px 0 0 #24170e) drop-shadow(0 1px 0 #24170e) drop-shadow(0 -1px 0 #24170e) drop-shadow(0 0 4px #3ccf61)}
.unit-overlay .foot-shadow{left:12%;right:12%;bottom:-3px;height:16%;background:radial-gradient(ellipse,#1a120bb3 0%,#1a120b00 70%)}
/* Enemy tag: the red sword plate, one line (letter + HP); the full name stays in the markup and the aria label. */
.unit-overlay .hp-mini{display:flex;align-items:center;gap:2px;padding:2px 5px 2px 19px;min-height:19px;background:url(assets/ui/enemy-tag-v1.webp) left center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;font-size:11px;line-height:1;filter:drop-shadow(0 1px 1px #24120d99)}
.unit-overlay .hp-mini .hp-kind{display:none}
.unit-overlay .hp-mini .hp-name,.unit-overlay .hp-mini .hp-value{display:inline;font-size:11px}
.sword-badge,.heal-badge{width:24px;height:24px;min-width:0;border:0;border-radius:4px;background:url(assets/ui/icon-sword-v1.webp) center/contain no-repeat;color:transparent;font-size:0;box-shadow:0 1px 2px #24120d9c}
.heal-badge{background-image:url(assets/ui/icon-repair-v1.webp)}

/* Dock: navy canvas with stitching and a rope edge. Three rows: goal strip, faces, buttons. */
.dock{position:relative;background-color:#13294a;background-image:linear-gradient(#0b1f3dc4,#0a1c38d6),var(--fabric-image,none);background-size:100% 100%;padding-top:11px}
.dock::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(115deg,#d8b277 0 4px,#8a5f33 4px 7px);box-shadow:0 2px 3px #06172a99}
.dock::after{content:"";position:absolute;inset:12px 4px 4px;border:2px dashed #c08a4a73;border-radius:8px;pointer-events:none}
.dock>:not(.main-actions){position:relative;z-index:1}
.dock-strip{display:flex;align-items:center;gap:6px;min-height:50px;padding:3px 4px 3px 8px;border-style:solid;border-width:5px 10px;border-image:url(assets/ui/mission-tab-plain-crop-v1.webp) 30 40 fill / 5px 10px stretch;border-color:#e9d3a4;background:none;color:#2a1a0e;filter:drop-shadow(0 2px 2px #06172a8c)}
.strip-icon{flex:none;width:30px;height:30px;background:url(assets/ui/icon-sword-v1.webp) center/contain no-repeat}
.strip-icon.goal{background-image:url(assets/ui/icon-goal-v1.webp)}
.strip-text{flex:1;min-width:0}
.dock .battle-purpose,.dock .enemy-info{margin:0;padding:0;border:0;background:none;text-align:left;font-size:12px;line-height:1.3;font-weight:700;color:#5a3418}
.dock .enemy-info{color:#8a1f4a}
.purpose-label{color:#9b2a1a}
.dock .dock-heading{min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;color:#142845;font-size:17px;line-height:1.25}
.dock .mission-story{flex:none;margin:0;color:#173a64}
.dock .mission-story summary{min-height:44px;padding:0 4px 0 8px;border-left:1px dashed #a36d37;font-size:13px}
.story-pop{position:absolute;right:0;bottom:calc(100% + 8px);width:min(320px,86vw);max-height:46vh;overflow:auto;padding:6px 8px;background:#f6e6c2;border:2px solid #a36d37;border-radius:6px;box-shadow:0 4px 10px #06172aa6;z-index:30;text-align:left}
.dock .mission-story .story-line{background:none;color:#152944;padding:0}
/* Face cards: navy canvas frame with brass rivets; the chosen one glows gold. */
.portrait-card,.game.compact .portrait-card{border-style:solid;border-width:7px;border-image:url(assets/ui/card-frame-v1.webp) 40 fill / 7px stretch;border-color:#1b355c;border-radius:0;background:none;box-shadow:none;padding:0 0 3px}
.portrait-card.active,.game.compact .portrait-card.active{border-image:url(assets/ui/card-frame-selected-v1.webp) 48 fill / 8px stretch;border-width:8px;box-shadow:0 0 12px 2px #ffd34d8c}
.portrait-card .portrait-picture,.portrait-card:not(.active) .portrait-picture{background:#eadcbc}
.portrait-card .portrait-name{background:none!important;color:#1d2a3a;text-align:left;padding:0 3px}
.portrait-card .portrait-hp{background:none;color:#1d2a3a;text-align:right;padding:0 3px;font-size:12px}
.portrait-hp b{font-size:16px}
.hp-bar{display:block;height:8px;margin:1px 3px 0;background:#2b2a26;border:1px solid #8a6a3a;border-radius:4px;overflow:hidden}
.hp-bar i{display:block;height:100%;background:linear-gradient(#8af397,#2ea44a);border-radius:3px}
.portrait-card.done .portrait-picture{filter:grayscale(.7) brightness(.9)}
.game.compact .portrait-card{grid-template-rows:44px auto auto}
.game.compact .portrait-card .hp-bar{grid-column:1/-1}
@media(orientation:portrait) and (min-height:651px){.game.compact .portrait-card{grid-template-rows:96px auto auto}}
@media(orientation:portrait) and (min-height:900px){.game.compact .portrait-card{grid-template-rows:116px auto auto}}
/* Bottom row: rope edge, small 危険, one large main button, 手番終了. */
.dock .main-actions{background:linear-gradient(#0f2a4cf2,#081a33f7)}
.dock .main-actions::before{content:"";position:absolute;left:0;right:0;top:-4px;height:5px;background:repeating-linear-gradient(115deg,#d8b277 0 4px,#8a5f33 4px 7px);border-radius:3px}
.main-actions .main-act{flex:1.7}
.main-actions .end-turn,.main-actions .wait,.main-actions .back{flex:1 1 0;min-width:0}
.end-icon{display:block;font-size:11px;line-height:1;letter-spacing:-2px;opacity:.9}
.danger-toggle{border:2px solid #c99a4f;border-radius:6px;background:linear-gradient(#5a3480,#3c2058);color:#fff;box-shadow:inset 0 0 0 1px #9b6fc4}
.danger-toggle[aria-pressed="true"]{background:linear-gradient(#a33d78,#6e2252);box-shadow:inset 0 0 0 1px #ff9ac4,0 0 6px #ff6f9a}

/* Buttons: navy canvas + brass (primary), navy plate (secondary), parchment with brass corners (plain). Pressing shrinks them. */
.button{border-style:solid;border-width:8px;border-image:url(assets/ui/btn-secondary-v1.webp) 34 fill / 8px stretch;border-color:#d8b988;background:none;color:#2a1a0e;border-radius:0;box-shadow:none;padding:0 4px;transition:scale .08s}
.button.primary{border-width:9px 16px;border-image:url(assets/ui/btn-primary-v1.webp) 56 84 fill / 9px 16px stretch;border-color:#b8873a;background:none;color:#fff6dc;text-shadow:0 1px 2px #06172a;box-shadow:none}
.button.secondary{border-width:7px;border-image:url(assets/ui/icon-frame-v1.webp) 30 fill / 7px stretch;border-color:#b8873a;background:none;color:#fff6dc}
.button:active:not(:disabled){scale:.95}
.button.primary:active:not(:disabled){border-image-source:url(assets/ui/btn-primary-pressed-v1.webp)}
.button:not(.primary):not(.secondary):active:not(:disabled){border-image-source:url(assets/ui/btn-secondary-pressed-v1.webp)}
.button:disabled,.button.primary:disabled{filter:grayscale(1) brightness(.92);opacity:.7}
.button.coached{box-shadow:0 0 0 3px #ffd979}
.main-actions .button.big{font-size:18px}
.game.compact .main-actions .button.primary{border-width:8px 10px;border-image-width:8px 10px}
.pvp-link{border:2px solid #c99a4f;background:linear-gradient(#1d4673,#102a4a);box-shadow:inset 0 0 0 1px #6f8fb8}
.pvp-link:active,.title-pvp:active,.feedback-link:active,.retry-button:active{scale:.97}
/* Stars: gold stars that drop in one at a time. */
.stars span{display:inline-block;width:22px;text-align:center}
.stars .on{color:transparent;text-shadow:none;background:url(assets/ui/star-full-v1.webp) center/contain no-repeat}

/* Effects: tap hop, hit sparks + recoil, rising number, defeat flash + smoke, repair ring, move dust, victory flash. */
.fx{position:absolute;width:calc(var(--cell)*1.5);height:calc(var(--cell)*1.5);margin:calc(var(--cell)*-.25) 0 0 calc(var(--cell)*-.25);z-index:37;pointer-events:none;background:center/contain no-repeat;opacity:0}
.fx-dust{width:var(--cell);height:calc(var(--cell)*.7);margin:calc(var(--cell)*.45) 0 0}
@media(prefers-reduced-motion:no-preference){
  .unit-overlay.picked{animation:unit-hop .34s cubic-bezier(.3,1.6,.5,1)}
  .unit-overlay.hit{animation:unit-recoil .42s ease-out}
  .float-number{font-size:26px;animation:float-pop .95s ease-out forwards}
  .fx-spark{animation:fx-spark .36s steps(1,end) forwards}
  .fx-flash{animation:fx-flash .42s steps(1,end) forwards}
  .fx-smoke{animation:fx-smoke .9s steps(1,end) forwards}
  .fx-repair{animation:fx-repair .6s steps(1,end) forwards}
  .fx-dust{animation:fx-dust .45s steps(1,end) forwards}
  .landing.won .landing-hero::after{content:"";position:absolute;left:25%;right:25%;top:12%;height:50%;z-index:3;pointer-events:none;background:center/contain no-repeat;opacity:0;animation:fx-victory .9s steps(1,end) .2s forwards}
  .stars .on{animation:star-in .45s cubic-bezier(.3,1.6,.5,1) both}
  .stars .on:nth-child(1){animation-delay:.25s}
  .stars .on:nth-child(2){animation-delay:.6s}
  .stars .on:nth-child(3){animation-delay:.95s}
}
@keyframes unit-hop{0%,100%{translate:0 0}40%{translate:0 -10px}70%{translate:0 2px}}
@keyframes unit-recoil{0%,100%{translate:0 0;rotate:0deg}20%{translate:6px -2px;rotate:9deg}55%{translate:-2px 0;rotate:-3deg}}
@keyframes float-pop{0%{opacity:1;scale:.6;translate:0 0}18%{opacity:1;scale:1.35}35%{scale:1}100%{opacity:0;translate:0 calc(var(--cell)*-.95)}}
@keyframes fx-spark{0%{opacity:1;background-image:url(assets/fx/spark-1-v1.webp)}25%{opacity:1;background-image:url(assets/fx/spark-2-v1.webp)}50%{opacity:1;background-image:url(assets/fx/spark-3-v1.webp)}75%{opacity:1;background-image:url(assets/fx/spark-4-v1.webp)}100%{opacity:0}}
@keyframes fx-flash{0%{opacity:1;background-image:url(assets/fx/flash-1-v1.webp)}33%{opacity:1;background-image:url(assets/fx/flash-2-v1.webp)}66%{opacity:1;background-image:url(assets/fx/flash-3-v1.webp)}100%{opacity:0}}
@keyframes fx-smoke{0%{opacity:1;translate:0 0;background-image:url(assets/fx/smoke-1-v1.webp)}25%{opacity:1;translate:0 -4px;background-image:url(assets/fx/smoke-2-v1.webp)}50%{opacity:.9;translate:0 -8px;background-image:url(assets/fx/smoke-3-v1.webp)}75%{opacity:.7;translate:0 -12px;background-image:url(assets/fx/smoke-4-v1.webp)}100%{opacity:0}}
@keyframes fx-repair{0%{opacity:1;background-image:url(assets/fx/repair-1-v1.webp)}33%{opacity:1;background-image:url(assets/fx/repair-2-v1.webp)}66%{opacity:1;background-image:url(assets/fx/repair-3-v1.webp)}100%{opacity:0}}
@keyframes fx-dust{0%{opacity:.9;background-image:url(assets/fx/dust-1-v1.webp)}33%{opacity:.8;background-image:url(assets/fx/dust-2-v1.webp)}66%{opacity:.6;background-image:url(assets/fx/dust-3-v1.webp)}100%{opacity:0}}
@keyframes fx-victory{0%{opacity:1;background-image:url(assets/fx/flash-1-v1.webp)}25%{opacity:1;background-image:url(assets/fx/flash-2-v1.webp)}50%{opacity:1;background-image:url(assets/fx/flash-3-v1.webp)}75%{opacity:1;background-image:url(assets/fx/flash-4-v1.webp)}100%{opacity:0}}
@keyframes star-in{0%{opacity:0;scale:2.2;rotate:-25deg}100%{opacity:1;scale:1;rotate:0deg}}
@media(prefers-reduced-motion:reduce){.fx{display:none}}

/* Short portrait screens (320×568 etc.): smaller seal and strip so board, faces and buttons still fit without scrolling. */
@media(max-height:650px){.mission .seal{width:30px;height:30px;font-size:15px}.scene .mission{padding:2px 10px 2px 36px;min-width:0}.scene .mission .turn-label{display:none}.dock-strip{min-height:40px;padding:1px 4px}.strip-icon{width:22px;height:22px}.dock .dock-heading{font-size:14px}.dock .battle-purpose,.dock .enemy-info{font-size:12px;line-height:1.2}.dock .mission-story summary{min-height:40px}}
@media(max-width:350px) and (max-height:650px){.mission .seal{width:22px;height:22px;font-size:12px}.scene .mission{padding:1px 8px 1px 26px}.main-actions .end-icon{display:none}}
@media(orientation:landscape) and (max-height:500px){.scene .mission{max-width:calc(100% - 140px)}.scene .legend span{padding:1px 4px}.dock-strip{min-height:42px}.dock .dock-heading{font-size:15px}}
/* Face cards: name on its own line; HP number and bar share the line below. */
.game.compact .portrait-card{grid-template-columns:1fr auto;grid-template-rows:44px auto auto}
.game.compact .portrait-card .portrait-name{grid-column:1/-1;grid-row:2}
.game.compact .portrait-card .portrait-hp{grid-column:2;grid-row:3;line-height:18px}
.game.compact .portrait-card .hp-bar{grid-column:1;grid-row:3;align-self:center;margin-right:2px}
@media(orientation:portrait) and (min-height:651px){.game.compact .portrait-card{grid-template-rows:92px auto auto}.game.compact .portrait-card .portrait-picture{height:92px!important}}
@media(orientation:portrait) and (min-height:900px){.game.compact .portrait-card{grid-template-rows:112px auto auto}.game.compact .portrait-card .portrait-picture{height:112px!important}}
.game.compact .portrait-card .portrait-name,.game.compact .portrait-card .portrait-hp{line-height:18px}
/* Goal strip: the next step on one line where it fits. */
.dock-strip{gap:4px;padding:2px 2px 2px 4px}
.strip-icon{width:26px;height:26px}
.dock .dock-heading{font-size:15px}
.dock .mission-story summary{padding:0 2px 0 6px}
.dock .mission-story summary::before{display:none}
@media(max-width:360px){.strip-icon{display:none}}
.main-actions .button{white-space:nowrap}
.main-actions .end-turn,.main-actions .wait,.main-actions .back{font-size:15px}
.game.compact .main-actions .end-turn,.game.compact .main-actions .wait{font-size:14px;padding:0 1px}
.stars{font-size:22px}
/* One floor picture for the whole board: its inner 6×7 grid (780×910 of 898×1033) lines up with the squares; the stone rim sits outside. */
.game.has-floor .board{background:none;box-shadow:none}
.game.has-floor .board::before{content:"";position:absolute;left:-7.8205%;top:-5.1648%;width:115.1282%;height:113.5165%;background:var(--board-floor) center/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 4px 6px #0b1d3399)}
.game.has-floor .cell,.game.has-floor .cell.terrain{background:transparent}
.game.has-floor .columns{position:relative;z-index:1}
.game.has-floor .rows{z-index:1}
.ending-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* Short portrait screens: the goal line folds away (the mission card shows it at the start); the next step stays on one line. */
@media(orientation:portrait) and (max-height:650px){.dock .battle-purpose{display:none}.dock .dock-heading{font-size:13px}.dock-strip{min-height:36px}.dock .mission-story summary{font-size:12px}}
@media(max-width:350px) and (max-height:650px){.game.compact .main-actions .danger-toggle{width:50px;font-size:11px}.game.compact .main-actions .sound-toggle{width:40px;font-size:12px}.game.compact .main-actions .button{font-size:13px}}
/* Short portrait screens: name and HP share one line under the face; thinner frames. */
@media(orientation:portrait) and (max-height:650px){
  .game.compact .portrait-card{border-width:4px;border-image-width:4px;grid-template-rows:44px auto auto}
  .game.compact .portrait-card.active{border-width:5px;border-image-width:5px}
  .game.compact .portrait-card .portrait-name{grid-column:1;grid-row:2;font-size:12px;line-height:16px}
  .game.compact .portrait-card .portrait-hp{grid-column:2;grid-row:2;font-size:11px;line-height:16px}
  .game.compact .portrait-hp b{font-size:13px}
  .game.compact .portrait-card .hp-bar{grid-column:1/-1;grid-row:3;height:5px;margin:0 2px}
}
@media(max-width:350px) and (max-height:650px){.dock .dock-heading{font-size:12px;white-space:nowrap}.dock .mission-story summary{padding:0 0 0 4px}}
@media(orientation:portrait) and (max-height:650px){.game.compact .portrait-card{grid-template-columns:max-content minmax(0,1fr)}.game.compact .portrait-card .portrait-hp{text-align:right}}
@media(max-width:350px) and (max-height:650px){.game.compact .portrait-card .portrait-hp{font-size:10px;padding:0 1px}.game.compact .portrait-hp b{font-size:12px}.game.compact .portrait-card .portrait-name{padding:0 1px}}
@media(orientation:portrait) and (max-height:650px){.game.compact .dock{padding-top:9px}.game.compact .dock::after{inset:10px 3px 3px}.game.compact .main-actions .button.big{min-height:48px}.game.compact .dock .main-actions{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}.game.compact .dock-strip{border-width:4px 8px;border-image-width:4px 8px;min-height:0}.game.compact .dock .mission-story summary{min-height:36px}}
/* Landscape phones: compact strip and face cards so the dock column fits the screen height. */
@media(orientation:landscape) and (max-height:500px){
  .strip-icon{display:none}
  .dock-strip{min-height:0;border-width:4px 8px;border-image-width:4px 8px;padding:1px 2px}
  .dock .battle-purpose,.dock .enemy-info{font-size:12px;line-height:1.2}
  .dock .dock-heading{font-size:14px;line-height:1.2}
  .dock .mission-story summary{min-height:40px}
  .dock{padding-top:9px}
  .portrait-card,.portrait-card.active{border-width:4px;border-image-width:4px;padding-bottom:2px}
  .portrait-picture{height:58px}
  .portraits:has(.portrait-card.active) .portrait-card.active .portrait-picture{height:66px}
  .portraits:has(.portrait-card.active) .portrait-card:not(.active) .portrait-picture{height:52px}
  .portrait-card .portrait-name{line-height:1.2}
  .portrait-card .portrait-hp{line-height:1.2;white-space:nowrap}
  .portrait-hp .hp-word{display:none}
  .hp-bar{height:5px}
  .main-actions .button.big{min-height:48px}
  .dock .main-actions{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}
}
@media(orientation:landscape) and (max-height:500px){
  .portrait-picture{height:50px}
  .portraits:has(.portrait-card.active) .portrait-card.active .portrait-picture{height:54px}
  .portraits:has(.portrait-card.active) .portrait-card:not(.active) .portrait-picture{height:44px}
  .portraits{margin-top:4px}
  .dock .mission-story summary{min-height:36px}
  .dock{padding-top:8px}
  .dock .dock-heading{line-height:1.15}
}
@media(orientation:landscape) and (max-height:500px){
  .portrait-card{position:relative}
  .portrait-card .hp-bar{position:absolute;left:3px;right:3px;top:calc(var(--pic-h,50px) - 8px);margin:0;z-index:2}
  .portraits:has(.portrait-card.active) .portrait-card.active{--pic-h:54px}
  .portraits:has(.portrait-card.active) .portrait-card:not(.active){--pic-h:44px}
  .dock .battle-purpose,.dock .enemy-info{line-height:1.15}
  .dock .main-actions{padding-top:3px;padding-bottom:max(3px,env(safe-area-inset-bottom))}
}
@media(orientation:landscape) and (max-height:500px){
  .portrait-card{--pic-h:46px}
  .portrait-picture{height:46px}
  .portraits:has(.portrait-card.active) .portrait-card.active{--pic-h:48px}
  .portraits:has(.portrait-card.active) .portrait-card.active .portrait-picture{height:48px}
  .portraits:has(.portrait-card.active) .portrait-card:not(.active){--pic-h:42px}
  .portraits:has(.portrait-card.active) .portrait-card:not(.active) .portrait-picture{height:42px}
}
/* Landscape battle: the page scrolls a little to keep the chosen square in view, so the mission tab sits lower in its row and stays on screen. */
@media(orientation:landscape) and (max-height:500px){.scene .mission{top:16px}.scene-tools{top:14px}}
@media(orientation:landscape) and (max-height:500px){
  .portrait-card{--pic-h:56px}
  .portrait-picture{height:56px}
  .portraits:has(.portrait-card.active) .portrait-card.active{--pic-h:62px}
  .portraits:has(.portrait-card.active) .portrait-card.active .portrait-picture{height:62px}
  .portraits:has(.portrait-card.active) .portrait-card:not(.active){--pic-h:52px}
  .portraits:has(.portrait-card.active) .portrait-card:not(.active) .portrait-picture{height:52px}
}
/* Solid colours under the button art (also what contrast checkers measure); a sharp text shadow. */
.button{background-color:#f1dfb8}
.button.primary{background-color:#163763;text-shadow:0 1px 0 #06172a}
.button.secondary{background-color:#13294a}
.button:disabled,.button.primary:disabled{background-color:#8a8a8a}
.button{background-clip:padding-box}

/* ---- design round 2 (版 5a475ea9 の指摘) ---- */
/* 1. Main button: large, navy canvas + brass, crossed swords before the label. */
.main-actions .main-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:19px;letter-spacing:.04em}
.act-icon{flex:none;width:26px;height:26px;background:url(assets/ui/swords-glyph-crop-v1.webp) center/contain no-repeat;filter:drop-shadow(0 1px 0 #06172a)}
.main-actions .end-turn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.main-actions .end-icon{font-size:14px;letter-spacing:-3px;margin-bottom:1px}
@media(orientation:portrait) and (min-height:651px){.game.compact .main-actions .main-act{min-height:56px;font-size:20px}.game.compact .main-actions .act-icon{width:28px;height:28px}}
@media(max-width:350px){.act-icon{width:20px;height:20px}.main-actions .main-act{gap:3px}}
/* 2. Enemy plate: the red sword board with HP only; the name is read out, not drawn. */
.unit-overlay .hp-mini{min-height:22px;padding:2px 7px 2px 22px;font-size:12px}
.unit-overlay .hp-mini .hp-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.unit-overlay .hp-mini .hp-value{font-size:12px;letter-spacing:.02em}
/* 4. Job icons before the names (from the concept: wrench, book, envelope). */
.role-icon{display:inline-block;width:16px;height:16px;margin-right:3px;vertical-align:-3px;background:center/contain no-repeat}
.role-nagi{background-image:url(assets/ui/role-nagi-crop-v1.webp)}
.role-tooru{background-image:url(assets/ui/role-tooru-crop-v1.webp)}
.role-post{background-image:url(assets/ui/role-post-crop-v1.webp)}
@media(orientation:portrait) and (min-height:651px){.game.compact .role-icon{width:18px;height:18px}}
/* 3. Portrait phones: the strip carries the next step only (the goal sits in 詳しく and the mission card), so the harbour band can be taller. */
@media(orientation:portrait){.game.compact .dock .battle-purpose{display:none}}
.story-goal{margin:0 0 4px;font-weight:700;color:#9b2a1a;font-size:14px}
@media(orientation:portrait) and (min-height:651px){.game.compact .scene{height:98px!important}}
@media(orientation:portrait) and (min-height:880px){.game.compact .scene{height:134px!important}}
@media(orientation:portrait) and (min-height:920px){.game.compact .scene{height:148px!important}}
.scene.has-image{background-position:center 40%}
/* Mid-height phones (iPhone SE/8 class, 651–760px): smaller band, faces and main button so the battle fits without scrolling. */
@media(orientation:portrait) and (min-height:651px) and (max-height:760px){
  .game.compact .scene{height:62px!important}
  .game.compact .portrait-card{grid-template-rows:54px auto auto}
  .game.compact .portrait-card .portrait-picture{height:54px!important}
  .game.compact .main-actions .main-act{min-height:48px;font-size:18px}
  .game.compact .dock .main-actions{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}
  .game.compact .dock{padding-top:9px}
}
@media(orientation:portrait) and (min-height:651px) and (max-height:760px){
  .game.compact{--board-width:max(264px,min(calc(100vw - 44px),350px,calc((100dvh - 342px)*6/7)))}
  .game.compact .portrait-card{border-width:5px;border-image-width:5px;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:54px auto auto}
  .game.compact .portrait-card.active{border-width:6px;border-image-width:6px}
  .game.compact .portrait-card .portrait-name{grid-column:1;grid-row:2;font-size:13px;line-height:17px}
  .game.compact .portrait-card .portrait-hp{grid-column:2;grid-row:2;font-size:11px;line-height:17px;text-align:right}
  .game.compact .portrait-hp b{font-size:14px}
  .game.compact .portrait-card .hp-bar{grid-column:1/-1;grid-row:3;height:6px;margin:0 2px 1px}
  .game.compact .dock .dock-heading{font-size:14px}
  .game.compact .dock-strip{min-height:0}
}

/* ---- design round 3 (確かめ役の見比べ 5a475ea9) ---- */
/* 3. Enemy plate: plain red board, "A 12" (letter and HP apart); the attack mark stays outside the plate. */
.unit-overlay .hp-mini{gap:4px;padding:2px 7px;min-height:22px;background:url(assets/ui/enemy-plate-crop-v1.webp) center/100% 100% no-repeat}
.hp-mini .hp-letter{font-size:13px;font-weight:900;padding-right:4px;border-right:1px solid #ffd9a0aa;line-height:1}
.unit-overlay .hp-mini .hp-value{font-size:13px;font-weight:700}
.hp-mini .hp-unit{font-size:9px;margin-right:1px;opacity:.9}
.sword-badge,.heal-badge{right:-8px;bottom:calc(var(--cell)*.18)}
/* 4. Soft round hit light (no white square); the damage number sits in front of the sparks. */
.hit-flash{background:radial-gradient(circle,#fffbe6 0,#fffbe6cc 30%,#fff0 68%)}
.fx{-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
.fx-dust{-webkit-mask-image:none;mask-image:none}
.float-number{z-index:40}
/* 5. Attack buttons are red with the crossed-swords mark, apart from the navy of moving and acting. */
.button.primary.attack-act{border:3px solid #e2b25a;border-image:none;border-radius:12px;background:linear-gradient(#d23a2e,#97201a);background-clip:border-box;color:#fff6dc;box-shadow:inset 0 0 0 2px #ffcf8a66,inset 0 -3px 0 #6d140f,0 2px 3px #06172a8c}
.button.primary.attack-act:active:not(:disabled){background:linear-gradient(#a8261d,#7b1712)}
.attack-act .act-icon{width:24px;height:24px;background-image:url(assets/ui/icon-sword-v1.webp);border-radius:4px;box-shadow:0 0 0 1px #ffe2a0}
.game.compact .main-actions .button.primary.attack-act{border-width:3px}
/* 2. The next step stays on one line at 320–430 (the text scales down a little with the strip width). */
.strip-text{container-type:inline-size}
.dock .dock-heading{font-size:min(15px,calc(100cqw / 18.6))}
@media(orientation:landscape) and (max-height:500px){.dock .dock-heading{font-size:min(14px,calc(100cqw / 18.6))}}
.game .dock-strip .strip-text .dock-heading,.game.compact .dock-strip .strip-text .dock-heading{font-size:min(15px,calc(100cqw / 18.6));line-height:1.25;white-space:normal}
@media(orientation:landscape) and (max-height:500px){.game .dock-strip .strip-text .dock-heading{font-size:min(14px,calc(100cqw / 18.6))}}
/* 6. Title plate: the kit's parchment board stretched wider and taller; the lettering stays in the font. */
.landing .title-logo{border-style:solid;border-width:10px 18px;border-image:url(assets/ui/mission-tab-plain-crop-v1.webp) 30 44 fill / 10px 18px stretch;border-color:#e9d3a4;background:none;box-shadow:none;padding:10px 12px 12px;transform:rotate(-1deg);filter:drop-shadow(2px 5px 4px #06172a99)}
.landing .title-logo::after{inset:2px;border-color:#a36d3766}
.landing .title-logo .logo-series{text-shadow:1px 1px 0 #f9eccd,2px 3px 0 #6b3a1d}
@media(orientation:portrait) and (min-height:651px){.landing .title-logo{padding:14px 14px 16px}.landing .title-logo h1{margin-top:8px}}
@media(orientation:landscape) and (max-height:500px){.landing .title-logo{border-width:6px 12px;border-image-width:6px 12px;padding:6px 8px 8px}}

/* ---- design round 4 (21af2005 の確かめ) ---- */
/* 1. Frames for the chosen target / destination draw in front of the sprites (lower rows already stand in front of upper rows). */
.board .cell.attack-target,.board .cell.repair-target,.board .cell.preview{z-index:20}
.board .cell.attack-target::before,.board .cell.repair-target::before{background:none}
.board .cell.attack-target{background:#ff3b2e1f}
/* 3. 320×568: sound beside the mission tab (a taller band, a slightly smaller board), HP shows the current value only, 危険 wraps instead of cutting. */
@media(max-width:350px) and (max-height:650px) and (orientation:portrait){
  .game.compact{--board-width:264px}
  .game.compact .scene{height:52px!important}
  .game.compact .scene-tools{top:2px;right:4px;flex-direction:row;align-items:center;gap:4px}
  .game.compact .scene-tools .sound-toggle{width:46px;min-width:0;height:48px;padding:0;font-size:12px}
  .game.compact .scene .legend{flex-direction:column;gap:2px}
  .game.compact .scene .mission{top:6px;max-width:calc(100% - 128px)}
  .game.compact .portrait-card{grid-template-rows:34px auto auto}
  .game.compact .portrait-card .portrait-picture{height:34px!important}
  .game.compact .hp-max{display:none}
  .game.compact .main-actions .danger-toggle{width:56px;font-size:11px;line-height:1.1;white-space:normal;word-break:normal;overflow-wrap:anywhere;padding:0 2px}
}
/* 4. Low portrait screens: a shorter title picture so はじめる, 模擬戦 and the credit fit on the first screen. */
@media(orientation:portrait) and (max-height:760px){
  .landing.has-title-art .landing-hero{min-height:150px;height:max(150px,calc(100dvh - 430px))}
  .landing.home .landing-paper{padding-top:10px}
  .landing.home .landing-lead{font-size:16px;margin-bottom:4px}
  .landing.home .landing-paper .button{margin-top:6px}
  .landing.home .autosave-note{margin-top:4px}
  .landing.home .title-pvp{margin-top:6px}
  .landing.home .credit{margin-top:6px}
}
@media(max-width:350px) and (max-height:650px) and (orientation:portrait){
  .game.compact .scene{height:49px!important}
  .game.compact .portrait-card{position:relative;grid-template-columns:minmax(0,1fr)}
  .game.compact .portrait-card .portrait-name{grid-column:1}
  .game.compact .portrait-card .portrait-hp{position:absolute;right:1px;top:18px;padding:0 3px;border-radius:3px;background:#102744d9;color:#fff;font-size:10px;line-height:15px}
  .game.compact .portrait-card .hp-bar{grid-column:1}
}
@media(max-width:350px) and (max-height:650px) and (orientation:portrait){.game.compact .portrait-card .portrait-hp{grid-area:auto;top:17px}}
/* Danger button: the full words, or one word on the narrowest screens (no single-letter wrap). */
.danger-short{display:none}
@media(max-width:350px){.game.compact .danger-toggle .danger-long{display:none}.game.compact .danger-toggle .danger-short{display:inline}.game.compact .main-actions .danger-toggle{font-size:14px}}
.coach-badge{font-size:14px;line-height:20px;padding:0 8px}
/* Enemies: a red ring at the feet (all guards and inspectors); the pale inspectors get a slight warm-red grey. */
.foot-ring{position:absolute;left:14%;right:14%;bottom:-5px;height:20%;border:2px solid #e2261b;border-radius:50%;background:radial-gradient(ellipse,#ff3b2e40 0%,#ff3b2e14 60%,transparent 72%);box-shadow:0 0 4px #ff3b2e99;z-index:2;pointer-events:none}
.unit-overlay.inspector .unit-sprite{filter:sepia(.3) hue-rotate(-18deg) saturate(1.25) brightness(.9) drop-shadow(1px 0 0 #24170e) drop-shadow(-1px 0 0 #24170e) drop-shadow(0 1px 0 #24170e) drop-shadow(0 -1px 0 #24170e) drop-shadow(0 3px 2px #0b0a0880)}
.unit-overlay.inspector.targetable .unit-sprite{filter:sepia(.3) hue-rotate(-18deg) saturate(1.25) brightness(.9) drop-shadow(1px 0 0 #24170e) drop-shadow(-1px 0 0 #24170e) drop-shadow(0 1px 0 #24170e) drop-shadow(0 -1px 0 #24170e) drop-shadow(0 0 4px #ff3b30)}
/* Coach bubble beside a square (when above/below would hide a face): arrow on the side facing the square. */
.coach.side-right{transform:translate(8px,-50%)}
.coach.side-left{transform:translate(calc(-100% - 8px),-50%)}
.coach.side-right::after,.coach.side-left::after{top:50%;margin-top:-8px;margin-left:0;border:8px solid transparent}
.coach.side-right::after{left:-11px;border-left:0;border-right:9px solid #c72820}
.coach.side-left::after{left:auto;right:-11px;border-right:0;border-left:9px solid #c72820}
/* Landscape phones: no row above the board (危険 and sound sit in the bottom row); the column letters give way to the stone rim. */
.hint-enemies{white-space:nowrap}
@media(orientation:landscape) and (max-height:500px){
  .game.row-tools .battle{padding-top:4px}
  .game.row-tools .columns{display:none}
  .game.row-tools .main-actions .danger-toggle{flex:none;width:58px;height:48px;min-height:48px;padding:0 2px;font-size:12px;line-height:1.15;white-space:normal}
  .game.row-tools .main-actions .sound-toggle{position:static;flex:none;width:46px;min-width:0;height:48px;padding:0;font-size:12px;box-shadow:none}
  .game.row-tools .main-actions{gap:4px}
  .game.row-tools .main-actions .button{font-size:14px;padding:0 3px}
  .game.row-tools .main-actions .main-act{font-size:15px}
  .game.row-tools .act-icon{width:20px;height:20px}
}
/* The goal mark on D1 draws in front of the pieces (a head from the square below never hides it). */
.goal-overlay{z-index:12}
.unit-overlay.under-goal .hp-mini{left:auto;right:calc(var(--cell)*-.42);bottom:calc(var(--cell)*.5);transform:none}
@media(orientation:landscape) and (max-height:500px){
  .game.row-tools .danger-toggle .danger-long{display:none}
  .game.row-tools .danger-toggle .danger-short{display:inline}
  .game.row-tools .main-actions .danger-toggle{width:48px;font-size:13px}
  .game.row-tools .main-actions .sound-toggle{width:42px}
  .game.row-tools .main-actions .end-icon,.game.row-tools .act-icon{display:none}
  .game.row-tools .main-actions .end-turn{white-space:normal;font-size:12px;line-height:1.15}
  .game.row-tools .main-actions .button.primary{border-width:8px 10px;border-image-width:8px 10px}
  .game.row-tools .main-actions .button.primary.attack-act{border-width:3px}
}
@media(orientation:landscape) and (max-height:500px){
  .portraits:has(.portrait-card.active) .portrait-card.active{flex:1.2}
  .portraits:has(.portrait-card.active) .portrait-card:not(.active){flex:1}
  .portrait-card .portrait-name{white-space:nowrap;font-size:13px}
  .hp-max{display:none}
  .scene .legend{flex-direction:column;gap:2px}
  .scene .mission{max-width:calc(100% - 96px);padding-right:10px}
  .scene .mission h1{font-size:17px}
}
@media(orientation:landscape) and (max-height:500px){.game.row-tools .scene{height:auto!important;min-height:65px;align-self:stretch}}
/* No single character left on its own line: short lines balance, and 手番終了 breaks only between 手番 and 終了. */
.dock .battle-purpose,.dock .enemy-info,.dock .dock-heading{text-wrap:balance}
.end-word{display:inline-block;white-space:nowrap}
@media(orientation:landscape) and (max-height:500px){.dock .battle-purpose,.dock .enemy-info{font-size:12px}}

/* ---- design round 5 (直し帳の残り) ---- */
/* 1. Forecast: big numbers and an HP bar under each changing line. */
.action-copy .fc-num{font-size:1.25em;letter-spacing:.02em}
.action-copy p{margin:1px 0}
.fc-bar{position:relative;display:block;height:7px;margin:1px 0 3px;background:#2b2a26;border:1px solid #8a6a3a;border-radius:4px;overflow:hidden}
.fc-bar i{position:absolute;top:0;bottom:0;left:0}
.fc-keep{background:linear-gradient(#8af397,#2ea44a)}
.fc-loss{background:repeating-linear-gradient(135deg,#e2261b 0 3px,#ff8a7a 3px 6px)}
.fc-gain{background:linear-gradient(#d8ffd0,#8de08f);box-shadow:0 0 4px #b8ffb0}
@media(max-height:650px){.fc-bar{height:5px;margin:0 0 2px}.action-copy .fc-num{font-size:1.15em}}
@media(max-height:650px) and (orientation:portrait){.game.compact .action-copy{font-size:12px;line-height:1.2;padding:2px 6px}.game.compact .action-copy strong{font-size:14px}.game.compact .action-copy p{margin:0}.game.compact .fc-bar{height:4px;margin:0 0 1px}.game.compact .action-copy .fc-num{font-size:1.1em}}
@media(orientation:portrait) and (max-height:760px){.game.compact .action-copy{font-size:12px;line-height:1.15;padding:1px 6px;min-height:0}.game.compact .action-copy strong{font-size:13px;line-height:1.2}.game.compact .action-copy p{margin:0}.game.compact .fc-bar{height:4px;margin:0 0 1px}.game.compact .action-copy .fc-num{font-size:1.08em}.game.compact .action-panel{margin-top:3px}}
@media(orientation:portrait) and (max-height:650px){.game.compact .action-panel{margin-top:1px}.game.compact .action-copy{padding:0 6px;line-height:1.12}}
/* 2. Title: 「ふたりで対戦」 with a small note; a larger sound button. */
.title-pvp{flex-direction:column;gap:0;line-height:1.2;padding:4px 8px}
.title-pvp .pvp-main{font-size:17px}
.title-pvp .pvp-note{font-size:12px;font-weight:normal;opacity:.85}
.game>.sound-toggle,.landing~.sound-toggle,.opening~.sound-toggle{min-width:52px;height:52px;font-size:16px}
.sound-toggle .sound-icon{font-size:1.15em}
/* 3. Workshop: the chosen card has a thick gold edge and a check mark. */
.growth-option{position:relative}
.growth-option.chosen{border:4px solid #d9a441;box-shadow:0 0 0 2px #7a4d12,0 0 12px #ffd34d99;background:#fff8e2}
.growth-option.chosen::after{content:"✓";position:absolute;top:-10px;right:-10px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#d9a441 60%,#8a5a14);color:#3b2207;font:900 18px var(--gothic);box-shadow:0 2px 3px #3b220799;border:2px solid #fff3c8}
/* 4. Result: a wax seal on the stars plate; the departure picture shows a little more sky so the plate stays off the heads. */
.landing.result:not(.teaser) .landing-title,.landing.m3-end .landing-title{position:relative;padding-left:58px}
.landing.result:not(.teaser) .landing-title::before,.landing.m3-end .landing-title::before{content:"";position:absolute;left:8px;top:50%;width:42px;height:42px;translate:0 -50%;background:url(assets/ui/seal-crop-v1.webp) center/contain no-repeat;filter:drop-shadow(1px 2px 1px #3b220780)}
.ending-art{background-position:center 34%}

/* ---- 確かめ役の小さな直し ---- */
/* 2. The chosen square sits behind its own piece and is half see-through (a raised target frame on the same square stays behind too). */
.board .cell.current{z-index:auto}
.board .cell.current::after{opacity:.55}
/* 3. Teaser / mission 3 end: the mock battle is a small link like the title, not a main button. */
.pvp-link{flex-direction:column;gap:0;line-height:1.2;min-height:48px;padding:4px 8px;border:2px solid #173c66;border-radius:7px;background:#f8ecd0;color:#173c66;box-shadow:none}
.pvp-link .pvp-main{font-size:16px}
.pvp-link .pvp-note{font-size:12px;font-weight:normal;opacity:.85}
/* 5. 320 forecast: a little air between each bar and the next line. */
@media(max-width:350px) and (max-height:650px) and (orientation:portrait){.game.compact .fc-bar{margin:2px 0 3px}}
/* 6. Defeat: one short shake of the board (never with reduced motion). */
@media(prefers-reduced-motion:no-preference){.board.shake{animation:board-shake .28s ease-out}}
@keyframes board-shake{0%,100%{translate:0 0}25%{translate:-3px 1px}50%{translate:3px -1px}75%{translate:-2px 0}}
@media(max-width:350px) and (max-height:650px) and (orientation:portrait){.game.compact .dock:has(.action-panel) .dock-strip{display:none}.game.compact .dock:has(.action-panel) .action-panel{margin-top:2px}}
/* Mission 3 end: feedback in the navy-and-brass main button; the mock battle quiet below it. */
.landing-paper .feedback-link.feedback-main{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:12px;color:#fff6dc;text-decoration:none;font-size:17px}
/* Result: big stars above the main button. */
.big-stars{margin:6px 0 0;text-align:center;font-size:40px;line-height:1;letter-spacing:6px;color:#c9b48a}
.big-stars span{display:inline-block;width:44px}
.big-stars .on{color:transparent;background:url(assets/ui/star-full-v1.webp) center/contain no-repeat}
@media(prefers-reduced-motion:no-preference){.big-stars .on{animation:star-in .45s cubic-bezier(.3,1.6,.5,1) both}.big-stars .on:nth-child(1){animation-delay:.3s}.big-stars .on:nth-child(2){animation-delay:.65s}.big-stars .on:nth-child(3){animation-delay:1s}}
@media(orientation:landscape) and (max-height:500px){.big-stars{font-size:28px}.big-stars span{width:32px}}
@media(orientation:portrait) and (max-height:650px){.big-stars{font-size:26px;margin-top:0}.big-stars span{width:30px}.landing.result .completion-mark{margin:6px 0 2px}}