/* ひらがなチャレンジ（ゲーム）のページ。サイトの style.css のあとに読む。
   画面（1080×1920）は、スマホでは画面いっぱい、PC では高さに合わせた縦長にする。ボタンは画面の幅に合わせて大きさが変わる（cqw） */
.kg{display:flex;flex-direction:column;align-items:center;padding:0 0 8px}
.kg-stage{position:relative;width:min(100vw,calc(100vh*9/16));aspect-ratio:9/16;container-type:inline-size;overflow:hidden;background:#E6C882;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
@supports (height:100dvh){.kg-stage{width:min(100vw,calc(100dvh*9/16))}}
#kg-canvas{display:block;width:100%;height:100%}

.kg-corner{position:absolute;top:1.6cqw;display:inline-flex;align-items:center;justify-content:center;height:8cqw;border:0;border-radius:4cqw;background:rgba(255,251,240,.92);color:var(--ink);box-shadow:0 1px 4px rgba(90,60,10,.25);cursor:pointer;font:800 3.4cqw/1 var(--font);text-decoration:none}
.kg-home{left:1.8cqw;padding:0 3.4cqw}
.kg-sound{right:1.8cqw;width:8cqw;padding:0}
.kg-sound svg{width:4.6cqw;height:4.6cqw;fill:var(--ink)}
.kg-sound .off,.kg-sound[aria-pressed="true"] .on{display:none}
.kg-sound[aria-pressed="true"] .off{display:block}

.kg-panel{position:absolute;left:0;right:5.6cqw;display:flex;flex-direction:column;align-items:center;gap:2.6cqw;text-align:center}
.kg-panel[hidden]{display:none}
.kg-start{top:27.5%;gap:2.4cqw}
.kg-howto{display:block;width:40cqw;height:auto}
.kg-start p{max-width:58cqw;margin:0;padding:1.6cqw 3.6cqw;border-radius:2.4cqw;background:rgba(255,251,240,.94);box-shadow:0 2px 8px rgba(90,60,10,.25);font:800 4.4cqw/1.3 var(--font);color:var(--ink)}
.kg-start p b{color:var(--pink)}
.kg-go:not(:disabled){animation:kg-pulse .9s ease-in-out infinite}
@keyframes kg-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.kg-go:not(:disabled){animation:none}}
.kg-row{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2.6cqw}
/* 始める前：Play と Random は縦に並べる（横に並べるとゲンの兜にかかる）。2つを同じ幅に */
.kg-start .kg-row{flex-direction:column;align-items:stretch;gap:2cqw}
.kg-start .kg-row .kg-btn{min-width:34cqw}
/* 終わりの画面：ボタンの段は最後の札の下、動画へのリンクは床（2人の足元より下）に置く。しばまるの吹き出しと重ねない */
.kg-end{position:absolute;inset:0;pointer-events:none}
.kg-end .kg-panel{pointer-events:auto}
.kg-end-row{top:44.5%}
.kg-watch{top:85%}
.kg-btn{min-width:30cqw;height:10cqw;padding:0 6cqw;border:.7cqw solid #fff;border-radius:5cqw;background:var(--pink);color:#fff;box-shadow:0 2px 8px rgba(90,60,10,.3);cursor:pointer;font:800 4.6cqw/1 var(--font);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.kg-btn:disabled{opacity:.7;cursor:default}
.kg-btn-sub{background:#FFFBF0;color:var(--ink);border-color:#FFFBF0;font-size:3.9cqw}
.kg-btn-random{min-width:0;padding:0 5cqw 0 4cqw;gap:1.4cqw;background:var(--gen)}
.kg-btn-random svg{width:5.4cqw;height:5.4cqw;fill:#fff;flex:none}
.kg-btn:focus-visible,.kg-corner:focus-visible{outline:.8cqw solid var(--gen);outline-offset:.4cqw}

.kg-note,.kg-credit{max-width:640px;margin:10px 16px 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft);text-align:center}