/* ========================================================================== 
   ミニゲーム広場 — Nature Garden visual system
   既存の機能・レイアウト契約を保ち、全ページの見た目だけを一括で置き換える。
   ========================================================================== */

:root {
    --bg-deep: #f4f5e9;
    --bg-deep-2: #e8efe1;
    --panel: #fffef8;
    --panel-2: #f7f8ee;
    --panel-3: #e7efdf;
    --border: #cddbc5;
    --border-soft: #dde7d7;
    --ink: #234236;
    --ink-muted: #60766b;
    --ink-dim: #8b9b91;
    --primary: #e77d64;
    --primary-deep: #c95e49;
    --mint: #4d9b70;
    --gold: #d79a32;
    --violet: #8876aa;
    --sky: #5b9fc1;
    --orange: #dd8b45;
    --glow-primary: 0 12px 30px rgba(201, 94, 73, .18);
    --glow-mint: 0 12px 30px rgba(77, 155, 112, .18);
    --glow-gold: 0 12px 30px rgba(215, 154, 50, .18);
    --shadow-card: 0 22px 55px -36px rgba(37, 69, 50, .45);
    --shadow-pop: 0 10px 24px rgba(55, 86, 63, .15);
    --radius: 24px;
    --radius-sm: 16px;
    --radius-lg: 34px;
    --font-display: 'Kiwi Maru', 'Yu Mincho', serif;
    --font-body: 'M PLUS Rounded 1c', system-ui, sans-serif;
    --font-pixel: 'Nunito', system-ui, sans-serif;
    --font-score: 'Nunito', system-ui, sans-serif;
    --container: 1180px;
    --nav-h: 78px;
}

