/* Main シェル。夜×金の単一テーマ（カード・街と同じ世界）。
   デザインの原本は docs/design/sample_main_shell.html */
:root {
    --night: #0c0e17;
    --ink: #ece7dd;
    --ink-dim: #9a96a8;
    --gold: #e8b45a;
    --gold-dim: #c7a878;
    --warm: #ffd98a;
    --alert: #ff5a5a;
    --panel: rgba(13, 11, 24, .88);
    --line: rgba(232, 180, 90, .32);
}

html { color-scheme: dark; }
html, body { height: 100%; }

body {
    margin: 0;
    overflow: hidden;
    background: var(--night);
    color: var(--ink);
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;
    user-select: none;
}

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ================= 上バー（ステータスHUDの領土） ================= */
#topbar {
    flex: none;
    display: flex; align-items: center; gap: 18px;
    padding: 0 18px 0 14px;
    height: 62px;
    background: linear-gradient(180deg, rgba(20, 17, 34, .98), rgba(13, 11, 24, .96));
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}

/* HOME（街へ帰る錨）。バーを1本占めるほどの仕事ではないので、上バーの左端に据える */
#homebtn {
    flex: none;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    color: var(--gold);
    background: none;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
}
#homebtn:hover { background: rgba(232, 180, 90, .12); }
/* 上バー両端のアイコン。線は currentColor なので色は親ボタンが決める */
#homebtn svg, #authbtn svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

.who {
    display: flex; align-items: center; gap: 16px;
    margin-right: 8px;
}

/* アイコン（丸枠）。バーの内側に収める——食み出すと下の額縁の中身に被る */
#avatar {
    position: relative; overflow: hidden;
    width: 46px; height: 46px; flex: none;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #1c1830, #05050c 75%);
    border: 2px solid var(--gold);
    box-shadow: 0 0 14px rgba(232, 180, 90, .5), 0 4px 14px rgba(0, 0, 0, .6), inset 0 0 10px rgba(0, 0, 0, .8);
    display: grid; place-items: center;
    font-size: 24px;
}
#avatar.unknown { border-color: rgba(154, 150, 168, .45); box-shadow: inset 0 0 8px rgba(0, 0, 0, .8); filter: grayscale(1) brightness(.8); }
/* 顔写真は丸枠を埋める。参照が壊れたら JS が img を外して絵文字へ静かに落とす（#45・#39 と同じ）*/
#avatar img.pfp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

#whocol { display: flex; flex-direction: column; gap: 3px; }
#whohead { display: flex; align-items: baseline; gap: 10px; padding-left: 4px; }
#v-name { font-size: 13.5px; letter-spacing: .12em; line-height: 1; }
#v-name.dim { color: var(--ink-dim); font-style: italic; }

/* 2段の HUD（上＝ランクと討伐記録、下＝LV と EXP ゲージ） */
#gaugeblock { display: flex; flex-direction: column; gap: 3px; }
#gaugeblock .grow { display: flex; align-items: center; gap: 8px; }
#gaugeblock .gtag {
    min-width: 66px; text-align: right;
    font-size: 10px; font-weight: 700; letter-spacing: .16em;
    color: var(--warm); white-space: nowrap;
}
#gaugeblock .gauge { width: 150px; }

/* 討伐記録（ランク段の右）。刻まれた難易度だけを強い順に並べる——0 の段まで出すと席が埋まる */
#v-hunts { display: flex; align-items: center; gap: 5px; height: 14px; }
#v-hunts.empty {
    font-size: 10px; letter-spacing: .16em;
    color: var(--ink-dim); white-space: nowrap;
}

