:root{--ink:#173a43;--cream:#fffaf0;--teal:#28766d;--leaf:#81c89a;--gold:#f7ca68;--rose:#e9819b}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(circle at 10% 5%,#d7f1d1,transparent 32%),radial-gradient(circle at 89% 88%,#d8ede4,transparent 34%),#edf4e9;color:var(--ink);font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif}.shell{width:min(100%,570px);min-height:100svh;margin:auto;padding:calc(env(safe-area-inset-top) + 22px) 20px calc(env(safe-area-inset-bottom) + 25px);text-align:center}header{position:relative}.back{position:absolute;left:0;top:3px;color:#628681;font-size:12px;font-weight:800;text-decoration:none}header p{margin:0;color:#619689;font:800 10px ui-monospace,monospace;letter-spacing:.16em}h1{margin:8px 0 4px;font-size:clamp(30px,8vw,42px);letter-spacing:-.06em}.subtitle{display:block;margin:auto;max-width:360px;color:#63827e;font-size:13px;line-height:1.7}.game-card{margin-top:22px;padding:14px;border:1px solid #b9d6c6;border-radius:26px;background:#fffdf7cc;box-shadow:0 18px 45px #43806b18}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:2px 4px 12px}.stats div{padding:5px;border-right:1px solid #d4e1d5}.stats div:last-child{border:0}.stats small{display:block;color:#70928d;font-size:10px;font-weight:700}.stats b{display:block;margin-top:2px;color:var(--teal);font-size:20px}.hint{min-height:2.8em;margin:1px 0 12px;color:#4e7770;font-size:13px;line-height:1.4}.board{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;aspect-ratio:1;border-radius:18px;background:linear-gradient(150deg,#cee5d1,#bee0d7);padding:9px;box-shadow:inset 0 0 0 1px #80a99b}.rune{position:relative;min-width:0;border:0;border-radius:27%;background:var(--tile);box-shadow:inset 0 3px 0 #ffffff75,0 3px 0 #00000018;transition:transform .12s,filter .12s}.rune::after{content:"";position:absolute;inset:26%;border:2px solid #ffffffb0;border-radius:50%;transform:rotate(45deg)}.rune::before{content:"";position:absolute;width:24%;height:24%;top:18%;left:22%;border-radius:50%;background:#fff9}.rune:hover,.rune:focus-visible{filter:brightness(1.08);transform:translateY(-2px);outline:3px solid #f6dc88}.rune.pulse{animation:pulse .22s ease-out}.rune.clear{animation:clear .28s ease-out forwards}.actions{display:grid;grid-template-columns:.75fr 1.25fr;gap:8px;margin-top:13px}.actions button,.result button{border:0;border-radius:14px;padding:13px;cursor:pointer;font:800 14px inherit}.soft{background:#e8f0e8;color:#50756e}.start,.result button{background:linear-gradient(135deg,#f7d87c,#f2a864);color:#4a3424;box-shadow:0 4px 0 #c9824c}.note{margin:16px 0 0;color:#73958b;font-size:11px}.result{position:fixed;z-index:10;inset:0;display:grid;place-items:center;padding:20px;background:#123a3bb5}.result-card{width:min(100%,360px);padding:30px 24px 25px;border:1px solid #ffffff9c;border-radius:25px;background:#fffaf0;text-align:center;box-shadow:0 22px 50px #061b1b5c}.result-card>span{display:block;font-size:47px;color:#f0b85a}.result-card p{color:#769189}.result-card p:first-of-type{margin:7px 0 1px;font:800 10px ui-monospace,monospace;letter-spacing:.14em}.result-card h2{margin:6px 0;font-size:27px;letter-spacing:-.05em}.result-card button{width:100%;margin-top:12px}@keyframes clear{to{transform:scale(.1) rotate(90deg);opacity:0}}@keyframes pulse{50%{transform:scale(1.08)}to{transform:scale(1)}}@media(max-width:380px){.shell{padding-inline:12px}.game-card{border-radius:20px;padding:10px}.board{gap:5px;padding:7px}.rune{border-radius:24%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* 絵画調の素材（ARCADIA-18）。game.js が画像の読み込みを確かめてから body にクラスを付ける。届かなければ上の元の見た目のまま。 */
body.art-sky{background:linear-gradient(180deg,#edf4e9b3,#edf4e9d9 55%,#edf4e9f0),url("assets/backdrop.webp") center top/cover no-repeat,#edf4e9}
.art-sky .board{background:linear-gradient(150deg,#cee5d1cc,#bee0d7cc)}
/* 色ごとに形も違うルーン石。縁と光をその色にして、小さな画面でも色がひと目で分かるようにする */
.art-runes .rune{background:var(--tile) center/cover no-repeat;box-shadow:inset 0 0 0 3px var(--tile),0 0 7px var(--tile),0 3px 6px #1f3b2a40}
.art-runes .rune::before,.art-runes .rune::after{content:none}
.art-runes .rune[data-color="0"]{background-image:url("assets/rune-gold.webp")}
.art-runes .rune[data-color="1"]{background-image:url("assets/rune-green.webp")}
.art-runes .rune[data-color="2"]{background-image:url("assets/rune-blue.webp")}
.art-runes .rune[data-color="3"]{background-image:url("assets/rune-purple.webp")}
.art-runes .rune[data-color="4"]{background-image:url("assets/rune-pink.webp")}