/* 独立オンラインワールド */
.home-world-section { margin-top: 30px; }
.home-world-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; min-height: 360px; overflow: hidden; border: 1px solid rgba(238, 214, 137, .46); border-radius: 22px 5px 22px 5px; box-shadow: 0 24px 55px rgba(24, 61, 51, .19); color: #fff; isolation: isolate; text-decoration: none; }
.home-world-art, .home-world-shade { position: absolute; inset: 0; z-index: -2; }
.home-world-art { background-position: center 48%; background-size: cover; transition: transform .7s ease, filter .7s ease; }
.home-world-shade { z-index: -1; background: linear-gradient(90deg, rgba(8, 33, 34, .94), rgba(8, 33, 34, .6) 52%, rgba(8, 33, 34, .18)), linear-gradient(0deg, rgba(7, 27, 29, .88), transparent 55%); }
.home-world-card:hover .home-world-art { transform: scale(1.035); filter: saturate(1.08); }
.home-world-copy { display: grid; align-content: end; max-width: 720px; padding: 44px; }
.home-world-copy > small { color: #cde9bd; font: 800 10px/1.4 Nunito, sans-serif; letter-spacing: .19em; }
.home-world-copy > strong { margin: 8px 0 15px; color: #fff5d4; font: 500 clamp(40px, 6vw, 72px)/.95 "Kiwi Maru", serif; letter-spacing: -.05em; text-shadow: 0 5px 22px rgba(0, 0, 0, .35); }
.home-world-copy > strong i { display: block; margin-left: 4px; color: #d7eec1; font-size: .34em; font-style: normal; letter-spacing: .17em; }
.home-world-copy > span { max-width: 640px; color: rgba(255, 255, 255, .76); font-size: 13px; line-height: 1.9; }
.home-world-copy > em { justify-self: start; margin-top: 21px; padding: 11px 18px; border: 1px solid rgba(255, 238, 173, .48); border-radius: 4px; background: rgba(45, 111, 84, .68); color: #fff8d9; font-size: 12px; font-style: normal; font-weight: 800; transition: background .2s, transform .2s; }
.home-world-card:hover .home-world-copy > em { background: rgba(56, 137, 99, .9); transform: translateX(3px); }
.home-world-specs { display: grid; gap: 1px; margin: 0 28px 28px 0; border: 1px solid rgba(255, 255, 255, .16); background: rgba(6, 29, 31, .66); backdrop-filter: blur(10px); }
.home-world-specs b { min-width: 155px; padding: 14px 17px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #ffe69a; font: 800 24px/1 Nunito, sans-serif; }
.home-world-specs b:last-child { border-bottom: 0; }
.home-world-specs small { display: block; margin-top: 4px; color: rgba(255, 255, 255, .55); font: 700 7px/1.4 Nunito, sans-serif; letter-spacing: .12em; }

@media (max-width: 760px) {
    .home-world-card { grid-template-columns: 1fr; min-height: 470px; }
    .home-world-shade { background: linear-gradient(0deg, rgba(8, 33, 34, .95), rgba(8, 33, 34, .35) 78%); }
    .home-world-copy { padding: 28px 24px 18px; }
    .home-world-specs { grid-template-columns: repeat(3, 1fr); margin: 0 24px 24px; }
    .home-world-specs b { min-width: 0; padding: 11px 8px; text-align: center; font-size: 18px; }
}

@media (max-width: 480px) {
    .home-world-copy > strong { font-size: 42px; }
    .home-world-specs small { letter-spacing: 0; }
}

html { background: #edf2e7; }
body { background: #f4f5e9; color: var(--ink); letter-spacing: .015em; }
body::before {
    background:
        radial-gradient(900px 500px at 8% -8%, rgba(119, 185, 205, .28), transparent 68%),
        radial-gradient(760px 460px at 92% 4%, rgba(243, 205, 118, .22), transparent 64%),
        radial-gradient(840px 620px at 50% 108%, rgba(91, 153, 91, .16), transparent 70%),
        linear-gradient(180deg, #f8f7ed 0%, #eef3e8 48%, #e9efe2 100%);
}
body::after {
    opacity: .45;
    background-image:
        radial-gradient(ellipse at 12% 18%, rgba(58, 105, 69, .08) 0 4px, transparent 5px),
        radial-gradient(ellipse at 72% 35%, rgba(58, 105, 69, .06) 0 3px, transparent 4px),
        radial-gradient(circle at 42% 78%, rgba(255, 255, 255, .7) 0 2px, transparent 3px);
    background-size: 190px 170px, 230px 210px, 140px 150px;
}

.page { padding-block: 34px 88px; }
.section { margin-block: 68px; }
.section-head { margin-bottom: 24px; }
.section-title { color: #294b3d; font-weight: 500; }
.section-title .pip {
    width: 12px; height: 28px;
    border-radius: 999px 999px 4px 999px;
    background: linear-gradient(180deg, #77b86d, #3f8d68);
    box-shadow: none;
    transform: rotate(12deg);
}
.section-sub { margin-top: 5px; }

/* Header */
.nav {
    height: var(--nav-h);
    background: rgba(255, 254, 247, .88);
    border-bottom: 1px solid rgba(145, 169, 137, .32);
    box-shadow: 0 10px 35px rgba(49, 81, 57, .07);
    backdrop-filter: blur(20px) saturate(1.1);
}
.nav-inner { gap: 16px; }
.brand { gap: 10px; color: #24483a; }
.brand-badge {
    width: 43px; height: 43px;
    border-radius: 50% 50% 48% 30%;
    background: linear-gradient(145deg, #f5edb8, #84bf73);
    border: 1px solid rgba(66, 121, 78, .18);
    box-shadow: 0 8px 20px rgba(71, 128, 83, .18);
    transform: rotate(-7deg);
}
.brand-lockup { display: flex; flex-direction: column; line-height: 1.05; }
.brand-lockup strong { font: 500 1.08rem var(--font-display); }
.brand-lockup small { margin-top: 5px; color: #789083; font: 800 .56rem/1 var(--font-pixel); letter-spacing: .18em; }
.nav-links { gap: 2px; }
.nav-link { color: #62796e; border-radius: 999px; font-weight: 700; }
.nav-link:hover { color: #24543e; background: rgba(84, 153, 101, .09); }
.nav-link.is-active { color: #24543e; background: #e2efdd; box-shadow: inset 0 0 0 1px rgba(70, 135, 87, .12); }
.nav-online { color: #397b59; background: #edf6e8; border-color: #c5ddbf; }
.nav-online-dot { background: #5aa96f; box-shadow: 0 0 0 4px rgba(90, 169, 111, .12); }
.nav-user, .nav-toggle { background: #fffef8; box-shadow: 0 6px 16px rgba(54, 87, 62, .08); }
.dropdown-menu { background: rgba(255, 254, 248, .98); box-shadow: 0 20px 50px rgba(42, 68, 49, .16); }

/* Buttons and fields */
.btn { border-radius: 999px; box-shadow: none; }
.btn-primary { background: linear-gradient(135deg, #e98468, #d46750); box-shadow: 0 10px 24px rgba(205, 99, 76, .20); }
.btn-mint { background: linear-gradient(135deg, #74b983, #4b966b); color: #fff; }
.btn-gold { background: linear-gradient(135deg, #edc66c, #d99a35); color: #493716; }
.btn-ghost { background: rgba(255, 254, 248, .72); border-color: #cbdac4; }
.btn-ghost:hover { background: #eef5e9; }
.input, .textarea, .select,
.jr-field input, .jr-field select,
.sr-fld input, .sr-fld select,
.plaza-form input {
    background: #fffef9;
    border-color: #cbd9c5;
    border-radius: 14px;
    box-shadow: inset 0 2px 5px rgba(58, 82, 62, .035);
}

/* Surfaces */
.panel, .ranking, .game-card, .home-social-card,
.jr-room-card, .sr-room-card, .jr-member-bar,
.record-card, .pstat, .play-titlebar, .play-stat {
    background: rgba(255, 254, 248, .92);
    border-color: #ceddc8;
    box-shadow: var(--shadow-card);
}
.panel, .ranking { overflow: hidden; }
.game-card { border-radius: 26px; }
.game-card::before, .game-card::after { display: none; }
.game-card:hover { transform: translateY(-5px); box-shadow: 0 30px 58px -36px rgba(42, 78, 52, .52); }
.game-card-art {
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 236, 158, .72), transparent 24%),
        radial-gradient(ellipse at 20% 100%, color-mix(in srgb, var(--card-accent, #5c9e72) 18%, transparent), transparent 52%),
        linear-gradient(160deg, #e2f2ed, #e8f1d4 72%, #cbe3bd);
    border-bottom-color: #d8e4d2;
}
.game-card-art::after {
    opacity: .35;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 2px, transparent 3px);
    background-size: 26px 26px;
}
.game-card-emoji { filter: drop-shadow(0 10px 10px rgba(54, 86, 58, .15)); }

/* Every card receives its own hand-built garden pictogram instead of platform emoji. */
.game-pictogram {
    position: relative;
    z-index: 1;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(58, 104, 66, .17);
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(255, 254, 235, .94), rgba(213, 234, 203, .92));
    box-shadow: 0 13px 24px rgba(51, 85, 55, .13);
    transition: transform .22s ease;
}
.game-card:hover .game-pictogram { transform: translateY(-4px) rotate(-2deg); }
.play-title .game-pictogram { margin: -10px; transform: scale(.68); }
.admin-game-thumb { overflow: hidden; }
.admin-game-thumb .game-pictogram { margin: -14px; transform: scale(.58); }
.game-pictogram::before, .game-pictogram::after, .game-pictogram i { content: ''; position: absolute; display: block; }
.game-pictogram--windrunner i { width: 18px; height: 30px; border-radius: 50% 50% 42% 42%; background: #df7863; transform: rotate(32deg); box-shadow: inset -5px -4px rgba(140,75,55,.17); }
.game-pictogram--windrunner::before { width: 38px; height: 12px; border-top: 4px solid #5d9a71; border-radius: 50%; transform: translate(-18px,-10px) rotate(-8deg); box-shadow: 4px 13px 0 -3px #7cad80; }
.game-pictogram--windrunner::after { width: 10px; height: 20px; border: solid #556c8d; border-width: 0 5px 5px 0; transform: translate(16px,17px) skew(-14deg); }
.game-pictogram--hoshifuru { background: linear-gradient(145deg,#e5eedc,#ddd8e8); }
.game-pictogram--hoshifuru i { width: 38px; height: 38px; background: #e6b947; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,20% 94%,31% 57%,2% 35%,39% 35%); filter: drop-shadow(7px 8px 0 rgba(112,91,133,.23)); }
.game-pictogram--hoshifuru::before { width: 4px; height: 30px; border-radius: 4px; background: #789a79; transform: translate(-22px,-18px) rotate(-42deg); }
.game-pictogram--hoshifuru::after { width: 7px; height: 7px; border-radius: 50%; background: #fffbd7; box-shadow: 27px -18px #fffbd7, 29px 17px #fffbd7, -24px 22px #fffbd7; }
.game-pictogram--mojisagashi i { width: 40px; height: 40px; border: 5px solid #547798; border-radius: 50%; background: rgba(113,191,207,.42); transform: translate(-5px,-6px); }
.game-pictogram--mojisagashi::before { width: 27px; height: 9px; border-radius: 9px; background: #735984; transform: translate(22px,22px) rotate(45deg); }
.game-pictogram--mojisagashi::after { content: 'あ'; color: #365e55; font: 800 17px var(--font-display); transform: translate(-5px,-6px); }
.game-pictogram--irokeshi i { width: 48px; height: 35px; border-radius: 24px 24px 8px 8px; background: linear-gradient(180deg,#df6c75 0 22%,#e6ae46 22% 43%,#78a76d 43% 64%,#61a0b5 64% 82%,#8a72a0 82%); }
.game-pictogram--irokeshi::before { width: 47px; height: 26px; bottom: 12px; border-radius: 50%; background: #e2edd5; }
.game-pictogram--irokeshi::after { width: 8px; height: 8px; border-radius: 50%; background: #df6c75; box-shadow: 13px 3px #e6ae46,26px 0 #78a76d,39px 4px #61a0b5; transform: translate(-19px,22px); }
.game-pictogram--irodrop i { width: 14px; height: 14px; border-radius: 5px; background: #df6c75; box-shadow: 17px 0 #e6ae46,34px 0 #78a76d,0 17px #61a0b5,17px 17px #8a72a0,34px 17px #df6c75; transform: translate(-17px,-4px); }
.game-pictogram--irodrop::before { width: 48px; height: 4px; border-radius: 4px; background: #557968; transform: translate(0,27px); box-shadow: 0 -38px 0 -1px rgba(85,121,104,.35); }
.game-pictogram--irodrop::after { width: 0; height: 0; border: 7px solid transparent; border-top: 10px solid #557968; transform: translate(0,-28px); }
.game-pictogram--tetris i { width: 16px; height: 16px; background: #56bdd5; box-shadow: 16px 0 #56bdd5,32px 0 #e1bd4f,0 16px #7f6bb4,16px 16px #e1bd4f,32px 16px #e1bd4f,0 32px #7f6bb4,16px 32px #7f6bb4; transform: translate(-16px,-16px); }
.game-pictogram--tetris::before { width: 54px; height: 54px; border: 3px solid rgba(75,126,111,.35); border-radius: 8px; }
.game-pictogram--tetris::after { width: 10px; height: 10px; border-radius: 2px; background: #df706d; box-shadow: 10px 0 #df706d,20px 0 #df706d,20px -10px #df706d; transform: translate(-15px,-17px); }
.game-pictogram--gearline { background: linear-gradient(145deg,#cce9dd,#d5e1cd); }
.game-pictogram--gearline i { width: 39px; height: 39px; border: 7px dotted #247f7c; border-radius: 50%; background: #f4d269; box-shadow: inset 0 0 0 7px #476a69,7px 8px 0 rgba(54,102,94,.16); }
.game-pictogram--gearline::before { width: 54px; height: 8px; border-radius: 8px; background: #5d846f; transform: translate(0,24px) rotate(-8deg); box-shadow: 0 10px 0 -2px #89aa79; }
.game-pictogram--gearline::after { width: 9px; height: 20px; border-radius: 6px 6px 2px 2px; background: #e4a651; transform: translate(22px,-19px) rotate(20deg); box-shadow: -44px 12px 0 -1px #4c9291; }
.game-pictogram--chronica { background: linear-gradient(145deg,#dbe4dc,#e9dfc6); }
.game-pictogram--chronica i { width: 48px; height: 48px; border: 5px solid #d5a53f; border-radius: 50%; box-shadow: inset 0 0 0 5px #65769a,7px 8px 0 rgba(78,84,105,.16); }
.game-pictogram--chronica::before { width: 24px; height: 24px; background: #f2c456; clip-path: polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%); }
.game-pictogram--chronica::after { width: 7px; height: 7px; border-radius: 50%; background: #5b6b91; transform: translate(0,-29px); box-shadow: 25px 29px #7e5f8f,-25px 29px #527f77; }
.game-pictogram--shogi { background: linear-gradient(145deg,#ead29a,#d8ae64); }
.game-pictogram--shogi i { width: 43px; height: 50px; background: #f2ce7c; clip-path: polygon(50% 0,94% 17%,87% 100%,13% 100%,6% 17%); filter: drop-shadow(5px 7px 0 rgba(85,51,18,.2)); }
.game-pictogram--shogi::after { content: '王'; color: #3b2916; font: 900 23px "Yu Mincho",serif; transform: translateY(4px); }
.game-pictogram--mahjong { background: linear-gradient(145deg,#dce8d5,#c9d9c5); }
.game-pictogram--mahjong i { width: 42px; height: 53px; border: 2px solid #b6a679; border-bottom-width: 7px; border-radius: 6px; background: #fff8df; box-shadow: 6px 7px 0 rgba(42,88,70,.18); }
.game-pictogram--mahjong::after { content: '中'; color: #bd3029; font: 900 26px "Yu Mincho",serif; }
.game-pictogram--reversi { background: linear-gradient(145deg,#cce1d5,#aacdbd); }
.game-pictogram--reversi i { width: 49px; height: 49px; border: 4px solid #3c715d; border-radius: 9px; background: repeating-linear-gradient(0deg,transparent 0 11px,rgba(47,105,82,.35) 11px 13px),repeating-linear-gradient(90deg,#72ae8c 0 11px,#3f795f 11px 13px); }
.game-pictogram--reversi::before { z-index:1; width:19px; height:19px; border-radius:50%; background:#18211d; transform:translate(-12px,-11px); box-shadow:4px 5px 0 rgba(25,31,28,.18); }
.game-pictogram--reversi::after { z-index:1; width:19px; height:19px; border:1px solid #aaa590; border-radius:50%; background:#fff9e8; transform:translate(12px,11px); box-shadow:4px 5px 0 rgba(25,31,28,.18); }
.game-pictogram--astralforge { background:linear-gradient(145deg,#ddd5ef,#c5dfe1); }
.game-pictogram--astralforge i { width:37px; height:50px; border:3px solid #6b58a4; border-radius:5px; background:linear-gradient(150deg,#7a62bd,#243b63); transform:rotate(8deg); box-shadow:-10px 4px 0 -2px #d09a59,-16px 7px 0 -4px #4f9d91,7px 8px 0 rgba(62,50,99,.2); }
.game-pictogram--astralforge::after { width:25px; height:25px; background:#f2d36a; clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%); transform:translate(4px,-2px) rotate(8deg); }
.game-pictogram--flufffront { background:linear-gradient(145deg,#dcebd0,#ddd2ee); }
.game-pictogram--flufffront i { width:42px; height:45px; border:4px solid #4c775e; border-radius:48% 48% 42% 42%; background:linear-gradient(145deg,#9bc77e,#5c976e); box-shadow:inset 0 0 0 6px rgba(255,255,221,.35),6px 7px 0 rgba(71,62,91,.17); }
.game-pictogram--flufffront::before { z-index:1; width:17px; height:23px; border-radius:50% 5px 50% 5px; background:#6fa66e; transform:translate(-15px,-28px) rotate(-28deg); box-shadow:18px 3px 0 #89b876; }
.game-pictogram--flufffront::after { z-index:2; content:'守'; color:#fff5bf; font:900 19px/1 "Yu Mincho",serif; text-shadow:0 2px 0 rgba(47,80,60,.3); }
.game-pictogram--generic i { width: 42px; height: 29px; border: 4px solid #5a8a67; border-radius: 14px 14px 18px 18px; }
.game-pictogram--generic::before { width: 18px; height: 4px; background: #5a8a67; box-shadow: 7px -7px #5a8a67; transform: translate(-11px,1px); }
.game-pictogram--generic::after { width: 6px; height: 6px; border-radius: 50%; background: #d99f43; box-shadow: 10px 7px #d66f65; transform: translate(13px,-4px); }
.game-card-play { background: #477e5c; box-shadow: 0 8px 18px rgba(37, 80, 52, .24); }
.rank-row:hover, .feed-item:hover { background: #f0f5eb; }
.rank-row.top-1 { background: linear-gradient(90deg, rgba(232, 188, 80, .20), transparent); }
.rank-row.top-2 { background: linear-gradient(90deg, rgba(137, 165, 148, .12), transparent); }
.rank-row.top-3 { background: linear-gradient(90deg, rgba(193, 124, 83, .12), transparent); }

/* Hero */
.hero {
    min-height: 545px;
    display: flex;
    align-items: center;
    border: 8px solid rgba(255, 254, 243, .92);
    border-radius: 38px;
    background-image:
        linear-gradient(90deg, rgba(250, 249, 235, .96) 0%, rgba(250, 249, 235, .86) 34%, rgba(250, 249, 235, .18) 62%, transparent 100%),
        url('../img/garden-hero.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 32px 72px -42px rgba(36, 78, 52, .52);
}
.hero-content { padding: clamp(38px, 6vw, 72px); max-width: 660px; background: none; }
.hero-eyebrow { color: #4b8763; font-weight: 800; letter-spacing: .14em; }
.hero-eyebrow .blink { color: #e27b61; }
.hero h1 { color: #24483a; font-size: clamp(2.25rem, 5.4vw, 4rem); line-height: 1.28; text-shadow: 0 3px 18px rgba(255,255,255,.8); }
.hero h1 .hl { background: linear-gradient(110deg, #3e825e, #87a849 70%); -webkit-background-clip: text; background-clip: text; }
.hero p.lead { color: #526e61; font-weight: 500; line-height: 1.95; }
.hero-stage { overflow: hidden; }
.garden-speck {
    position: absolute;
    width: 11px; height: 7px;
    border-radius: 100% 0 100% 0;
    background: rgba(255, 249, 207, .9);
    box-shadow: 0 0 12px rgba(255, 239, 151, .75);
    animation: garden-float 7s ease-in-out infinite;
}
.garden-speck.s1 { left: 63%; top: 24%; }
.garden-speck.s2 { left: 76%; top: 42%; animation-delay: -2s; }
.garden-speck.s3 { left: 88%; top: 19%; animation-delay: -4s; }
.garden-speck.s4 { left: 69%; top: 68%; animation-delay: -5.5s; }
@keyframes garden-float { 0%,100% { transform: translate(0,0) rotate(0); opacity: .3; } 45% { transform: translate(18px,-22px) rotate(85deg); opacity: 1; } }
.stat-strip { gap: 12px; }
.stat { background: rgba(255, 254, 247, .82); border-color: rgba(132, 160, 123, .28); backdrop-filter: blur(12px); }
.stat .num { text-shadow: none; }

.home-social-card { position: relative; overflow: hidden; border-radius: 22px; }
.home-social-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--mint); }
.home-social-card.sora::before { background: var(--gold); }
.home-social-card.jinro::before { background: var(--violet); }
.home-social-card.moji::before { background: var(--coral); }
.home-social-card.medal::before { background: var(--sky); }
.home-social-card.chaos::before { background: #6f62c3; }
.home-social-card.tetris::before { background: #31a9c7; }
.home-social-card .hs-ico { filter: drop-shadow(0 6px 8px rgba(52, 78, 58, .12)); }
.social-pictogram { position:relative; width:56px!important; height:56px!important; flex:none; display:grid!important; place-items:center; overflow:hidden; border:1px solid #cbdac6; border-radius:19px; background:linear-gradient(145deg,#fffce9,#dcebcf); }
.social-pictogram::before,.social-pictogram::after,.social-pictogram i{content:'';position:absolute;display:block}
.social-pictogram--medal i{width:30px;height:30px;border:5px double #b77724;border-radius:50%;background:#eabd50;box-shadow:10px 7px 0 -2px #d89b37}.social-pictogram--medal::after{width:13px;height:8px;border:3px solid #fff0a5;border-width:0 0 3px;border-radius:50%;transform:translate(-5px,1px)}
.social-pictogram--sora i{width:38px;height:5px;border-radius:6px;background:#5f8ba4;transform:rotate(-11deg);box-shadow:-3px 10px 0 -1px #dfab43}.social-pictogram--sora::before{width:14px;height:20px;background:repeating-conic-gradient(#fff 0 25%,#58606e 0 50%) 50%/8px 8px;transform:translate(15px,-13px)}.social-pictogram--sora::after{width:11px;height:11px;border-radius:50%;background:#df7863;transform:translate(-15px,-7px)}
.social-pictogram--jinro i{width:31px;height:26px;border-radius:48% 48% 42% 42%;background:#778078;transform:translateY(6px)}.social-pictogram--jinro::before{width:18px;height:24px;background:#778078;clip-path:polygon(0 0,100% 43%,60% 100%);transform:translate(-14px,-13px) rotate(-8deg);box-shadow:22px 1px 0 #778078}.social-pictogram--jinro::after{width:4px;height:4px;border-radius:50%;background:#f5d671;transform:translate(-7px,4px);box-shadow:14px 0 #f5d671}
.social-pictogram--moji i{width:36px;height:36px;border-radius:9px;background:repeating-linear-gradient(90deg,#d8e8d3 0 9px,#f8f5e5 9px 12px),repeating-linear-gradient(#d8e8d3 0 9px,#f8f5e5 9px 12px)}.social-pictogram--moji::after{content:'字';position:absolute;color:#d66a52;font-size:22px;font-weight:900}
.social-pictogram--chaos i{width:26px;height:38px;border:3px solid #fff;border-radius:6px;background:#4d7fd0;transform:rotate(11deg);box-shadow:-12px 5px 0 -1px #e05c65,10px 7px 0 -1px #e4b532}.social-pictogram--chaos::after{width:10px;height:17px;border-radius:50%;background:#fff;transform:rotate(32deg)}
.social-pictogram--tetris i{width:10px;height:10px;border-radius:2px;background:#56bdd5;box-shadow:10px 0 #56bdd5,20px 0 #e1bd4f,0 10px #7f6bb4,10px 10px #e1bd4f,20px 10px #e1bd4f,0 20px #7f6bb4,10px 20px #7f6bb4;transform:translate(-10px,-10px)}.social-pictogram--tetris::after{width:8px;height:8px;border-radius:2px;background:#df706d;box-shadow:8px 0 #df706d,16px 0 #df706d,16px -8px #df706d;transform:translate(-12px,-16px)}
.social-pictogram--plaza i{width:35px;height:25px;border-radius:50%;background:#8d7ba1;transform:translateY(-4px)}.social-pictogram--plaza::before{width:13px;height:12px;background:#8d7ba1;clip-path:polygon(0 0,100% 0,20% 100%);transform:translate(-12px,10px)}.social-pictogram--plaza::after{width:5px;height:5px;border-radius:50%;background:#f8efd0;transform:translate(-8px,-5px);box-shadow:8px 0 #f8efd0,16px 0 #f8efd0}

/* Authentication and footer */
.auth-aside {
    background:
        linear-gradient(160deg, rgba(247, 248, 233, .9), rgba(218, 237, 218, .82)),
        url('../img/garden-hero.png') center / cover;
    border-right: 1px solid #cfddc8;
}
.auth-perk .ico { background: rgba(255,254,247,.82); box-shadow: 0 8px 18px rgba(53,84,61,.09); }
.auth-aside .deco-coin { background: radial-gradient(circle at 35% 30%, #fff6c8, #e3b757 60%, #bd8131); box-shadow: 0 8px 18px rgba(171, 116, 44, .18); }
.footer { background: #e3ebdc; border-top: 1px solid #cbd9c5; }
.footer .brand-badge { width: 36px; height: 36px; }

/* Game host */
.play-titlebar {
    border: 1px solid #d4dfce;
    border-top: 5px solid #6d9c67;
    background: rgba(255, 254, 247, .91);
    box-shadow: 0 22px 46px -36px rgba(43, 75, 47, .45);
}
.play-titlebar h1 { font-family: var(--font-display); color: #294c3d; }
.play-game-icon { background: linear-gradient(145deg, #eff4df, #d7e9d2); border-color: #c7d8c0; }
.play-stage {
    border: 7px solid rgba(255, 254, 247, .92);
    border-radius: 30px;
    background: #dbe9d3;
    box-shadow: 0 28px 58px -38px rgba(36, 72, 45, .52);
}
.play-stat, .record-card { background: rgba(255, 254, 247, .93); }

/* Sora rooms and plaza */
.sora-card, .sora-panel, .sora-room-card, .sora-stage,
.plaza-main, .plaza-side, .plaza-form {
    background: rgba(255, 254, 247, .9) !important;
    border-color: #cfddc9 !important;
    box-shadow: 0 22px 50px -38px rgba(38, 75, 48, .5);
}
.sora-room-card:hover { border-color: #7da37b !important; background: #f8faee !important; }
.plaza-log { background: linear-gradient(#f8faef, #eef4e9) !important; border-color: #d3e0ce !important; }
.plaza-msg-body { background: #fffdf5 !important; border-color: #d7e0cf !important; color: #355244 !important; }
.plaza-msg.is-mine .plaza-msg-body { background: #e6f1e2 !important; border-color: #bcd1b5 !important; }
.plaza-user { background: #f3f7ec !important; border-color: #dae4d3 !important; }
.plaza-user-dot { background: #61a276 !important; box-shadow: 0 0 0 4px rgba(97, 162, 118, .13); }

/* Natural game shells: canvas games keep their mechanics, but share one garden UI. */
.wr-root, .hf-root, .ik-root, .ms-root {
    --primary: #e47b62;
    --primary-deep: #c95f49;
    --mint: #4f9a70;
    --gold: #d49a35;
    --violet: #8172a6;
    --sky: #5b9cb8;
    border-radius: 24px;
    background: #dcead3 !important;
    box-shadow: inset 0 0 0 1px rgba(72, 111, 75, .18);
}
.wr-canvas, .hf-canvas, .ik-canvas, .ms-canvas { border-radius: 24px; }
.wr-hud, .hf-hud, .ik-hud, .ms-hud {
    color: #28483a !important;
    text-shadow: 0 1px 4px rgba(255, 255, 255, .8) !important;
}
.wr-score-label, .hf-score-label, .ik-score-label, .ms-score-label,
.wr-sub, .hf-sub, .ik-sub, .ms-sub { color: #507060 !important; }
.wr-score, .hf-score, .ik-score, .ms-score, .ms-timer { color: #294f3e !important; text-shadow: none !important; }
.wr-pause-btn, .hf-pause-btn, .ik-pause-btn, .ms-pause-btn {
    color: #345847 !important;
    background: rgba(255, 254, 246, .82) !important;
    border-color: rgba(94, 134, 91, .28) !important;
    box-shadow: 0 7px 18px rgba(54, 86, 55, .12);
}
.wr-overlay, .hf-overlay, .ik-overlay, .ms-overlay {
    background: linear-gradient(145deg, rgba(243, 247, 228, .92), rgba(213, 234, 214, .9)) !important;
    backdrop-filter: blur(9px);
    color: #294b3d !important;
}
.wr-overlay-card, .hf-overlay-card, .ik-overlay-card, .ms-overlay-card {
    background: rgba(255, 254, 247, .92);
    border: 1px solid rgba(105, 145, 101, .25);
    border-radius: 28px;
    padding: clamp(24px, 5vw, 42px);
    box-shadow: 0 26px 62px -38px rgba(30, 67, 42, .54);
}
.wr-logo b, .hf-logo b, .ik-logo b, .ms-logo b,
.wr-paused-title, .hf-paused-title, .ik-paused-title, .ms-paused-title,
.wr-over-title, .hf-over-title, .ik-over-title, .ms-over-title { color: #294b3d !important; text-shadow: none !important; }
.wr-tagline, .hf-tagline, .ik-tagline, .ms-tagline,
.wr-char-desc { color: #5c7466 !important; }
.wr-hint, .hf-hint, .ik-hint, .ms-hint,
.hf-rules, .ik-rules, .ms-rules {
    color: #486557 !important;
    background: #edf3e4 !important;
    border-color: #d4dfcb !important;
}
.wr-hint kbd, .hf-hint kbd, .ik-hint kbd, .ms-hint kbd {
    color: #315443 !important;
    background: #fffdf5 !important;
    border-color: #bfcfb8 !important;
    box-shadow: 0 2px 0 #b8c8b2 !important;
}
.wr-big-btn, .hf-big-btn, .ik-big-btn, .ms-big-btn {
    background: linear-gradient(135deg, #eb856c, #d66a52) !important;
    box-shadow: 0 10px 22px rgba(177, 91, 64, .26) !important;
}
.wr-text-btn, .hf-text-btn, .ik-text-btn, .ms-text-btn { color: #557263 !important; }
.wr-text-btn:hover, .hf-text-btn:hover, .ik-text-btn:hover, .ms-text-btn:hover { color: #315543 !important; }
.wr-preview { background: linear-gradient(#dff0eb 0 55%, #dce8c3 55%) !important; border-color: #bdd2b6 !important; }
.wr-char-btn { background: #f7f8ee !important; border-color: #d1ddcb !important; color: #496457 !important; }
.wr-char-btn.is-active { background: #e6f0df !important; }
.wr-biome { color: #355a46 !important; background: rgba(255, 254, 245, .84) !important; border-color: #c8d9c1 !important; }
.wr-result-detail b, .hf-result-detail b, .ik-result-detail b, .ms-result-detail b { color: #315443 !important; }
.wr-save-status.muted, .hf-save-status.muted, .ik-save-status.muted, .ms-save-status.muted { color: #607469 !important; background: #eef2e7 !important; }

/* Medal garden arcade */
.medal-page, .medal-root, .medal-shell {
    color: #29483b !important;
    background: transparent !important;
}
.medal-stage, .medal-card, .medal-panel, .medal-machine-card,
.medal-header, .medal-toolbar, .medal-side, .medal-info {
    background: rgba(255, 254, 247, .92) !important;
    border-color: #cfddc9 !important;
    box-shadow: 0 22px 48px -38px rgba(38, 72, 46, .48) !important;
}
.medal-machine-card:hover { transform: translateY(-4px); border-color: #86aa80 !important; }
.medal-btn, .medal-action { background: linear-gradient(135deg, #5d956c, #417a58) !important; border-color: #477b58 !important; }

/* Admin */
.admin-side { background: #e8efe1; border-color: #ccd9c6; }
.admin-side h3 { color: #315341; }
.admin-nav a:hover { background: rgba(80, 125, 85, .08); color: #315341; }
.admin-nav a.is-active { background: #d9e8d3; color: #315341; border-color: #bcd1b7; }

@media (max-width: 760px) {
    .hero { min-height: 510px; background-position: 61% center; border-width: 5px; border-radius: 28px; }
    .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250,249,235,.97), rgba(250,249,235,.73) 72%, transparent); }
    .hero-content { position: relative; z-index: 1; padding: 32px 24px; }
    .brand-lockup small { display: none; }
    .garden-speck { display: none; }
    .play-stage { border-width: 4px; border-radius: 22px; }
    .wr-root, .hf-root, .ik-root, .ms-root,
    .wr-canvas, .hf-canvas, .ik-canvas, .ms-canvas { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .garden-speck { animation: none; }
    .game-card:hover, .medal-machine-card:hover { transform: none; }
}

/* ==========================================================================
   PLAY GARDEN 2.0 — crafted game portal
   情報密度、導線、状態表現を共通化したサイト全体の最終レイヤー。
   ========================================================================== */

:root {
    --bg-deep: #eeede5;
    --bg-deep-2: #e7ebe2;
    --panel: #fffef9;
    --panel-2: #f7f7f0;
    --panel-3: #e4ebe0;
    --border: #cbd4c8;
    --border-soft: #dde3da;
    --ink: #173d34;
    --ink-muted: #60736c;
    --ink-dim: #89968f;
    --primary: #e67a58;
    --primary-deep: #c95b3e;
    --mint: #3e8a68;
    --gold: #d5a342;
    --sky: #4b98bc;
    --shadow-card: 0 24px 70px -48px rgba(15, 52, 42, .6);
    --shadow-pop: 0 16px 36px -24px rgba(15, 52, 42, .55);
    --container: 1240px;
    --nav-h: 82px;
}

html { scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
    background: #eeede5;
    font-feature-settings: "palt" 1;
}
body::before {
    background:
        linear-gradient(rgba(27, 75, 62, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 75, 62, .025) 1px, transparent 1px),
        radial-gradient(920px 520px at 8% -10%, rgba(93, 164, 139, .19), transparent 70%),
        radial-gradient(760px 500px at 100% 4%, rgba(226, 181, 93, .15), transparent 66%),
        linear-gradient(180deg, #f5f2e9, #e9eee6);
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
}
body::after { opacity: .2; }

.skip-link {
    position: fixed;
    z-index: 10000;
    top: 8px;
    left: 12px;
    padding: 10px 16px;
    border-radius: 10px;
    background: #fff;
    color: #173d34;
    font-weight: 800;
    transform: translateY(-150%);
    transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
.site-main { min-height: calc(100vh - var(--nav-h)); }

/* Dark pavilion header */
.nav {
    height: var(--nav-h);
    background:
        radial-gradient(circle at 8% 0, rgba(120, 184, 139, .19), transparent 28%),
        linear-gradient(112deg, #123b32, #173f38 58%, #12352f);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 14px 36px rgba(13, 43, 35, .18);
}
.nav-inner { max-width: var(--container); gap: 18px; }
.nav .brand { color: #fffdf2; }
.brand-badge {
    position: relative;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 16px 16px 16px 7px;
    background: linear-gradient(145deg, #f3dda0, #75b481 68%, #3f7e5e);
    box-shadow: 0 12px 28px rgba(4, 29, 21, .26);
    transform: rotate(-5deg);
}
.brand-badge::before,
.brand-badge::after,
.brand-badge i {
    content: "";
    position: absolute;
    display: block;
}
.brand-badge i {
    width: 4px;
    height: 27px;
    left: 22px;
    top: 10px;
    border-radius: 99px;
    background: #245d45;
    transform: rotate(17deg);
}
.brand-badge::before {
    width: 17px;
    height: 12px;
    left: 8px;
    top: 9px;
    border-radius: 100% 0 100% 0;
    background: #f8efbf;
    transform: rotate(17deg);
}
.brand-badge::after {
    width: 18px;
    height: 12px;
    right: 5px;
    top: 21px;
    border-radius: 0 100% 0 100%;
    background: #d8e7aa;
    transform: rotate(17deg);
}
.brand-lockup strong { font-size: 1.02rem; letter-spacing: .03em; }
.brand-lockup small {
    margin-top: 6px;
    color: rgba(232, 242, 229, .64);
    font-size: .49rem;
    letter-spacing: .16em;
}
.nav-links { gap: 3px; }
.nav-link {
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: rgba(239, 245, 235, .72);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
.nav-link:hover {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .07);
    color: #fffdf3;
}
.nav-link.is-active {
    border-color: rgba(217, 235, 202, .2);
    background: rgba(211, 232, 197, .13);
    color: #fffdf3;
    box-shadow: none;
}
.nav-play-trigger { display: inline-flex; align-items: center; gap: 7px; }
.nav-play-trigger > span { color: #d6bb71; font-size: 1rem; }
.nav-play-dropdown .dropdown-menu {
    right: auto;
    left: 0;
}
.nav-play-menu {
    width: min(390px, calc(100vw - 28px));
    padding: 13px;
    border-color: rgba(24, 65, 53, .16);
    border-radius: 20px;
    background: rgba(255, 254, 248, .985);
    box-shadow: 0 26px 70px rgba(13, 43, 35, .24);
}
.nav-play-kicker {
    padding: 5px 8px 10px;
    color: #789087;
    font: 800 .58rem/1 var(--font-score);
    letter-spacing: .15em;
}
.nav-play-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px 12px;
    padding: 11px 12px;
    border-radius: 13px;
    color: #1c493c;
}
.nav-play-item::after {
    content: "↗";
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: #a3afa9;
}
.nav-play-item b { font-size: .84rem; }
.nav-play-item small { color: #75857e; font-size: .69rem; }
.nav-play-item:hover { background: #edf2e8; }
.nav-online {
    min-width: 73px;
    justify-content: center;
    border-color: rgba(137, 205, 153, .24);
    background: rgba(133, 200, 148, .1);
    color: #bce0bd;
}
.nav-online-label { color: rgba(222, 239, 218, .55); }
.nav-online-dot { background: #80d28d; box-shadow: 0 0 0 4px rgba(128, 210, 141, .1); }
.nav-user {
    min-height: 44px;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .08);
    color: #fffdf4;
    box-shadow: none;
}
.nav-user .caret { color: rgba(255, 255, 255, .55); }
.nav-actions .btn-ghost {
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
    color: #fff;
}
.nav-actions .btn-primary { background: #e5be68; color: #183b32; box-shadow: none; }
.nav-toggle {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { background: #fffdf4; }
.dropdown-menu {
    border-radius: 17px;
    background: #fffef8;
    box-shadow: 0 24px 64px rgba(13, 43, 35, .22);
}
.dropdown-ico {
    width: 28px;
    padding: 4px 3px;
    border-radius: 7px;
    background: #e9eee5;
    color: #587166;
    font: 800 .49rem/1 var(--font-score);
    letter-spacing: .04em;
}

/* Shared product surfaces */
.page { padding-block: 42px 96px; }
.section { margin-block: 78px; }
.section-title { color: #183f35; font-size: clamp(1.4rem, 2.7vw, 1.85rem); }
.section-title .pip {
    width: 9px;
    height: 32px;
    border-radius: 99px;
    background: linear-gradient(#dfa854 0 28%, #498c68 28% 100%);
    transform: none;
}
.section-sub { color: #708079; }
.panel, .ranking, .game-card, .home-social-card,
.jr-room-card, .sr-room-card, .jr-member-bar,
.record-card, .pstat, .play-titlebar, .play-stat {
    border: 1px solid rgba(46, 83, 71, .14);
    background: rgba(255, 254, 249, .96);
    box-shadow: var(--shadow-card);
}
.panel, .ranking { border-radius: 24px; }
.btn { min-height: 42px; border-radius: 12px; font-weight: 800; }
.btn-primary {
    border-color: #205943;
    background: linear-gradient(135deg, #286c50, #1f5843);
    color: #fffef8;
    box-shadow: 0 12px 24px -15px rgba(24, 78, 57, .8);
}
.btn-primary:hover { background: linear-gradient(135deg, #32795b, #245f48); }
.btn-ghost { border-color: #c7d2c7; background: rgba(255,254,249,.82); }
.input, .textarea, .select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea, select {
    border-radius: 12px;
}

/* Editorial home hero */
.hero {
    min-height: 620px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 30px;
    align-items: center;
    padding-right: clamp(24px, 4vw, 50px);
    border: 1px solid rgba(255, 255, 255, .46);
    border-radius: 34px;
    background-image:
        linear-gradient(90deg, rgba(246, 243, 229, .98) 0%, rgba(246, 243, 229, .9) 38%, rgba(20, 58, 48, .18) 68%, rgba(13, 45, 38, .38)),
        url('../img/garden-hero.png');
    background-position: center;
    box-shadow: 0 38px 90px -52px rgba(12, 51, 39, .65);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 16px;
    z-index: 0;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 24px;
    pointer-events: none;
}
.hero-content {
    max-width: 720px;
    padding: clamp(46px, 6vw, 78px);
}
.hero-eyebrow {
    color: #36765a;
    font: 800 .69rem/1.5 var(--font-score);
    letter-spacing: .15em;
}
.hero h1 {
    max-width: 11ch;
    margin-top: 17px;
    color: #153e34;
    font-size: clamp(2.65rem, 5vw, 4.55rem);
    line-height: 1.22;
    letter-spacing: -.025em;
}
.hero h1 .hl {
    background: linear-gradient(108deg, #286f51, #809844);
    -webkit-background-clip: text;
    background-clip: text;
}
.hero p.lead { max-width: 58ch; margin-top: 22px; color: #506a60; }
.hero-cta { margin-top: 28px; }
.hero .stat-strip { max-width: 590px; margin-top: 34px; }
.hero .stat {
    padding: 13px 14px;
    border: 1px solid rgba(49, 91, 75, .13);
    border-radius: 14px;
    background: rgba(255,254,246,.72);
    text-align: left;
}
.hero .stat .num { color: #1e5944; font-size: 1.45rem; }
.hero-guide {
    position: relative;
    z-index: 3;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 24px;
    background: rgba(15, 55, 46, .87);
    box-shadow: 0 24px 55px rgba(10, 39, 32, .25);
    color: #f9f7ec;
    backdrop-filter: blur(16px) saturate(1.1);
}
.hero-guide-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 3px 14px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.hero-guide-head span { font: 800 .62rem/1 var(--font-score); letter-spacing: .16em; }
.hero-guide-head small { color: rgba(241,246,235,.6); font-size: .68rem; }
.hero-route {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 17px 4px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    transition: padding .18s ease, background .18s ease;
}
.hero-route:hover { padding-inline: 10px; background: rgba(255,255,255,.055); }
.hero-route-no { color: #d9bc71; font: 800 .65rem/1 var(--font-score); }
.hero-route > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.hero-route b { color: #fffef7; font-size: .86rem; }
.hero-route small { margin-top: 3px; color: rgba(232,241,230,.6); font-size: .67rem; }
.hero-route i { color: rgba(255,255,255,.46); font-style: normal; }
.hero-guide-foot {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 15px;
    color: rgba(230,240,227,.62);
    font-size: .63rem;
}
.hero-guide-foot span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #82d28e;
    box-shadow: 0 0 0 5px rgba(130,210,142,.1);
}
.home-proof {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: -28px 34px 0;
    overflow: hidden;
    border: 1px solid rgba(36, 78, 64, .14);
    border-radius: 20px;
    background: rgba(255,254,248,.96);
    box-shadow: 0 24px 58px -42px rgba(17,60,46,.55);
}
.home-proof article {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 13px;
    align-items: center;
    padding: 20px 24px;
}
.home-proof article + article { border-left: 1px solid #dfe4dc; }
.home-proof-mark { color: #bd8c38; font: 800 .64rem/1 var(--font-score); letter-spacing: .08em; }
.home-proof article div { display: flex; flex-direction: column; }
.home-proof b { color: #234a3d; font-size: .84rem; }
.home-proof small { margin-top: 3px; color: #74827b; font-size: .68rem; line-height: 1.55; }

.card-grid { gap: 20px; }
.game-card {
    border-radius: 22px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.game-card:hover {
    border-color: rgba(40, 103, 75, .3);
    transform: translateY(-7px);
    box-shadow: 0 34px 70px -44px rgba(23, 69, 51, .72);
}
.game-card-art {
    min-height: 150px;
    background:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
        radial-gradient(circle at 75% 13%, rgba(255, 233, 153, .75), transparent 23%),
        linear-gradient(145deg, #d6ece4, #dce9c9);
    background-size: 24px 24px, 24px 24px, auto, auto;
}
.game-card-body { padding: 20px; }
.game-card-play { background: #245f47; box-shadow: none; }
.home-social { gap: 18px; }
.home-social-card {
    min-height: 116px;
    padding: 21px 22px;
    border-radius: 20px;
}
.home-social-card::before { width: 4px; }
.home-social-card:hover { transform: translateY(-5px); }
.ranking, .panel { box-shadow: 0 24px 70px -52px rgba(17, 60, 46, .65); }

/* Footer becomes an actual sitemap instead of one crowded row. */
.footer {
    padding: 58px 0 25px;
    border-top: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 12% 0, rgba(112, 172, 126, .12), transparent 34%),
        #12372f;
    color: rgba(235,242,229,.78);
}
.footer-inner {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(430px, 1.45fr);
    gap: 42px 70px;
    align-items: start;
}
.footer .brand { color: #fffdf2; }
.footer .brand-badge { width: 42px; height: 42px; }
.footer-brand p { max-width: 46ch; margin-top: 18px; color: rgba(222,234,217,.6); font-size: .78rem; line-height: 1.85; }
.footer-sitemap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.footer-sitemap > div { display: flex; flex-direction: column; gap: 8px; }
.footer-sitemap strong { margin-bottom: 4px; color: #d7bb73; font: 800 .58rem/1 var(--font-score); letter-spacing: .15em; }
.footer-sitemap a { color: rgba(235,242,229,.68); font-size: .77rem; }
.footer-sitemap a:hover { color: #fff; }
.footer-bottom {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.09);
    color: rgba(221,232,215,.42);
    font: 700 .62rem/1.5 var(--font-score);
    letter-spacing: .04em;
}

/* Page identity accents make every area feel designed without changing mechanics. */
body[data-page="games"] .section-title .pip,
body[data-page="rankings"] .section-title .pip { background: linear-gradient(#5b9fc1 0 30%, #387559 30%); }
body[data-page="medal"] .section-title .pip { background: linear-gradient(#e1b34e 0 45%, #5b8d67 45%); }
body[data-page="sora"] .section-title .pip { background: linear-gradient(#5aa4c8 0 55%, #d5a342 55%); }
body[data-page="jinro"] .section-title .pip { background: linear-gradient(#8b7bad 0 55%, #446f5b 55%); }
body[data-page="color-chaos"] .section-title .pip { background: linear-gradient(#e26e62 0 25%, #5a87c3 25% 50%, #e3b340 50% 75%, #58a873 75%); }

@media (max-width: 1110px) {
    .nav-inner { gap: 10px; }
    .nav-link { padding-inline: 9px; font-size: .77rem; }
    .nav-online-label, .nav-user .name { display: none; }
    .hero { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 860px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 0 24px 30px;
        background-position: 62% center;
    }
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(246,243,229,.96), rgba(246,243,229,.68));
    }
    .hero-content { padding: 48px 22px 20px; }
    .hero-guide { width: 100%; }
    .home-proof { margin-inline: 18px; }
    .home-proof article { padding-inline: 16px; }
}

@media (max-width: 720px) {
    :root { --nav-h: 68px; }
    .nav-inner { padding-inline: 14px; }
    .nav .brand-lockup strong { font-size: .9rem; }
    .brand-badge { width: 40px; height: 40px; }
    .brand-badge i { left: 19px; top: 7px; }
    .nav-toggle { display: grid; margin-left: auto; }
    .nav-online { min-width: 55px; padding-inline: 8px; }
    .nav-actions { gap: 6px; }
    .nav-actions > .btn { display: none; }
    .nav-links.open {
        top: var(--nav-h);
        gap: 5px;
        padding: 12px 14px 18px;
        border-bottom-color: rgba(255,255,255,.08);
        background: #153e35;
        box-shadow: 0 22px 40px rgba(11,39,31,.2);
    }
    .nav-links.open li,
    .nav-links.open .nav-link { width: 100%; }
    .nav-play-dropdown .dropdown-menu {
        position: fixed;
        top: calc(var(--nav-h) + 112px);
        left: 14px;
        right: 14px;
        width: auto;
        max-height: calc(100vh - var(--nav-h) - 138px);
        overflow-y: auto;
    }
    .page { padding-block: 26px 68px; }
    .section { margin-block: 56px; }
    .hero {
        min-height: 0;
        margin-top: 10px;
        padding: 0 14px 18px;
        border-radius: 24px;
    }
    .hero::after { inset: 9px; border-radius: 18px; }
    .hero-content { padding: 38px 12px 18px; }
    .hero h1 { font-size: clamp(2.25rem, 12vw, 3.2rem); }
    .hero p.lead { font-size: .88rem; line-height: 1.8; }
    .hero .stat-strip { grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .hero .stat { padding: 10px 8px; text-align: center; }
    .hero .stat .num { font-size: 1.12rem; }
    .hero .stat .lbl { font-size: .58rem; }
    .hero-guide { padding: 17px; border-radius: 18px; }
    .home-proof { grid-template-columns: 1fr; margin: 14px 8px 0; }
    .home-proof article + article { border-top: 1px solid #dfe4dc; border-left: 0; }
    .home-proof article { padding: 15px 18px; }
    .footer { padding-top: 42px; }
    .footer-inner { grid-template-columns: 1fr; gap: 34px; }
    .footer-sitemap { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; }
}

@media (max-width: 430px) {
    .brand-lockup small, .nav-online { display: none; }
    .hero .stat-strip { grid-template-columns: 1fr; }
    .hero-route { grid-template-columns: 28px 1fr auto; }
    .footer-sitemap { grid-template-columns: 1fr; }
}

/* Forest meeting room */
.jr-stage-wrap {
    background: linear-gradient(180deg, #90cfe0, #d5e7c5 60%, #7aa06a) !important;
    border: 6px solid rgba(255,254,246,.88) !important;
    border-radius: 26px !important;
    box-shadow: 0 26px 52px -38px rgba(39,73,45,.5);
}
.jr-room-card, .jr-modal-card, .jr-chat-panel, .jr-action-panel, .jr-info-panel,
.jr-role-card, .jr-log-panel {
    background: rgba(255,254,247,.93) !important;
    border-color: #cfddc9 !important;
    color: #315344 !important;
}
.jr-room-card:hover { border-color: #83a77d !important; box-shadow: 0 18px 40px -34px rgba(48,82,53,.5); }
.jr-modal { background: rgba(48,76,57,.46) !important; }
.jr-bubble { color: #315344 !important; background: #fffdf4 !important; border-color: #cddac6 !important; }
.jr-phase-badge { background: #eef3e8 !important; border-color: #cedbc7 !important; }