.hchip {
    height: 14px; padding: 0 7px;
    transform: skewX(-24deg);
    background: linear-gradient(180deg, #17131f, #0a0812);
    border: 1px solid rgba(232, 180, 90, .26);
    display: grid; place-items: center;
}
.hchip .hin {
    transform: skewX(24deg);   /* 中身は skew を打ち消して直立 */
    display: flex; align-items: baseline; gap: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
    white-space: nowrap;
}
.hchip .g { color: var(--gold-dim); }
.hchip .n { color: var(--ink); font-style: italic; }
/* 上位2段だけ格を上げる（色の特別扱いは語彙でなく階梯内の位置で決める） */
.hchip.a { border-color: rgba(232, 180, 90, .5); }
.hchip.a .g { color: var(--gold); }
.hchip.s { border-color: var(--gold); box-shadow: 0 0 8px rgba(232, 180, 90, .35); }
.hchip.s .g { color: var(--warm); }
.hchip.s .n { color: #ffe98a; }

.gauge {
    position: relative;
    height: 11px;
    transform: skewX(-24deg);
    background: linear-gradient(180deg, #05050c, #10101c);
    border: 1px solid rgba(0, 0, 0, .9);
    outline: 1px solid rgba(236, 231, 221, .18);
    overflow: hidden;
}
.gauge .fill {
    position: absolute; inset: 0; right: auto;
    width: 0;
    transition: width .4s ease;
}
.gauge.tp .fill {
    background: linear-gradient(180deg, #9fdcff 0%, #38a6e8 45%, #1a6fb0 55%, #4fc0f0 100%);
    box-shadow: 0 0 8px rgba(70, 180, 240, .5);
}
.gauge .num {
    position: absolute; inset: 0;
    transform: skewX(24deg);   /* 数字は skew を打ち消して直立 */
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; font-style: italic;
    letter-spacing: .22em; text-indent: .22em;
    color: #ffe98a;
    text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
    white-space: nowrap;
}
.gauge.tp .num { color: #eaf6ff; }
.gauge.empty .num { color: var(--ink-dim); font-style: normal; }

/* ================= ヒヨコの庭 =================
   HUD の間に余った幅がそのまま散歩道。flex: 1 で余りを取るので、
   HUD が伸びれば庭が縮む——マスコットは席を奪わない（状態の表示が常に優先） */
#yard {
    position: relative;
    flex: 1 1 auto; min-width: 0;
    align-self: stretch;
    overflow: hidden;          /* 端で切れても構わない。折り返しは JS が庭の幅で決める */
    pointer-events: none;      /* 庭そのものは触れない。触れるのはヒヨコだけ */
}

/* 歩ける幅が残っていない画面ではヒヨコごと引っ込める（判定は JS）。
   庭は畳まない——幅が 0 になると広がり直せる瞬間を見失う */
#yard.narrow #chick { display: none; }

/* 不死鳥の雛。バーの底が地面（下端に立たせると、線が地面に見える） */
#chick {
    position: absolute;
    left: 0; bottom: 4px;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform;
    filter: drop-shadow(0 0 7px rgba(255, 215, 107, .35));
}
#chick .plume { fill: #ffd76b; }
#chick .tail { fill: #f7c854; }
/* 翼は体との色差で読ませる（30px では形が潰れて、腹の模様に見えてしまう） */
#chick .wing { fill: #e6a72e; transform-box: fill-box; transform-origin: 92% 8%; }
#chick .bill { fill: #f5993a; }
#chick .foot {
    fill: none; stroke: #f5993a; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
    transform-box: fill-box; transform-origin: center;
}
#chick .tuft { fill: none; stroke: #ffd76b; stroke-width: 1.6; stroke-linecap: round; }
#chick .eyeball { transform-box: fill-box; transform-origin: center; }
#chick .eye { fill: #2a1c0c; }
#chick .spark { fill: #fff; opacity: .92; }
#chick .smile { fill: none; stroke: #2a1c0c; stroke-width: 1.5; stroke-linecap: round; }
#chick .blush { fill: #ff8f8f; opacity: .55; }
/* 笑顔の目と頬はニコニコのときだけ出す（既定は開いた目） */
#chick .smile, #chick .blush { display: none; }
#chick.happy .eyeball { display: none; }
#chick.happy .smile, #chick.happy .blush { display: block; }

/* 歩き：胴が小さく上下し、足が交互に出る。立ち止まると足だけ止まる */
#chick .torso { transform-box: fill-box; transform-origin: center bottom; }
#chick.walk .torso { animation: chick-bob .34s ease-in-out infinite; }
#chick.walk .foot.a { animation: chick-step .68s ease-in-out infinite; }
#chick.walk .foot.b { animation: chick-step .68s ease-in-out infinite reverse; }
/* 瞬き。歩いていても止まっていても打つ——これが無いと目が死ぬ */
#chick .eyeball { animation: chick-blink 4.6s ease-in-out infinite; }
/* ニコニコ：その場で跳ねて羽をばたつかせる（歩みは JS が止める）。
   跳ねるときだけは足も一緒に上げる——胴だけ上げると足が伸びて見える */
#chick .feet { transform-box: fill-box; transform-origin: center; }
#chick.happy .torso, #chick.happy .feet { animation: chick-hop .42s ease-out 2; }
#chick.happy .wing { animation: chick-flap .19s ease-in-out 8; }

@keyframes chick-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
@keyframes chick-step { 0%, 100% { transform: translateX(-1.7px); } 50% { transform: translateX(1.7px); } }
@keyframes chick-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
@keyframes chick-flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-26deg); } }
@keyframes chick-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* 動きを減らす設定では拍を止める。表情（ニコニコ）は動きではないので残す */
@media (prefers-reduced-motion: reduce) {
    #chick .torso, #chick .feet, #chick .foot, #chick .eyeball, #chick .wing { animation: none; }
}

