:root{--paper:#f5f2e9;--ink:#203e49;--muted:#697879;--red:#b8402f;--line:#d6d9ce;--sky:#c9dfe1;--white:#fffcf6;--gold:#ae873e;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--red);outline-offset:4px}a{color:inherit}button{color:inherit}button,kbd{user-select:none}button[hidden],[hidden]{display:none!important}.site-header{max-width:1440px;margin:auto;padding:24px 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;font-weight:800;letter-spacing:.06em}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:.17em;margin-top:5px}.crest{background:var(--ink);color:var(--paper);font-family:serif;font-size:28px;display:grid;place-items:center;width:48px;height:48px;clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%)}.header-tools{display:flex;gap:12px;align-items:center}.local-label{font-size:12px;margin-right:16px}.local-label i{display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;margin-right:8px}.icon-button{border:1px solid var(--line);background:transparent;padding:8px 12px;font-size:12px;border-radius:4px}.icon-button:hover{background:#e8e8dd}.game-page{max-width:1440px;padding:32px 48px 24px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.intro-label{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.09em}.red-seal{color:var(--red);border:1px solid var(--red);padding:3px 7px;border-radius:2px;transform:rotate(-3deg)}h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(29px,3.4vw,47px);margin:15px 0 12px;font-weight:800;letter-spacing:.04em}h1 span{white-space:nowrap}.intro p{font-size:13px;color:var(--muted);margin:0}.intro-note{display:flex;gap:13px;align-items:center;font-family:serif;font-size:14px;margin-right:15px}.intro-note>span{writing-mode:vertical-rl;letter-spacing:.2em}.intro-note svg{width:95px;fill:none;stroke:var(--ink);stroke-width:3;margin-left:15px;opacity:.6}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;align-items:start}.game-shell{border:1px solid var(--ink);background:var(--white);border-radius:5px;overflow:hidden;box-shadow:0 7px 0 #203e490a}.game-hud{height:75px;display:flex;align-items:center;justify-content:space-between;padding:0 23px}.game-hud>div:first-child{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.hud-label{font-size:10px;color:var(--muted);letter-spacing:.07em}.game-hud strong{font-family:ui-monospace,"SFMono-Regular",monospace;font-size:25px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}.game-hud small{font-size:12px;color:var(--muted)}#stage-name{font-size:12px;border-left:1px solid var(--line);padding-left:14px}.hud-right{display:flex;gap:25px}.hud-right>div{display:flex;flex-direction:column;gap:7px;min-width:30px}.hud-right .timer-box{min-width:84px}.timer-box.urgent strong{color:var(--red)}.canvas-wrap{position:relative;background:var(--sky);aspect-ratio:16/9;overflow:hidden}canvas{width:100%;height:100%;display:block;outline-offset:-4px!important}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:4.5%;background:linear-gradient(90deg,#eaf0e686,#eaf0e600 90%)}.overlay-panel{background:#fffcf6f5;padding:28px 30px 23px;max-width:400px;border:1px solid #b4bba8;border-radius:3px;box-shadow:8px 8px 0 #203e4912}.panel-kicker{color:var(--red);font-size:11px;font-weight:700;letter-spacing:.15em}.overlay h2{white-space:pre-line;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(23px,2.2vw,32px);line-height:1.6;margin:12px 0}.overlay p{font-size:12px;line-height:1.9;margin:8px 0 19px;color:#566666}.primary-button{background:var(--red);color:#fffaf0;border:1px solid #993328;padding:14px 22px;box-shadow:0 3px 0 #7b3126;border-radius:3px;font-weight:700;font-size:14px}.primary-button:hover{background:#a53325}.overlay .primary-button{width:100%}.overlay .panel-foot{font-size:10px;margin:13px 0 0;text-align:center;color:var(--muted)}.game-toast{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:10px 20px;border-radius:3px;font-size:14px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}.game-toast.visible{opacity:1}.game-bottom{min-height:57px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 20px;border-top:1px solid var(--line);font-size:11px}.game-bottom>span{color:var(--muted)}.game-bottom>div{display:flex;gap:15px;flex-shrink:0}.text-button{border:0;background:none;padding:5px 0;font-size:11px}.text-button:hover{color:var(--red)}kbd{font-family:inherit;font-size:12px;background:var(--white);border:1px solid #c6cec5;border-bottom-width:3px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;min-width:31px;height:31px}.game-bottom kbd{height:19px;min-width:20px;font-size:9px;margin-left:4px}.guide h2{font-size:14px;margin:0}.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:20px}.small-crest{font-family:serif;border:1px solid var(--ink);font-size:10px;padding:4px}.control-row{display:flex;align-items:center;gap:17px;margin:14px 0;font-size:12px}.control-row>span,.space-key{min-width:70px}.control-row small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.guide-tip{font-size:11px;line-height:1.9;color:var(--muted);margin:20px 0 0}.guide-section{padding:3px 0 22px;border-bottom:1px solid var(--line)}.route-section{padding:23px 0 20px}.route-section h2{font-size:12px;margin-bottom:14px}.route-section ol{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}.route-section li{display:flex;align-items:center;gap:7px;font-size:10px;white-space:nowrap;color:var(--muted)}.stage-dot{width:22px;height:22px;border:1px solid #c1cabe;display:grid;place-items:center;border-radius:50%;font-size:10px;font-family:serif}.route-section li.active{color:var(--ink);font-weight:700}.active .stage-dot{border-color:var(--ink);background:var(--ink);color:var(--white)}.cleared .stage-dot{border-color:var(--red);color:var(--red);font-weight:bold}.route-legend{font-size:9px;color:var(--muted);margin-top:14px}.legend-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:4px}.event-ticket{background:#e8eadf;border-left:3px solid var(--gold);padding:15px 16px}.event-ticket>span{font-size:9px;color:var(--muted)}.event-ticket strong{font-size:11px;display:block;margin-top:7px;overflow-wrap:anywhere}.event-ticket p{font-size:10px;color:var(--muted);line-height:1.9;margin:9px 0 0}.event-ticket b{color:var(--ink)}.page-footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:26px;font-size:10px;color:var(--muted)}.page-footer a{text-decoration:none}.page-footer a:hover{text-decoration:underline}.touch-controls{display:none;justify-content:space-between;padding:12px 16px;background:var(--paper)}.touch-controls>div{display:flex;gap:12px}.touch-controls button{width:65px;height:50px;border:1px solid #acb9ac;border-bottom:4px solid #acb9ac;border-radius:6px;background:var(--white);font-size:18px;touch-action:none}.touch-controls .jump-button{width:115px;background:var(--ink);border-color:#152c34;color:white;font-size:15px}.jump-button span{margin-left:15px}.pause-banner{position:absolute;inset:40% 10%;text-align:center;background:#203e49ed;color:white;padding:20px}.pause-banner small{display:block;margin-top:8px}.result-values{display:flex;gap:20px;margin:15px 0}.result-values span{font-size:10px;color:var(--muted)}.result-values b{display:block;font-size:25px;color:var(--ink);margin-bottom:3px}
/* 管理画面は集計と会場設定を同じ画面で扱う。 */
.admin-page{max-width:1200px;margin:auto;padding:38px 40px}.admin-page h1{font-size:30px}.admin-intro{display:flex;align-items:center;justify-content:space-between;gap:20px}.admin-intro p,.muted{color:var(--muted);font-size:12px;line-height:1.8}.admin-login{max-width:440px;margin:50px auto;background:var(--white);padding:32px;border:1px solid var(--line);border-radius:6px}.admin-login h2{font-family:serif}.admin-login p{font-size:12px;line-height:1.8}.admin-login code{overflow-wrap:anywhere;font-size:11px}.admin-page label{font-size:12px;display:block}.admin-page input,.admin-page select{background:var(--white);border:1px solid #b8c3b8;border-radius:3px;padding:10px 12px;color:var(--ink);max-width:100%;min-height:40px}.admin-login input{width:100%;margin:10px 0 20px}.notice{font-size:12px;line-height:1.8;color:var(--red);min-height:20px;margin:14px 0}.admin-tabs{display:flex;gap:25px;border-bottom:1px solid var(--line);margin:26px 0}.admin-tabs button{border:0;border-bottom:3px solid transparent;background:none;padding:12px 0;font-size:14px}.admin-tabs button[aria-selected=true]{border-bottom-color:var(--red);color:var(--red);font-weight:bold}.filters{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:22px 0}.filters label{display:grid;gap:7px}.secondary-button{background:var(--white);border:1px solid #b8c3b8;border-radius:3px;padding:10px 15px;font-size:12px;min-height:40px}.secondary-button:hover{border-color:var(--ink)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--white);border-radius:5px}.metric{padding:24px;border-right:1px solid var(--line)}.metric:last-child{border:0}.metric span{font-size:11px;color:var(--muted)}.metric strong{font-size:35px;display:block;margin:13px 0 5px;font-weight:500}.metric small{font-size:10px;color:var(--muted)}.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:30px 0}.analytics-grid h2,.history-heading h2{font-size:16px;margin:0 0 20px}.bar-row{display:grid;grid-template-columns:110px 1fr 38px;gap:12px;align-items:center;font-size:11px;margin:13px 0}.bar-track{height:10px;background:#e0e5d9;border-radius:2px;overflow:hidden}.bar-fill{height:10px;background:var(--red);width:0}.bar-row:nth-child(even) .bar-fill{background:#648b89}.status-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:16px}.status-stat{border-bottom:1px solid var(--line);padding:10px 0;font-size:12px}.status-stat b{float:right}.history-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.history-actions{display:flex;gap:8px;flex-wrap:wrap}.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:4px;background:var(--white)}table{border-collapse:collapse;width:100%;font-size:11px;white-space:nowrap}th,td{text-align:left;padding:14px 15px;border-bottom:1px solid var(--line)}th{background:#e9ede3;font-weight:600}td code{font-size:10px}tr:last-child td{border-bottom:0}.empty-row{text-align:center;padding:36px;color:var(--muted)}.status-badge{background:#e5ebdf;color:var(--ink);border-radius:3px;padding:4px 7px;font-size:10px}.settings-form{max-width:640px;background:var(--white);border:1px solid var(--line);border-radius:5px;padding:28px}.settings-form h2{font-size:18px;margin-top:0}.settings-form>label{margin:23px 0 8px;font-weight:600}.settings-form .field-help{font-size:11px;line-height:1.8;color:var(--muted);margin:8px 0 15px}.settings-form input[type=text]{width:100%}.number-field{display:flex;gap:10px;align-items:center;font-size:12px}.number-field input{width:140px}.preset-buttons{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}.preset-buttons button{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:6px 10px;font-size:11px}.checkbox-label{display:flex!important;align-items:center;gap:10px}.checkbox-label input{accent-color:var(--red);min-height:20px;width:18px}.settings-form .primary-button{margin-top:20px}.admin-footer{margin-top:30px;border-top:1px solid var(--line);padding-top:18px;font-size:11px;color:var(--muted);line-height:1.9}.admin-top-links{display:flex;gap:16px;align-items:center;font-size:12px}
@media(pointer:coarse){.touch-controls{display:flex}}@media(max-width:1100px){.site-header{padding:20px 28px}.game-page{padding:25px 28px}.play-layout{grid-template-columns:minmax(0,1fr) 205px;gap:20px}.overlay-panel{padding:18px 22px}.overlay h2{font-size:25px;margin:7px 0}.overlay p{margin:6px 0 13px;font-size:11px}.intro-note{display:none}.game-hud{padding:0 16px}#stage-name{display:none}.guide{font-size:11px}.route-section li{font-size:9px}.game-bottom{padding:10px 12px}.game-bottom>span{max-width:55%;font-size:10px}.primary-button{padding:11px 18px}}
@media(max-width:800px){.play-layout{grid-template-columns:1fr}.guide{display:grid;grid-template-columns:1fr 1fr;gap:20px}.guide-section{border:0}.route-section{padding:0}.event-ticket{grid-column:1/-1}.site-header{padding:16px 20px}.game-page{padding:24px 20px}.intro{margin-bottom:23px}.intro p{font-size:11px}.intro h1{font-size:34px}.local-label{display:none}.guide-tip{margin:12px 0}.page-footer{font-size:9px}.overlay-panel{padding:20px 25px}.overlay h2{font-size:27px}.game-hud{height:64px}#stage-name{display:inline}.game-bottom{font-size:11px}.touch-controls{display:flex}.analytics-grid{grid-template-columns:1fr}.admin-page{padding:25px 20px}.metric{padding:16px}.metric strong{font-size:27px}}
@media(max-width:520px){.brand{font-size:12px;gap:9px}.brand small{font-size:8px}.crest{width:36px;height:36px;font-size:23px}.header-tools{gap:6px}.icon-button{padding:7px 8px;font-size:10px}.site-header{padding:13px 15px}.game-page{padding:22px 13px}.intro h1{font-size:30px}.intro-label{font-size:10px}.intro p{font-size:10px;line-height:1.7;max-width:310px}.game-hud{height:58px;padding:0 12px}.game-hud>div:first-child{gap:8px}.game-hud strong{font-size:20px}.hud-label{font-size:9px}#stage-name{display:none}.hud-right{gap:15px}.hud-right .timer-box{min-width:65px}.canvas-wrap{aspect-ratio:4/3}canvas{object-fit:contain;background:#c9dfe1}.overlay{padding:12px;background:#c9dfe122}.overlay-panel{padding:14px 18px;max-width:260px}.panel-kicker{font-size:9px}.overlay h2{font-size:22px;line-height:1.5;margin:6px 0}.overlay p{font-size:10px;line-height:1.7;margin:6px 0 12px}.overlay .panel-foot{font-size:9px;margin-top:9px}.primary-button{font-size:12px;padding:10px 15px}.game-bottom{align-items:flex-start;gap:6px;flex-direction:column}.game-bottom>span{max-width:100%}.game-bottom>div{align-self:flex-end}.guide{gap:14px;margin-top:8px}.guide h2{font-size:12px}.guide-tip{font-size:10px}.control-row{gap:8px;font-size:11px}.section-heading{margin-bottom:14px}.route-section ol{grid-template-columns:1fr;gap:7px}.route-section li{font-size:10px}.stage-dot{width:19px;height:19px}.route-legend{font-size:8px}.page-footer{line-height:1.8;gap:8px;padding-top:20px}.game-toast{font-size:11px;top:12px;padding:8px 12px}.metrics{grid-template-columns:1fr 1fr}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.admin-intro{align-items:flex-start}.admin-intro h1{font-size:24px}.admin-top-links{flex-direction:column;gap:8px}.history-heading{align-items:flex-start;flex-direction:column}.settings-form{padding:20px}.result-values{gap:18px;margin:10px 0}.result-values b{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}


/* ブラウザ保存・移行の操作欄 */
#legacy-panel{max-width:none;margin:18px 0;padding:18px 22px}#legacy-panel summary{cursor:pointer;font-size:13px}#legacy-panel form{max-width:460px}#legacy-panel input[type=checkbox],.filters input[type=checkbox]{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--red)}.filters label:has(input[type=checkbox]){display:flex;flex-direction:row;align-items:center;gap:8px;padding-bottom:12px}input[type=file]{max-width:100%;box-sizing:border-box}#backup-message{font-size:12px}

/* 長いゲーム名は語の区切りで折り返し、操作ボタンの幅を確保する。 */
.brand{min-width:0}.brand-title{line-height:1.6}.crest,.header-tools,.admin-top-links{flex-shrink:0}@media(max-width:520px){.site-header{flex-wrap:wrap}.site-header .brand{flex-basis:100%}.header-tools,.admin-top-links{margin-left:auto}.admin-top-links{flex-direction:row}.brand small{line-height:1.6}}

/* 提供された城主テトラのアイコンを切り抜かずに表示する。 */
.crest-avatar{display:block;object-fit:contain;background:transparent;clip-path:none}

/* 入城前の三画面。画面の高さを保ち、長い説明だけを枠内でスクロールする。 */
.play-layout.is-intro{grid-template-columns:minmax(0,1fr)}
.is-intro .guide,.is-intro .game-hud,.is-intro .game-bottom,.is-intro .control-deck{display:none}
.is-intro .canvas-wrap,.game-shell[data-screen=result] .canvas-wrap{aspect-ratio:auto;height:clamp(420px,calc(100dvh - 170px),700px);min-height:0}
.is-intro canvas,.game-shell[data-screen=result] canvas{position:absolute;inset:0;object-fit:cover}
.is-intro .overlay,.game-shell[data-screen=result] .overlay{position:absolute;inset:0;min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:38px;align-items:safe center;background:linear-gradient(90deg,#d4e1d8aa,transparent 90%)}
.overlay-panel{width:100%;max-width:480px;border-radius:2px;border-top:4px solid var(--red);padding:30px 32px;}
.is-intro .overlay-panel,.game-shell[data-screen=result] .overlay-panel{max-height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--red) transparent}
.overlay h1{white-space:pre-line;font-size:clamp(26px,3vw,40px);line-height:1.5;letter-spacing:.02em;margin:14px 0;color:var(--ink);overflow-wrap:anywhere}
.overlay .panel-subtitle{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:17px;font-weight:bold;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
.overlay #panel-description{font-size:13px;line-height:1.9}
.overlay .panel-kicker{font-size:11px;letter-spacing:.07em}
.game-shell[data-screen=story] .panel-kicker,.game-shell[data-screen=rules] .panel-kicker{font-size:16px;line-height:1.5}
.panel-back{display:block;margin:15px auto 0;font-size:12px;min-height:32px}
.lord-voice{display:flex;align-items:center;gap:16px;margin:22px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lord-voice img{width:80px;height:80px;object-fit:contain;flex-shrink:0}
.lord-voice span{font-size:16px;line-height:1.5;color:var(--red);letter-spacing:.04em}
.lord-voice blockquote{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:18px;font-weight:bold;line-height:1.9;margin:6px 0 0}
.game-shell[data-screen=story] .overlay-panel,.game-shell[data-screen=rules] .overlay-panel{max-width:580px}
.game-shell[data-screen=result] .overlay-panel{max-width:520px}
.rules-content ol{padding:0;list-style:none;counter-reset:rule;margin:20px 0}
.rules-content li{counter-increment:rule;position:relative;padding-left:34px;margin:15px 0}
.rules-content li:before{content:counter(rule,decimal-leading-zero);position:absolute;left:0;top:0;color:var(--red);font-family:serif;font-size:18px}
.rules-content strong{font-size:13px}.rules-content li span{display:block;font-size:12px;line-height:1.8;margin-top:4px;color:#566666}
.rules-keys{border-block:1px solid var(--line);padding:12px 0;display:grid;gap:8px}
.rules-keys>div{display:flex;align-items:center;gap:6px;font-size:11px}.rules-keys span{margin-left:auto}.rules-keys kbd{padding:0 7px}
.control-deck{background:var(--paper);border-top:1px solid var(--line)}
.keyboard-guide{display:flex;align-items:center;justify-content:center;gap:22px;padding:10px 12px;font-size:11px;flex-wrap:wrap}
.keyboard-guide>span{display:flex;gap:5px;align-items:center}.keyboard-guide kbd{height:26px;min-width:26px;padding:0 5px;font-size:11px}.keyboard-guide b{margin-left:3px;font-weight:600}
.touch-controls{gap:12px;padding:6px 16px 12px}.touch-controls button{width:82px;font-size:13px}.touch-controls .jump-button{font-size:13px}
.fullscreen-heading{display:none}
/* 全画面でも、題名・操作案内・終了ボタンをゲーム領域の内側に置く。 */
.game-shell:fullscreen{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;width:100%;height:100%;background:var(--paper);border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.game-shell:fullscreen .fullscreen-heading{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--line)}
.fullscreen-heading>div{min-width:0}.fullscreen-heading strong{display:block;font-family:"Yu Mincho",serif;font-size:18px}.fullscreen-heading small{display:block;font-size:11px;margin-top:4px}.fullscreen-heading button{margin-left:auto;flex-shrink:0}
.game-shell:fullscreen .canvas-wrap{aspect-ratio:auto;width:100%;height:100%;min-height:0;max-width:none;align-self:stretch;background:#203e49}
.game-shell:fullscreen canvas{object-fit:contain;background:#203e49}
.game-shell:fullscreen .game-hud{height:60px}.game-shell:fullscreen .game-bottom{min-height:40px;padding:6px 20px}
.game-shell:fullscreen .touch-controls{display:flex;justify-content:center;gap:32px}
.game-shell:fullscreen .keyboard-guide{padding:6px 10px}
.game-shell:fullscreen[data-screen=title],.game-shell:fullscreen[data-screen=story],.game-shell:fullscreen[data-screen=rules]{grid-template-rows:auto minmax(0,1fr)}
.game-shell:fullscreen .overlay{min-height:100%;overflow:auto;max-height:100%}
.game-shell:fullscreen[data-screen=result] .overlay{position:absolute;align-items:safe center}
.game-shell:fullscreen[data-screen=result] .control-deck,.game-shell:fullscreen[data-screen=result] .game-bottom{display:none}
.game-shell:fullscreen[data-screen=result]{grid-template-rows:auto auto minmax(0,1fr)}
@media(max-width:600px){
  .game-page{padding-top:16px}.is-intro .overlay,.game-shell[data-screen=result] .overlay{padding:18px 12px}
  .overlay-panel{padding:24px 20px;max-width:none}.overlay h1{font-size:29px}.overlay .panel-subtitle{font-size:15px}.overlay .panel-kicker{font-size:10px;line-height:1.8}
  .game-shell[data-screen=story] .panel-kicker,.game-shell[data-screen=rules] .panel-kicker,.lord-voice span{font-size:14px}
  .is-intro canvas,.game-shell[data-screen=result] canvas{object-position:70% center}
  .lord-voice{gap:12px}.lord-voice img{width:64px;height:64px}.lord-voice blockquote{font-size:16px}
  .keyboard-guide{gap:7px 14px;font-size:10px}.keyboard-guide kbd{height:23px;min-width:23px;font-size:10px}
  .touch-controls>div{gap:8px}.touch-controls{gap:8px;padding-inline:10px}.touch-controls button{width:70px}.touch-controls .jump-button{width:100px}
  .game-shell:fullscreen .fullscreen-heading{padding:8px;gap:7px}.fullscreen-heading img{width:32px;height:32px}.fullscreen-heading strong{font-size:12px}.fullscreen-heading small{font-size:9px}.fullscreen-heading button{font-size:10px;padding:6px}
  .game-shell:fullscreen .touch-controls{gap:16px}.game-shell:fullscreen .game-bottom{padding:6px 12px}
}
@media(max-height:600px) and (orientation:landscape){
  .game-shell:fullscreen .fullscreen-heading{padding:4px 12px}.fullscreen-heading img{width:30px;height:30px}.fullscreen-heading strong{font-size:13px}.fullscreen-heading small{font-size:9px;margin-top:1px}
  .game-shell:fullscreen .game-hud{height:42px}.game-shell:fullscreen .hud-right>div{gap:3px}.game-shell:fullscreen .game-hud strong{font-size:19px}
  .game-shell:fullscreen .control-deck{display:flex;justify-content:space-around;align-items:center}.game-shell:fullscreen .keyboard-guide{gap:10px;font-size:9px}.game-shell:fullscreen .keyboard-guide kbd{height:22px;min-width:22px;font-size:10px}
  .game-shell:fullscreen .touch-controls{gap:12px;padding:5px 8px}.game-shell:fullscreen .touch-controls>div{gap:5px}.game-shell:fullscreen .touch-controls button{height:36px;width:65px;font-size:11px}.game-shell:fullscreen .touch-controls .jump-button{width:85px}
  .game-shell:fullscreen .overlay{align-items:flex-start;padding:16px}.game-shell:fullscreen .overlay-panel{margin:auto}
}

.game-shell[data-screen=title] #panel-title>span{display:block;white-space:normal}.game-shell[data-screen=title] #panel-title>span+span{font-size:.85em;margin-top:5px}

.game-shell[data-screen=result] #panel-title{font-size:clamp(24px,2.5vw,32px)}

@media(min-width:601px) and (max-width:800px){
  .is-intro .overlay,.game-shell[data-screen=result] .overlay{padding:20px}
  .game-shell[data-screen=rules] .overlay-panel{padding:18px 24px 14px}
  .game-shell[data-screen=rules] .overlay h1{line-height:1.3;margin:8px 0}
  .game-shell[data-screen=rules] #panel-description{margin:4px 0 8px}
  .game-shell[data-screen=rules] .rules-content ol{margin:8px 0}
  .game-shell[data-screen=rules] .rules-content li{margin:6px 0}
  .game-shell[data-screen=rules] .rules-content li span{line-height:1.5;margin-top:2px}
  .game-shell[data-screen=rules] .rules-keys{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 0}
  .game-shell[data-screen=rules] .rules-keys>div{flex-wrap:wrap;align-content:start}
  .game-shell[data-screen=rules] .rules-keys span{flex-basis:100%;margin-left:0;font-size:10px}
  .game-shell[data-screen=rules] .panel-back{margin-top:8px;min-height:26px}
  .game-shell[data-screen=rules] .panel-foot{margin-top:8px}
}
@media(max-width:600px){.game-shell[data-screen=title] #panel-title>span+span{font-size:.76em}.game-shell[data-screen=rules] #panel-title{font-size:26px;text-wrap:balance}}

/* 残り30秒は会場でも一目で分かるように表示を点滅させる。 */
.timer-box.countdown-alert strong{color:var(--red);animation:countdown-blink .72s steps(2,end) infinite}
@keyframes countdown-blink{50%{opacity:.18}}

/* 入城・結果画面の演出。案内板の登場、落款（印）、結果ごとの色づけ。ゲーム中の画面には適用しない。 */
.panel-seal{float:right;margin:-8px -10px 10px 14px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border:4px double var(--red);border-radius:8px;color:var(--red);background:#fffcf6;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:19px;font-weight:900;line-height:1.05;writing-mode:vertical-rl;text-align:center;transform:rotate(-8deg);box-shadow:0 0 0 2px #b8402f1a;user-select:none}
.overlay-panel[data-enter=completed] .panel-seal{background:radial-gradient(circle,#fff3cf,#fffcf6 70%);box-shadow:0 0 0 2px #b8402f1a,0 0 22px #e3b04c99}
.overlay-panel[data-enter=completed] #panel-title{background:linear-gradient(100deg,#9c3326 0%,#b8402f 32%,#c9922e 45%,#f2d27e 50%,#c9922e 55%,#b8402f 68%,#9c3326 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.game-shell[data-result=completed] .overlay{background:linear-gradient(90deg,#0f1c30a8,transparent 85%)}
.game-shell[data-result=timeout] .overlay{background:linear-gradient(90deg,#3d263380,transparent 85%)}
.title-char{display:inline-block}
@media(max-width:600px){.panel-seal{width:50px;height:50px;font-size:16px;margin:-10px -2px 8px 10px}}
@media(prefers-reduced-motion:no-preference){
  .overlay-panel.is-entering{animation:panel-in .45s cubic-bezier(.2,.8,.3,1) backwards}
  /* TOP：巻物が開き、城名が一文字ずつ落ち、最後に落款を押す。 */
  .overlay-panel.is-entering[data-enter=title]{animation:scroll-open .7s cubic-bezier(.3,.8,.3,1) backwards}
  .is-entering[data-enter=title] .panel-kicker{display:inline-block;animation:rise-in .5s .3s backwards}
  .is-entering[data-enter=title] .title-char{animation:char-drop .6s calc(.45s + var(--i,0)*65ms) cubic-bezier(.2,1.45,.45,1) backwards}
  .is-entering[data-enter=title] #panel-title>span+span{animation:brush-in .75s .95s cubic-bezier(.5,0,.3,1) backwards}
  .is-entering[data-enter=title] .panel-subtitle{animation:rise-in .55s 1.25s backwards}
  .is-entering[data-enter=title] #panel-description{animation:rise-in .55s 1.38s backwards}
  .is-entering[data-enter=title] .panel-seal{animation:seal-stamp .45s 1.5s cubic-bezier(.3,1.6,.5,1) backwards}
  .is-entering[data-enter=title] #main-action,.is-entering:is([data-enter=completed],[data-enter=timeout],[data-enter=retired],[data-enter=interrupted]) #main-action{animation:rise-in .5s 1.55s backwards,beckon 2.6s 2.3s ease-in-out infinite}
  .is-entering[data-enter=title] .panel-foot{animation:rise-in .5s 1.7s backwards}
  /* 御触書：城主が現れ、御言葉を筆で書くように見せる。 */
  .is-entering[data-enter=story] .lord-voice img{animation:lord-pop .6s .2s cubic-bezier(.3,1.6,.5,1) backwards}
  .is-entering[data-enter=story] .lord-voice blockquote{animation:brush-in .9s .45s cubic-bezier(.5,0,.3,1) backwards}
  .is-entering[data-enter=rules] .rules-content li{animation:rise-in .45s .15s backwards}
  .is-entering[data-enter=rules] .rules-content li:nth-child(2){animation-delay:.27s}
  .is-entering[data-enter=rules] .rules-content li:nth-child(3){animation-delay:.39s}
  .is-entering[data-enter=rules] .rules-keys{animation:rise-in .45s .52s backwards}
  /* 結果：攻略は弾むように、時間切れは高札が吊り下がるように現れる。 */
  .overlay-panel.is-entering[data-enter=completed]{animation:panel-pop .65s cubic-bezier(.25,1.4,.5,1) backwards}
  .overlay-panel.is-entering[data-enter=timeout]{transform-origin:50% 0;animation:hang-drop .9s cubic-bezier(.3,.7,.4,1) backwards}
  .is-entering[data-enter=timeout] #panel-title{animation:ink-in .9s .3s ease-out backwards}
  .overlay-panel[data-enter=completed] #panel-title{animation:gold-sweep 3.2s 1s ease-in-out infinite}
  .is-entering:is([data-enter=completed],[data-enter=timeout],[data-enter=retired],[data-enter=interrupted]) .panel-seal{animation:seal-stamp .45s .85s cubic-bezier(.3,1.6,.5,1) backwards}
  .is-entering:is([data-enter=completed],[data-enter=timeout],[data-enter=retired],[data-enter=interrupted]) #panel-description{animation:rise-in .5s .5s backwards}
  .is-entering:is([data-enter=completed],[data-enter=timeout],[data-enter=retired],[data-enter=interrupted]) .lord-voice{animation:rise-in .55s 1.1s backwards}
  .is-entering:is([data-enter=completed],[data-enter=timeout],[data-enter=retired],[data-enter=interrupted]) .lord-voice img{animation:lord-pop .6s 1.2s cubic-bezier(.3,1.6,.5,1) backwards}
}
@keyframes panel-in{from{opacity:0;transform:translateX(26px)}}
@media(max-width:600px){@keyframes panel-in{from{opacity:0;transform:translateX(10px)}}}
@keyframes panel-pop{from{opacity:0;transform:scale(.85)}}
@keyframes hang-drop{0%{opacity:0;transform:translateY(-70px) rotate(-3deg)}55%{opacity:1;transform:translateY(6px) rotate(1.2deg)}78%{transform:translateY(-2px) rotate(-.5deg)}}
@keyframes scroll-open{from{opacity:.3;clip-path:inset(0 -12px 100% 0)}to{opacity:1;clip-path:inset(0 -12px -12px 0)}}
@keyframes rise-in{from{opacity:0;transform:translateY(12px)}}
@keyframes char-drop{0%{opacity:0;transform:translateY(-46px) scale(1.5);filter:blur(4px)}60%{opacity:1;filter:blur(0)}}
@keyframes brush-in{from{opacity:.15;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 -4px 0 0)}}
@keyframes ink-in{from{opacity:0;filter:blur(7px);letter-spacing:.25em}}
@keyframes seal-stamp{0%{opacity:0;transform:translateY(-16px) scale(1.35) rotate(-14deg)}70%{opacity:1;transform:scale(.9) rotate(-6deg)}}
@keyframes lord-pop{from{opacity:0;transform:scale(.4) rotate(-12deg)}}
@keyframes beckon{0%,100%{box-shadow:0 3px 0 #7b3126,0 0 0 0 #b8402f00}50%{box-shadow:0 3px 0 #7b3126,0 0 0 7px #b8402f30}}
@keyframes gold-sweep{0%{background-position:100% 0}60%,100%{background-position:0 0}}
.game-shell[data-screen=result] #panel-title,.overlay .panel-subtitle{text-wrap:balance;word-break:auto-phrase}
/* 登場演出の拡大・横移動で一時的に横スクロール領域ができ、→キー等で中身がずれないようにする。 */
#overlay,#overlay-panel{overflow-x:hidden}

/* 古いPCなど高さの低い画面でも、入城三画面と結果の案内板をスクロールなしで読めるようにする。 */
@media(min-width:760px){
  /* 御触書：説明文と城主の御言葉を左右に並べる。 */
  .game-shell[data-screen=story] .overlay-panel{max-width:900px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:32px}
  .game-shell[data-screen=story] .overlay-panel>*{grid-column:1/-1}
  .game-shell[data-screen=story] #panel-description{grid-column:1;grid-row:3;align-self:center;margin:6px 0 12px}
  .game-shell[data-screen=story] .lord-voice{grid-column:2;grid-row:3;align-self:center;margin:6px 0 12px}
  /* 心得：三つの心得とキー操作をそれぞれ横一列に並べる。 */
  .game-shell[data-screen=rules] .overlay-panel{max-width:920px}
  .game-shell[data-screen=rules] .rules-content ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:14px 0}
  .game-shell[data-screen=rules] .rules-content li{margin:0}
  .game-shell[data-screen=rules] .rules-keys{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:16px}
  .game-shell[data-screen=rules] .rules-keys span{margin-left:6px}
  .game-shell[data-screen=rules] .rules-content>p{margin:8px 0 12px}
  /* 結果：御言葉が短い行数に収まるよう少し広げる。 */
  .game-shell[data-screen=result] .overlay-panel{max-width:660px}
}
@media(min-width:601px) and (max-height:820px){
  /* ヘッダーと余白を詰め、ゲーム枠に使える高さを増やす。 */
  .site-header{padding-block:10px}.game-page{padding-top:12px}
  .is-intro .canvas-wrap{height:clamp(400px,calc(100dvh - 100px),700px)}
  .game-shell[data-screen=result] .canvas-wrap{height:clamp(400px,calc(100dvh - 175px),700px)}
  .is-intro .overlay,.game-shell[data-screen=result] .overlay{padding:16px 28px}
  .overlay-panel{padding:20px 28px 16px}
  .overlay .panel-kicker,.game-shell[data-screen=story] .panel-kicker,.game-shell[data-screen=rules] .panel-kicker{font-size:14px;line-height:1.5}
  .overlay h1,.game-shell[data-screen=result] #panel-title{font-size:clamp(24px,2.6vw,32px);line-height:1.4;margin:6px 0 8px}
  .overlay .panel-subtitle{padding-bottom:10px;margin-bottom:10px}
  .overlay #panel-description{line-height:1.75;margin:4px 0 10px}
  .lord-voice{margin:10px 0;padding:10px 0}.lord-voice img{width:64px;height:64px}.lord-voice span{font-size:14px}.lord-voice blockquote{font-size:16px;line-height:1.7;margin-top:2px}
  .rules-content ol{margin:10px 0}.rules-content li{margin:8px 0}.rules-content li span{line-height:1.65}.rules-keys{padding:8px 0}
  .overlay .primary-button{padding:11px 18px}.panel-back{margin-top:4px;min-height:28px}.overlay .panel-foot{margin-top:4px}
  .panel-seal{width:52px;height:52px;font-size:17px}
}
@media(min-width:601px) and (max-height:640px){
  .is-intro .overlay,.game-shell[data-screen=result] .overlay{padding-block:10px}
  .game-shell[data-screen=rules] .rules-content ol{margin:8px 0}.game-shell[data-screen=rules] .rules-content>p{margin:6px 0 8px}
}
@media(min-width:601px) and (max-height:560px){
  .is-intro .overlay,.game-shell[data-screen=result] .overlay{padding-block:6px}
  .game-shell[data-screen=rules] .overlay h1{margin:2px 0 4px}.game-shell[data-screen=rules] #panel-description{margin:2px 0 6px}
  .game-shell[data-screen=rules] .rules-content li span{line-height:1.5}.game-shell[data-screen=rules] .rules-keys{padding:5px 0}
}

/* 退城の確認。全画面表示の中でも出せるよう、ゲーム枠の内側に重ねる。 */
.retire-confirm{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:16px;background:#203e4999}
.retire-confirm>div{width:100%;max-width:420px;background:#fffcf6;border-top:4px solid var(--red);border-radius:2px;padding:22px 26px 18px;text-align:center;box-shadow:8px 8px 0 #203e4926}
.retire-confirm p{margin:0 0 4px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:17px;font-weight:bold;line-height:1.7;color:var(--ink)}
.retire-confirm small{display:block;font-size:11px;color:var(--muted);margin-bottom:16px}
.retire-actions{display:flex;justify-content:center;gap:12px}.retire-actions button{min-width:120px}
@media(prefers-reduced-motion:no-preference){.retire-confirm:not([hidden])>div{animation:rise-in .25s backwards}}

/* 挑戦開始のカウントダウン。朱色の印に数字を叩きつけ、最後は「いざ、出陣！」を斬撃のように切り開く。 */
.countdown{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,#203e4933 0%,#0f1c30b8 78%)}
.countdown span{position:relative;display:grid;place-items:center;width:clamp(110px,20vw,180px);aspect-ratio:1;border:6px double #fff4d6;border-radius:50%;background:#b8402fed;color:#fffaf0;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(60px,11vw,104px);font-weight:900;line-height:1;text-shadow:0 4px 0 #7b3126;box-shadow:0 0 0 6px #b8402f55,0 14px 32px #0007}
.countdown.is-final span{width:auto;aspect-ratio:auto;padding:.35em 1.1em;border:0;border-block:3px solid #e8c77a;border-radius:0;background:linear-gradient(90deg,transparent,#b8402ff2 14%,#b8402ff2 86%,transparent);font-size:clamp(32px,6.4vw,70px);letter-spacing:.14em;white-space:nowrap;text-shadow:0 3px 0 #7b3126,0 0 20px #ffd66b99;box-shadow:none}
@media(prefers-reduced-motion:no-preference){
  .countdown span.is-shown{animation:count-slam .55s cubic-bezier(.2,1.5,.4,1) backwards}
  .countdown span.is-shown::after{content:"";position:absolute;inset:-8px;border:3px solid #fff4d6;border-radius:50%;animation:count-ring .7s ease-out forwards}
  .countdown.is-final span.is-shown{animation:final-cut .6s cubic-bezier(.3,.9,.3,1) backwards}
  .countdown.is-final span.is-shown::after{inset:auto -12% calc(50% - 2px) -12%;height:4px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,#fff4d6 30%,#ffd66b 70%,transparent);transform-origin:left;animation:slash-line .55s ease-out forwards}
}
@keyframes count-slam{0%{opacity:0;transform:scale(2.4) rotate(-10deg);filter:blur(4px)}60%{opacity:1;filter:blur(0)}}
@keyframes count-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
@keyframes final-cut{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:scale(1.12)}70%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes slash-line{from{opacity:1;transform:scaleX(0)}60%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(1)}}

/* 門の突破（金茶）と門の開始（墨色）の帯。開始時は操作中なので画面を暗くせず、床から離れた上寄りに出す。 */
.countdown[data-variant=clear]{background:radial-gradient(circle,#203e4922 0%,#0f1c3080 80%)}
.countdown[data-variant=clear] span{background:linear-gradient(90deg,transparent,#8d6a2cf2 14%,#b08a3af2 50%,#8d6a2cf2 86%,transparent);text-shadow:0 3px 0 #5e4519,0 0 20px #ffe39a99}
.countdown[data-variant=stage]{place-items:start center;padding-top:clamp(24px,11%,86px);background:none}
.countdown[data-variant=stage] span{font-size:clamp(26px,4.8vw,54px);background:linear-gradient(90deg,transparent,#203e49e6 14%,#203e49e6 86%,transparent);text-shadow:0 3px 0 #0f1c30,0 0 16px #ffd66b66}
/* 残り30秒：上端の細い帯と、画面の縁の赤い脈動。 */
.time-warning{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 3px #b8402fcc,inset 0 0 70px #b8402f66}
.time-warning>div{position:absolute;top:clamp(8px,4%,26px);left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:14px;padding:6px 34px;white-space:nowrap;color:#fffaf0;background:linear-gradient(90deg,transparent,#b8402ff0 16%,#b8402ff0 84%,transparent);border-block:2px solid #e8c77a}
.time-warning strong{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(18px,2.6vw,28px);letter-spacing:.12em;text-shadow:0 2px 0 #7b3126}
.time-warning small{font-size:clamp(11px,1.3vw,14px);font-weight:700;letter-spacing:.08em}
@media(prefers-reduced-motion:no-preference){
  .time-warning.is-shown{animation:edge-pulse 1.2s ease-in-out 2 both,fade-late 2.8s linear both}
  .time-warning.is-shown>div{animation:band-slide .5s cubic-bezier(.2,.9,.3,1) backwards}
}
@keyframes edge-pulse{0%,100%{box-shadow:inset 0 0 0 0 #b8402f00,inset 0 0 0 #b8402f00}50%{box-shadow:inset 0 0 0 3px #b8402fcc,inset 0 0 70px #b8402f77}}
@keyframes band-slide{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-50%) translateX(-40px)}}
@keyframes fade-late{0%,85%{opacity:1}100%{opacity:0}}

/* オープニング。ページを開いたときに画面全体へ重ね、物語の後に入城画面（TOP）へ進む。 */
body.is-opening{overflow:hidden}
.opening{position:fixed;inset:0;z-index:100;overflow:hidden;background:#0b1424;color:#fff7e6}
.opening canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.opening-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:radial-gradient(circle,#0b142455 0%,#0b1424b0 70%)}
.opening-gate img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 6px 14px #000a)}
.opening-gate-kicker{margin:0 0 16px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(18px,2.4vw,26px);font-weight:700;letter-spacing:.2em;color:#ffe9b8;text-shadow:0 2px 0 #0008}
.opening-gate-title{margin:2px 0 0;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(40px,7vw,76px);font-weight:900;letter-spacing:.12em;text-shadow:0 4px 0 #0008,0 0 24px #ffd66b55}
.opening-gate .primary-button{min-width:260px;font-size:17px;padding:14px 26px}
.opening-gate-note{margin:4px 0 0;font-size:12px;color:#d8dccf}
.opening-gate .text-button{color:#d8dccf;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.opening-gate .text-button:hover{color:#fff}
.opening-line{position:absolute;left:50%;top:16%;width:min(92vw,980px);margin:0;transform:translateX(-50%);text-align:center;white-space:pre-line;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(24px,3.8vw,46px);font-weight:800;line-height:1.6;letter-spacing:.1em;text-shadow:0 3px 0 #0009,0 0 22px #000c;pointer-events:none}
.opening-line.is-name{font-size:clamp(32px,5.6vw,68px);color:#ffe9b8;text-shadow:0 4px 0 #0009,0 0 28px #ffd66b88}
.opening-line.is-small{top:7%;font-size:clamp(18px,2.6vw,30px)}
.opening-line.is-strike{top:22%;font-size:clamp(30px,5vw,60px);color:#fff;text-shadow:0 4px 0 #7b3126,0 0 26px #b8402fcc}
.opening-scroll{position:absolute;left:50%;top:54%;width:min(86vw,500px);transform:translate(-50%,-50%);padding:26px 34px 22px;background:#fffcf6;color:var(--ink);border-radius:2px;box-shadow:0 18px 40px #000a;text-align:center}
.opening-scroll::before,.opening-scroll::after{content:"";position:absolute;left:-14px;right:-14px;height:14px;border-radius:7px;background:linear-gradient(#8a5a33,#5a3a1f)}
.opening-scroll::before{top:-10px}.opening-scroll::after{bottom:-10px}
.opening-scroll-head{margin:0 0 8px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(24px,3.4vw,34px);font-weight:900;letter-spacing:.4em;color:var(--red)}
.opening-scroll-body{margin:0;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(17px,2.3vw,23px);font-weight:700;line-height:1.9}
.opening-scroll-sign{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:16px;font-weight:700}
.opening-scroll-sign img{width:56px;height:56px;object-fit:contain}
.opening-seal{position:absolute;right:18px;bottom:16px;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border:4px double var(--red);border-radius:8px;color:var(--red);font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:18px;font-weight:900;line-height:1.05;writing-mode:vertical-rl;text-align:center;transform:rotate(-8deg);opacity:0}
.opening-scroll.is-sealed .opening-seal{opacity:1}
.opening-title{position:absolute;left:50%;top:50%;width:min(94vw,900px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:900;text-shadow:0 4px 0 #0008,0 0 26px #000a}
.opening-title span:first-of-type{font-size:clamp(40px,7.4vw,92px);letter-spacing:.06em}
.opening-title span+span{font-size:clamp(24px,3.8vw,46px);color:#ffe9b8}
.opening-title small{margin-top:10px;font-size:clamp(14px,1.9vw,20px);letter-spacing:.12em;padding:6px 18px;border-block:2px solid #e8c77a}
.opening-tools{position:absolute;right:16px;top:14px;display:flex;gap:8px}
.opening-tool{border:1px solid #ffffff66;border-radius:4px;background:#0b142499;color:#fff7e6;padding:8px 14px;font-size:13px}
.opening-tool:hover{background:#0b1424e6}
.opening-gate-event{margin:4px 0 0;font-size:13px;font-weight:700;letter-spacing:.14em;color:#ffb3a6}
.opening-title em{font-style:normal;font-size:clamp(13px,1.7vw,18px);font-weight:700;letter-spacing:.16em;color:#ffd2c8;margin-bottom:4px}
.opening-replay{display:block;margin:10px auto 0;font-size:12px;min-height:30px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.opening-scroll{padding:22px 22px 18px}.opening-seal{width:46px;height:46px;font-size:14px;right:10px;bottom:10px}.opening-line{top:12%}}
@media(prefers-reduced-motion:no-preference){
  .opening-gate>*{animation:rise-in .7s backwards}
  .opening-gate>:nth-child(2){animation-delay:.1s}.opening-gate>:nth-child(3){animation-delay:.2s}.opening-gate>:nth-child(4){animation-delay:.32s}.opening-gate>:nth-child(n+5){animation-delay:.5s}
  .opening-line.is-shown{animation:story-in 1.1s ease-out backwards}
  .opening-line.is-name.is-shown{animation:name-in 1.4s cubic-bezier(.2,.9,.3,1) backwards}
  .opening-line.is-strike.is-shown{animation:strike-in .45s cubic-bezier(.2,1.5,.4,1) backwards}
  .opening-scroll.is-open{animation:scroll-unroll .9s cubic-bezier(.3,.8,.3,1) backwards}
  .opening-scroll.is-sealed .opening-seal{animation:seal-stamp .45s cubic-bezier(.3,1.6,.5,1) backwards}
  .opening-title.is-shown>*{animation:story-in 1.2s ease-out backwards}
  .opening-title.is-shown>:nth-child(2){animation-delay:.3s}.opening-title.is-shown>:nth-child(3){animation-delay:.7s}.opening-title.is-shown>:nth-child(4){animation-delay:1.1s}
  .opening.is-leaving{animation:opening-out .7s ease-in forwards}
}
@keyframes story-in{from{opacity:0;filter:blur(8px);letter-spacing:.3em}}
@keyframes name-in{0%{opacity:0;transform:translateX(-50%) scale(1.25);filter:blur(10px)}60%{opacity:1;filter:blur(0)}}
@keyframes strike-in{from{opacity:0;transform:translateX(-50%) scale(1.8)}}
@keyframes scroll-unroll{from{opacity:.4;clip-path:inset(50% -20px 50% -20px)}to{opacity:1;clip-path:inset(-14px -20px -14px -20px)}}
@keyframes opening-out{to{opacity:0}}
@media(prefers-reduced-motion:no-preference){.is-entering[data-enter=title] #opening-replay{animation:rise-in .5s 1.75s backwards}}

/* スマホ：案内板に続きがあることを示し、スクロール自体もなるべく減らす（ゲーム画面の大きさ・操作は変えない）。 */
.overlay-panel.has-more::after{content:"▼ 下にスクロールすると続きがあります";position:sticky;bottom:-1px;display:block;margin-top:-8px;padding:30px 0 6px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--red);background:linear-gradient(#fffcf600,#fffcf6 50%);pointer-events:none}
@media(prefers-reduced-motion:no-preference){.overlay-panel.has-more::after{animation:hint-bob 1.6s ease-in-out infinite}}
@keyframes hint-bob{50%{transform:translateY(3px)}}
/* タッチ操作の端末では使わないキーボード操作の説明を省く（タッチボタンの説明は残す）。 */
@media(pointer:coarse){.rules-keys{display:none}}
@media(max-width:600px){
  .game-page{padding-top:10px}
  .is-intro .overlay,.game-shell[data-screen=result] .overlay{padding:10px 8px}
  .overlay-panel{padding:18px 16px 14px}
  .overlay h1{font-size:25px;margin:8px 0}
  .overlay #panel-description{font-size:12.5px;line-height:1.75;margin:6px 0 10px}
  .game-shell[data-screen=story] .panel-kicker,.game-shell[data-screen=rules] .panel-kicker{font-size:13px}
  .lord-voice{margin:10px 0;padding:10px 0;gap:10px}.lord-voice img{width:52px;height:52px}.lord-voice span{font-size:13px}.lord-voice blockquote{font-size:15px;line-height:1.7}
  .rules-content ol{margin:10px 0}.rules-content li{margin:8px 0;padding-left:30px}.rules-content li span{line-height:1.6}
  .rules-content>p{margin:6px 0 10px}
  .panel-back{margin-top:6px;min-height:28px}.overlay .panel-foot{margin-top:6px}
}
/* オンライン版のスマホ：全画面ボタンがない分ヘッダーを1段にし、ゲームの枠を縦に広げる。 */
@media(max-width:520px){
  [data-edition=online] .site-header{flex-wrap:nowrap;padding:10px 12px}
  [data-edition=online] .site-header .brand{flex:1 1 auto;flex-basis:auto}
  [data-edition=online] .is-intro .canvas-wrap{height:clamp(420px,calc(100dvh - 92px),760px)}
  [data-edition=online] .game-shell[data-screen=result] .canvas-wrap{height:clamp(420px,calc(100dvh - 150px),760px)}
}