/* 右クラスタ：在室 → GP → ロゴ → ログイン */
#topbar .right { margin-left: auto; display: flex; align-items: center; gap: 18px; }

/* 在室（バスの presence）。誰も居なければ hidden で席ごと畳む。
   溢れたら隠す——先頭は必ず自分の居場所（並べるのは JS）なので、千切れるのは常に他所の塊 */
#here { display: flex; align-items: center; min-width: 0; overflow: hidden; }
#here[hidden] { display: none; }
/* 居場所ごとの塊：見出し（サイトのコード名）＋そこに居る人の丸 */
#here .hgroup { display: flex; align-items: center; gap: 10px; flex: none; }   /* 灯りの環（box-shadow）が隣と触れない幅 */
#here .hgroup + .hgroup { margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(236, 231, 221, .14); }
#here .hplace {
    font-size: 10px; letter-spacing: .12em;
    color: var(--ink-dim); white-space: nowrap;
}
/* 自分が居る場所だけ見出しを灯す（「いまここに居る」が一目で分かる位置の印） */
#here .hgroup.mine .hplace { color: var(--warm); text-shadow: 0 0 8px rgba(232, 180, 90, .35); }
/* 台帳・掲示板と同じ丸い名札（色相は id から決まるので、同じ人はどの画面でも同じ色）*/
#here .avatar {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: none;
    border-radius: 50%;
    background: hsl(var(--avatar-hue, 40) 34% 24%);
    border: 1px solid hsl(var(--avatar-hue, 40) 52% 52%);
    color: hsl(var(--avatar-hue, 40) 62% 82%);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 13px; font-weight: 700; line-height: 1;
    cursor: default;
    /* 居るあいだは灯る。切れれば消えるので、灯りは常に「今」を指す */
    box-shadow: 0 0 0 2px var(--night), 0 0 0 3px #7bd88f, 0 0 10px rgba(123, 216, 143, .45);
}
/* 顔写真は丸（AI は角丸）を埋める。壊れた参照は JS が img を外して頭文字へ落とす（#45）*/
#here .avatar .pfp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* AI は角のある札にして人と見分ける（字を読まなくても効く区別） */
#here .avatar.agent { border-radius: 7px; }

#gp {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; letter-spacing: .1em;
    color: var(--warm); white-space: nowrap;
}
#gp .coin { font-size: 15px; filter: drop-shadow(0 0 6px rgba(232, 180, 90, .5)); }
#gp.dim { color: var(--ink-dim); font-weight: 400; }
#gp.dim .coin { filter: grayscale(1) brightness(.8); }

.logo {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: 15px; letter-spacing: .3em;
    color: var(--gold);
    text-shadow: 0 0 14px rgba(232, 180, 90, .35);
    white-space: nowrap;
}

#authbtn {
    flex: none;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    color: var(--gold);
    background: none;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
}
#authbtn:hover { background: rgba(232, 180, 90, .12); }
#authbtn.out { color: var(--ink-dim); border-color: rgba(154, 150, 168, .3); }
/* ログアウトは矢印を外向きに（ドアから出る） */
#authbtn.out .arrow { transform: scaleX(-1); transform-origin: 8.5px 12px; }

/* ================= 額縁 ================= */
#stage { flex: 1; position: relative; background: #000; }
#stage iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* ================= 縦画面（スマホ） =================
   デスクトップを縮めるのではなく席を選び直す：
   ロゴと在室ラベルは降り、HUD と HOME は詰める */
@media (max-width: 600px) {
    #topbar { gap: 8px; padding: 0 8px; height: 56px; }
    #homebtn { width: 30px; height: 30px; }
    .who { gap: 0; margin-right: 0; min-width: 0; }
    #avatar { width: 38px; height: 38px; font-size: 20px; }
    /* 狭い幅の HUD はアバターだけ。名前・RANK・LV は券面（Guild）で見る */
    #whocol { display: none; }
    /* 庭は余白そのもの。狭い画面には余白が無いので、ヒヨコごと畳む */
    #yard { display: none; }

    #topbar .right { gap: 10px; }
    .logo { display: none; }           /* 銘は Hub の街が名乗る。バーの席は状態に譲る */
    #gp { display: none; }             /* 財布は券面（Guild Card）で見る。狭い幅ではバーに載せない */
    /* 狭い幅では自分の居場所だけ。他所の塊まで並べるとバーが他の状態を押し出す */
    #here .hgroup { gap: 6px; }
    #here .hgroup:not(.mine) { display: none; }
    #authbtn { width: 30px; height: 30px; }
}