/* Minecraft フォント(Idrees Hassan 作 / OFL-1.1) https://github.com/IdreesInc/Minecraft-Font */
@font-face {
    font-family: "Minecraft";
    src: url("fonts/Minecraft.otf") format("opentype");
    font-weight: 400;
}

@font-face {
    font-family: "Minecraft";
    src: url("fonts/Minecraft-Bold.otf") format("opentype");
    font-weight: 700;
}

/* ---- 全体 ---- */

/* hidden を付けた要素は、display を指定したクラスが付いていても必ず隠す */
[hidden] {
    display: none !important;
}

body {
    margin: 0 auto;
    max-width: 800px;
    padding: 32px 16px;
    background: #eef8fd;          /* ごく薄い水色 */
    color: #1f2d3a;
    font-family: "Arial", sans-serif;
}

.card {
    background: white;
    border: 1px solid #d3ecf8;    /* 薄い水色の枠線 */
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(59, 180, 229, 0.12);  /* 水色っぽい柔らかい影 */
}

/* ---- 左上の ≡ ボタンと、左から出るメニュー ---- */

.menuButton {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 30;                  /* メニューより手前 */
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: white;
    border: 1px solid #d3ecf8;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(59, 180, 229, 0.15);
    cursor: pointer;
}

.menuButton span {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #2a9fd6;
    transition: transform 0.25s, opacity 0.25s;
}

/* 開いている間は ≡ を × にする */
.menuOpen .menuButton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menuOpen .menuButton span:nth-child(2) { opacity: 0; }
.menuOpen .menuButton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sideMenu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    width: 260px;
    max-width: 80vw;
    padding: 76px 16px 16px;      /* 上は ≡ ボタンの分あける */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: white;
    border-right: 1px solid #d3ecf8;
    box-shadow: 4px 0 24px rgba(59, 180, 229, 0.18);
    transform: translateX(-100%);  /* 普段は画面の左の外に隠しておく */
    transition: transform 0.25s ease;
}

.menuOpen .sideMenu {
    transform: translateX(0);
}

.sideMenuTitle {
    padding: 0 12px 8px;
    font-family: "Minecraft", sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: #9aa8b4;
}

.sideMenu a {
    padding: 12px;
    border-radius: 10px;
    color: #1f2d3a;
    font-weight: bold;
    text-decoration: none;
}

.sideMenu a:hover {
    background: #e3f4fc;
    color: #2a9fd6;
}

/* 今いるページ */
.sideMenu a[aria-current="page"] {
    background: #3bb4e5;
    color: white;
}

.menuOverlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(31, 45, 58, 0.3);
    opacity: 0;
    pointer-events: none;         /* 閉じている間はクリックを通す */
    transition: opacity 0.25s;
}

.menuOpen .menuOverlay {
    opacity: 1;
    pointer-events: auto;
}

/* 画面が狭くて ≡ ボタンがカードに重なる時は、その分ページを下げる */
@media (max-width: 900px) {
    body { padding-top: 76px; }
}

/* ---- ヘッダー(ロゴ・タイトル・状態) ---- */

.header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    margin-bottom: 41px;          /* 下の内容との間をあけて、真ん中に区切り線を引く */
}

/* スクロールした時: 小さい帯にして画面の上に固定する(menu.js が compact を付ける) */
.headerPlaceholder {
    display: none;
}

.headerPlaceholder.active {
    display: block;
}

.header.compact {
    position: fixed;
    top: 8px;
    left: 50%;
    z-index: 8;                   /* 内容より手前、メニュー(暗い幕)より後ろ */
    width: calc(min(800px, 100vw) - 32px);
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
    padding: 8px 16px;
    transform: translateX(-50%);
    box-shadow: 0 6px 20px rgba(59, 180, 229, 0.25);
    animation: headerIn 0.2s ease;
}

@keyframes headerIn {
    from { opacity: 0; transform: translate(-50%, -12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.header.compact::after {
    display: none;                /* 区切り線は元の場所でだけ出す */
}

.header.compact .logoImg {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.header.compact .siteTitle-TORITEN,
.header.compact .siteTitle-Server {
    font-size: 24px;
    white-space: nowrap;
}

.header.compact .status,
.header.compact .status.online,
.header.compact .status.offline {
    font-size: 16px;
    white-space: nowrap;
}

/* 狭い画面では、左上の ≡ ボタンと重ならないよう左をあける */
@media (max-width: 900px) {
    .header.compact { padding-left: 64px; }
}

@media (max-width: 500px) {
    .header.compact .logoImg { display: none; }
    .header.compact .siteTitle-TORITEN,
    .header.compact .siteTitle-Server { font-size: 18px; }
    .header.compact .status,
    .header.compact .status.online,
    .header.compact .status.offline { font-size: 13px; }
}

/* ヘッダーと下の内容の区切り線 */
.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -21px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #9fd8f1 15%, #9fd8f1 85%, transparent);
}

.logoImg {
    background: white;
    padding: 0px;
    border-radius: 20px;
    vertical-align: middle;
}

.siteTitle-TORITEN {
    font-size: 48px;
    vertical-align: middle;
    color: #3bb4e5;
    font-weight: bold;
}

.siteTitle-Server {
    font-size: 48px;
    vertical-align: middle;
    color: #9aa8b4;
    font-weight: bold;
}

.status {
    margin-left: auto;            /* 右端に寄せる */
    font-weight: bold;
    color: #9aa8b4;
}

.status.online {
    font-size: 30px;
    font-family: "Minecraft", sans-serif;
    color: #22b35e;
}

.status.offline {
    font-size: 30px;
    font-family: "Minecraft", sans-serif;
    color: #e5484d;
}

/* ---- 参加方法(マイクラの画面っぽい見た目) ---- */

.mcCard {
    background: #eef8fd url("textures/dirt.png") 0 0 / 64px;  /* 土ブロックを並べた背景 */
    image-rendering: pixelated;   /* テクスチャをぼかさずに拡大する */
    border-color: #3b2a1a;
    position: relative;
    overflow: hidden;
}

/* 土の上に暗い幕をかけて、昔のマイクラのメニュー画面のようにする */
.mcCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.mcCard > * {
    position: relative;           /* 暗い幕より手前に出す */
}

/* マイクラの文字: ドットのフォント + 右下に濃い影 */
.mcTitle,
.mcPanelHeader,
.mcLabel,
.mcSteps,
.mcNote,
.mcTextField,
.mcButton {
    font-family: "Minecraft", sans-serif;
    text-shadow: 2px 2px 0 #3f3f3f;
}

.mcTitle {
    margin: 0 0 20px;
    text-align: center;
    font-size: 28px;
    font-weight: 400;
    color: #ffff55;               /* マイクラの黄色 */
}

.mcPanels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.mcPanel {
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid #000;
    box-shadow: inset 2px 2px 0 #555, inset -2px -2px 0 #222;  /* 立体っぽいふち */
}

.mcPanelHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 20px;
    color: white;
}

.mcPanelHeader img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.mcLabel {
    margin-bottom: 6px;
    font-size: 14px;
    color: #aaaaaa;               /* マイクラの灰色 */
}

.mcAddressRow {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* マイクラの文字入力欄(黒い箱に灰色のふち)。text_field.png を9分割して伸ばす */
.mcTextField {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 2px solid transparent;
    border-image: url("textures/text_field.png") 1 fill / 2px stretch;
    image-rendering: pixelated;
    color: white;
    font-size: 16px;
    user-select: all;             /* クリック1回で全部選べる */
}

/* マイクラのボタン。button.png を9分割して、ふちを崩さずに伸ばす */
.mcButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 6px solid transparent;
    border-image: url("textures/button.png") 3 fill / 6px stretch;
    image-rendering: pixelated;
    background: none;
    color: white;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.mcButton:hover {
    border-image-source: url("textures/button_highlighted.png");
    color: #ffffa0;
}

.mcButtonWide {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
    font-size: 18px;
}

.mcSteps {
    margin: 8px 0 0;
    padding-left: 22px;
    color: white;
    font-size: 14px;
    line-height: 1.8;
}

.mcNote {
    margin-top: 10px;
    font-size: 13px;
    color: #55ff55;               /* マイクラの緑 */
}

/* ---- ゲームモードの紹介 ---- */

.modeList {
    display: flex;
    flex-direction: column;       /* Duel / FFA / Party を縦に並べる */
    gap: 16px;
}

.sectionTitle {
    margin: 0 0 16px;
    color: #2a9fd6;
}

.modePanel {
    padding: 18px;
    background: #f4fbff;
    border: 1px solid #d3ecf8;
    border-radius: 14px;
}

.modeHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: bold;
    color: #1f2d3a;
}

.modeHeader img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;   /* 16x16 のドット絵をぼかさずに拡大する */
}

.modeTagline {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: bold;
    color: #2a9fd6;
}

.modeText {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.8;
    color: #1f2d3a;
}

/* キットのアイコン一覧(見た目はキットのページの .kitList / .kitButton と同じ) */
.modeKits {
    margin: 20px 0 0;
}

.modeText code {
    padding: 1px 6px;
    border-radius: 6px;
    background: #e3f4fc;
    color: #2a9fd6;
    font-family: Consolas, monospace;
}

/* ---- キットのページ ---- */

.kitGroupLabel {
    margin: 4px 0 8px;
    font-size: 13px;
    font-weight: bold;
    color: #9aa8b4;
}

.kitList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.kitButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border: 1px solid #d3ecf8;
    border-radius: 12px;
    background: #f4fbff;
    color: #1f2d3a;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;        /* ホームではリンク(a)として使う */
    cursor: pointer;
}

.kitButton:hover {
    background: #e3f4fc;
}

.kitButton.active {
    background: #3bb4e5;
    border-color: #3bb4e5;
    color: white;
}

.kitButton .mcItem {
    width: 32px;
    height: 32px;
}

/* アイテムの絵(重ねた画像) */
.mcItem {
    position: relative;
    width: 100%;
    height: 100%;
}

.mcLayer,
.mcGlint {
    position: absolute;
    inset: 0;
    background-size: 100% auto;   /* 動くテクスチャ(縦長)は1コマ目だけ */
    background-repeat: no-repeat;
    image-rendering: pixelated;
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* エンチャントの光: キラキラの画像をゆっくり流す */
.mcGlint {
    background-image: url("mc/misc/enchanted_glint_item.png");
    background-size: 400% 400%;
    background-repeat: repeat;
    mix-blend-mode: screen;
    opacity: 0.6;
    animation: glint 6s linear infinite;
}

@keyframes glint {
    from { background-position: 0 0; }
    to   { background-position: 400% 400%; }
}

/* マイクラ Java 版のインベントリ画面。画像(176x166ドット)を --s 倍に拡大し、
   スロットはゲームと同じ座標(--x, --y)に置く */
.mcInventory {
    --s: 3;
    position: relative;
    width: calc(176px * var(--s));
    height: calc(166px * var(--s));
    margin: 0 auto;
    background: url("mc/gui/inventory.png") 0 0 / calc(256px * var(--s)) no-repeat;
    image-rendering: pixelated;
}

@media (max-width: 640px) {
    .mcInventory { --s: 2; }
}

@media (max-width: 400px) {
    .mcInventory { --s: 1.75; }
}

/* 左上の黒い枠のプレイヤー */
.invPlayer {
    position: absolute;
    left: calc(26px * var(--s));
    top: calc(10px * var(--s));
    width: calc(49px * var(--s));
    height: calc(66px * var(--s));
    cursor: grab;                 /* ドラッグで回せる */
    touch-action: none;
}

.invCraftLabel {
    position: absolute;
    left: calc(97px * var(--s));
    top: calc(6px * var(--s));
    font-family: "Minecraft", sans-serif;
    font-size: calc(7px * var(--s));
    line-height: 1;
    color: #404040;
}

.invSlot {
    position: absolute;
    left: calc(var(--x) * 1px * var(--s));
    top: calc(var(--y) * 1px * var(--s));
    width: calc(16px * var(--s));
    height: calc(16px * var(--s));
    background-size: 100%;
    image-rendering: pixelated;
}

/* マウスを乗せたマスは、ゲームと同じく白っぽく光る */
.invSlot[tabindex]:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
}

.invCount {
    position: absolute;
    right: calc(-1px * var(--s));
    bottom: calc(-1px * var(--s));
    z-index: 1;
    font-family: "Minecraft", sans-serif;
    font-size: calc(8px * var(--s));
    line-height: 1;
    color: white;
    text-shadow: calc(1px * var(--s)) calc(1px * var(--s)) 0 #3f3f3f;
    pointer-events: none;
}

.kitHint {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: #9aa8b4;
}

/* アイテムの説明(マイクラのツールチップっぽく) */
.itemTooltip {
    position: fixed;
    z-index: 40;
    max-width: min(360px, calc(100vw - 16px));  /* シュルカーボックスの中身(9マス)が入る幅 */
    padding: 6px 8px;
    background: rgba(16, 0, 16, 0.94);
    border: 2px solid #2d0a63;
    border-radius: 4px;
    outline: 1px solid #100010;
    font-family: "Minecraft", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: white;
    text-shadow: 2px 2px 0 #3f3f3f;
    pointer-events: none;
}

.tooltipName {
    margin-bottom: 2px;
}

/* シュルカーボックスの中身(9x3 のマス)。枠はボックスの色(--box)を混ぜた色 */
.containerPreview {
    --s: 2;                       /* 16ドットのアイテムを何倍で見せるか */
    display: grid;
    grid-template-columns: repeat(9, calc(18px * var(--s)));
    margin-top: 6px;
    padding: calc(3px * var(--s));
    background: color-mix(in srgb, var(--box) 55%, #c6c6c6);
    border-radius: 3px;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), inset -2px -2px 0 rgba(0, 0, 0, 0.35);
}

@media (max-width: 400px) {
    .containerPreview { --s: 1.6; }
}

.previewSlot {
    --slot-shade: color-mix(in srgb, var(--box) 35%, #8b8b8b);
    position: relative;
    width: calc(18px * var(--s));
    height: calc(18px * var(--s));
    padding: calc(1px * var(--s));
    box-sizing: border-box;
    background: var(--slot-shade);
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.45), inset -2px -2px 0 rgba(255, 255, 255, 0.45);  /* へこんだマス */
    text-shadow: none;
}

/* マスの中の個数は、インベントリと同じ大きさにそろえる */
.previewSlot .invCount {
    right: 0;
    bottom: 0;
    font-size: calc(8px * var(--s));
    text-shadow: calc(1px * var(--s)) calc(1px * var(--s)) 0 #3f3f3f;
}

/* ---- アカウントのページ ---- */

.accountForm {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 420px;
}

.accountForm form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.formLabel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #5b6b78;
}

.formHint {
    font-size: 12px;
    font-weight: normal;
    color: #9aa8b4;
}

.codeInput {
    font-family: Consolas, monospace;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.checkLabel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #5b6b78;
}

.formSubmit {
    align-self: flex-start;
}

.formSubmit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.formMessage {
    margin: 0;
    font-weight: bold;
    color: #e5484d;
}

.formMessage.ok {
    color: #22b35e;
}

.setupSteps {
    margin: 0;
    padding-left: 20px;
    line-height: 1.8;
    color: #1f2d3a;
}

.setupSteps code,
.setupIntro {
    font-weight: bold;
}

.setupSteps code {
    padding: 1px 6px;
    border-radius: 6px;
    background: #e3f4fc;
    color: #2a9fd6;
}

.setupIntro {
    margin: 0;
    color: #22b35e;
}

.accountMe {
    display: flex;
    align-items: center;
    gap: 16px;
}

.accountHead {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    image-rendering: pixelated;
    box-shadow: 0 0 0 1px rgba(31, 45, 58, 0.3);
}

.accountMeLabel {
    font-size: 12px;
    font-weight: bold;
    color: #9aa8b4;
}

.accountMeName {
    font-family: "Minecraft", sans-serif;
    font-size: 26px;
}

.accountActions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.accountLinkButton {
    text-decoration: none;
}

/* ---- サーバー情報のページ ---- */

.serverTitle {
    margin: 0;
}

.serverStatusBox {
    display: flex;
    align-items: center;
    gap: 16px;
}

.serverIcon {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.serverState {
    font-family: "Minecraft", sans-serif;
    font-size: 30px;
    color: #9aa8b4;
}

.serverState.online  { color: #22b35e; }
.serverState.partial { color: #f5a300; }
.serverState.offline { color: #e5484d; }

/* サーバー一覧の説明文(マイクラと同じく暗い背景に色付きの文字) */
.serverMotd {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #2b2b33;
    font-family: "Minecraft", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #aaaaaa;
}

.serverMotd:empty {
    display: none;
}

.playerCount {
    margin-top: 20px;
}

.playerCountText {
    margin-bottom: 6px;
    font-weight: bold;
    color: #5b6b78;
}

.playerCountNumber {
    font-size: 28px;
    color: #2a9fd6;
}

.playerBar {
    height: 10px;
    border-radius: 999px;
    background: #e3f4fc;
    overflow: hidden;
}

.playerBarFill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #3bb4e5;
    transition: width 0.4s;
}

.onlinePlayers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.onlinePlayer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid #d3ecf8;
    border-radius: 10px;
    background: #f4fbff;
    color: #1f2d3a;
    font-family: "Minecraft", sans-serif;
    font-size: 14px;
    text-decoration: none;
}

.onlinePlayer:hover {
    background: #e3f4fc;
    color: #2a9fd6;
}

.onlinePlayers .emptyCell {
    margin: 0;
    padding: 4px 0;
    text-align: left !important;
}

/* 項目と値の一覧 */
.infoList {
    display: grid;
    grid-template-columns: max-content 1fr;
    margin: 0;
}

.infoList dt,
.infoList dd {
    margin: 0;
    padding: 10px 8px;
    border-bottom: 1px solid #e6f4fb;
}

.infoList dt {
    font-weight: bold;
    color: #5b6b78;
}

.infoList dd {
    font-weight: bold;
    overflow-wrap: anywhere;
}

.infoList a {
    color: #2a9fd6;
}

.infoOn  { color: #f5a300; }
.infoOff { color: #22b35e; }

@media (max-width: 500px) {
    .infoList { grid-template-columns: 1fr; }
    .infoList dt { padding-bottom: 0; border-bottom: none; }
}

.serverStats .statValue {
    font-size: 20px;
}

/* ---- プレイヤー検索のページ ---- */

.searchForm {
    display: flex;
    gap: 8px;
}

.searchInput {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #d3ecf8;
    border-radius: 10px;
    background: #f4fbff;
    font: inherit;
    font-size: 16px;              /* 16px 未満だとスマホで自動で拡大されてしまう */
    color: #1f2d3a;
}

.searchInput:focus {
    outline: 2px solid #3bb4e5;
    outline-offset: -1px;
}

.searchButton {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: #3bb4e5;
    color: white;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

.searchButton:hover {
    background: #2a9fd6;
}

.searchMessage {
    margin: 12px 0 0;
    color: #e5484d;
    font-weight: bold;
}

/* 名前の候補 */
.searchSuggestions {
    list-style: none;
    margin: 8px 0 0;
    padding: 4px;
    border: 1px solid #d3ecf8;
    border-radius: 12px;
    background: white;
    box-shadow: 0 6px 18px rgba(59, 180, 229, 0.15);
}

.suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.suggestion:hover,
.suggestion.active {
    background: #e3f4fc;
}

.suggestionHead {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    image-rendering: pixelated;
    background: #e3f4fc;          /* 顔の画像が出るまでの色 */
    box-shadow: 0 0 0 1px rgba(31, 45, 58, 0.3);  /* 白い顔でも背景と見分けられるふち */
}

.suggestionName {
    flex: 1;
    min-width: 0;
    font-family: "Minecraft", sans-serif;
    font-size: 15px;
    overflow-wrap: anywhere;
}

/* Java 版 / 統合版 */
.editionBadge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.editionBadge.java {
    background: #e3f4fc;
    color: #2a9fd6;
}

.editionBadge.bedrock {
    background: #eef0f2;
    color: #6b7a86;
}

/* プロフィール */
.profile {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profileSkin {
    width: 120px;
    height: auto;
    flex-shrink: 0;
}

/* スキンの立体画像: 形に沿った薄い輪郭線と影で、白いスキンでも背景から浮かせる */
.profileSkin,
.podiumModel {
    filter: drop-shadow(0 0 1px rgba(31, 45, 58, 0.6)) drop-shadow(0 4px 6px rgba(31, 45, 58, 0.2));
}

.profileInfo {
    flex: 1;
    min-width: 0;
}

.profileNameRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.profileName {
    margin: 0;
    font-family: "Minecraft", sans-serif;
    font-size: 28px;
    color: #1f2d3a;
    overflow-wrap: anywhere;
}

/* ランク: ゲームのネームタグのように、暗い背景に色付きの文字 */
.rankBadge {
    padding: 4px 10px;
    border-radius: 6px;
    background: #2b2b33;
    font-family: "Minecraft", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 2px 2px 0 #3f3f3f;
}

.profileStats,
.modeSummary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}

.modeSummary {
    margin-bottom: 16px;
}

.statTile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid #d3ecf8;
    border-radius: 12px;
    background: #f4fbff;
}

.statLabel {
    font-size: 12px;
    font-weight: bold;
    color: #9aa8b4;
}

.statValue {
    font-size: 22px;
    font-weight: bold;
    color: #2a9fd6;
    font-variant-numeric: tabular-nums;
}

/* 数字の下の小さい補足(コインの順位) */
.statSub {
    display: block;
    font-size: 12px;
    color: #9aa8b4;
}

.profileNote {
    margin: 10px 0 0;
    font-size: 12px;
    color: #9aa8b4;
}

@media (max-width: 500px) {
    .profile { flex-direction: column; text-align: center; }
    .profileNameRow { justify-content: center; }
}

/* レーダーチャート */
.radarBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.radarChart {
    flex: 1 1 280px;
    max-width: 380px;
    margin: 0 auto;
    overflow: visible;
}

.radarGrid {
    fill: none;
    stroke: #d3ecf8;
    stroke-width: 1;
}

.radarAxis {
    stroke: #d3ecf8;
    stroke-width: 1;
}

.radarArea {
    fill: rgba(59, 180, 229, 0.3);
    stroke: #3bb4e5;
    stroke-width: 2;
    stroke-linejoin: round;
}

.radarDot {
    fill: #2a9fd6;
}

.radarLabel {
    font-size: 13px;
    font-weight: bold;
    fill: #1f2d3a;
}

.radarValue {
    font-size: 12px;
    font-weight: bold;
    fill: #2a9fd6;
}

.radarValue.empty {
    fill: #9aa8b4;
}

.radarList {
    flex: 1 1 220px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.radarList li {
    display: grid;
    grid-template-columns: 5.5em 6em 1fr;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #e6f4fb;
}

.radarListName {
    font-weight: bold;
}

.radarListValue {
    font-weight: bold;
    color: #2a9fd6;
    font-variant-numeric: tabular-nums;
}

.radarListDetail {
    font-size: 12px;
    color: #9aa8b4;
}

/* キットごとの戦績 */
.kitStatsTable {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.kitStatsTable th {
    padding: 8px;
    border-bottom: 2px solid #d3ecf8;
    font-size: 12px;
    color: #9aa8b4;
    text-align: right;
}

.kitStatsTable td {
    padding: 8px;
    border-bottom: 1px solid #e6f4fb;
    text-align: right;
    font-weight: bold;
}

.kitStatsTable th:first-child,
.kitStatsTable td:first-child {
    text-align: left;
}

/* キットの行は押せる(そのキットの詳細へ) */
.kitRow {
    cursor: pointer;
}

.kitRow:hover,
.kitRow:focus-visible {
    background: #f4fbff;
    outline: none;
}

.kitRow:hover .kitLabel,
.kitRow:focus-visible .kitLabel {
    color: #2a9fd6;
}

/* キットの詳細 */
.kitDetail {
    scroll-margin-top: 80px;      /* 飛んだ先が上に残るヘッダーに隠れないように */
    border: 2px solid #9fd8f1;
}

.kitDetailHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.kitDetailTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.kitDetailTitle .kitLabel .mcItem {
    width: 32px;
    height: 32px;
}

.kitDetailClose {
    padding: 6px 14px;
    border: 1px solid #d3ecf8;
    border-radius: 8px;
    background: white;
    color: #5b6b78;
    font: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.kitDetailClose:hover {
    background: #f4fbff;
}

.kitMeleeStats {
    margin-top: 8px;
}

.kitRadarToggle {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #3bb4e5;
    color: white;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

.kitRadarToggle:hover {
    background: #2a9fd6;
}

.kitRadarBox {
    margin-top: 16px;
}

.subTitle {
    margin: 24px 0 0;
    font-size: 16px;
    color: #2a9fd6;
}

.kitLabel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
}

.kitLabel .mcItem {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.emptyCell {
    padding: 12px;
    color: #9aa8b4;
    text-align: center !important;
    list-style: none;
}

/* 最近の試合 */
.matchList {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.matchRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    border-left: 4px solid #9aa8b4;
    background: #f4fbff;
}

.matchRow.win  { border-left-color: #22b35e; }
.matchRow.lose { border-left-color: #e5484d; }

.matchResult {
    width: 48px;
    font-weight: bold;
    font-size: 13px;
    color: #9aa8b4;
}

.matchRow.win .matchResult  { color: #22b35e; }
.matchRow.lose .matchResult { color: #e5484d; }

.matchScore {
    width: 48px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.matchInfo {
    flex: 1;
    min-width: 0;
}

.matchTop {
    display: flex;
    align-items: center;
    gap: 8px;
}

.matchMode {
    padding: 1px 8px;
    border-radius: 6px;
    background: #e3f4fc;
    color: #2a9fd6;
    font-size: 12px;
    font-weight: bold;
}

.matchVs {
    margin-top: 2px;
    font-size: 13px;
    color: #5b6b78;
    overflow-wrap: anywhere;
}

.matchTime {
    font-size: 12px;
    color: #9aa8b4;
    white-space: nowrap;
}

/* ---- ランキングページ上の、各ランキングへのアイコン ---- */

html {
    scroll-behavior: smooth;      /* アイコンを押した時にスーッと移動する */
}

.rankingCard {
    scroll-margin-top: 128px;     /* 飛んだ先が上に残るヘッダーと小さいアイコンに隠れないように */
}

.rankingNav {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.rankingNavItem {
    flex: 1;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border: 1px solid #d3ecf8;
    border-radius: 14px;
    background: #f4fbff;
    color: #2a9fd6;
    font-family: "Minecraft", sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s, background 0.15s;
}

.rankingNavItem:hover {
    background: #e3f4fc;
    transform: translateY(-3px);
}

.rankingNavItem img {
    width: 56px;
    height: 56px;
    image-rendering: pixelated;   /* 16x16 のドット絵をぼかさずに拡大する */
}

/* 上のアイコンが見えない時に、画面の上に出る小さいアイコン */
.rankingNavMini {
    position: fixed;
    top: 72px;                    /* 上に残るヘッダーの帯のすぐ下 */
    left: 50%;
    z-index: 5;                   /* メニューを開いた時は暗い幕の後ろに隠れる */
    display: flex;
    gap: 4px;
    padding: 4px;
    background: white;
    border: 1px solid #d3ecf8;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(59, 180, 229, 0.15);
    transform: translate(-50%, -80px);   /* 普段は画面の上の外に隠しておく */
    transition: transform 0.25s ease;
}

.rankingNavMini.visible {
    transform: translate(-50%, 0);
}

.rankingNavMini a {
    display: flex;
    padding: 6px 10px;
    border-radius: 8px;
}

.rankingNavMini a:hover {
    background: #e3f4fc;
}

.rankingNavMini img {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}

@media (max-width: 500px) {
    .rankingNav { gap: 8px; }
    .rankingNavItem { font-size: 12px; padding: 12px 4px; }
    .rankingNavItem img { width: 40px; height: 40px; }
}

/* ---- キルランキング ---- */

.rankingHeader {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.rankingTitle {
    margin: 0;
    color: #2a9fd6;
}

.rankingUpdated {
    font-size: 13px;
    color: #9aa8b4;
}

/* 総合 / Duel / FFA / Party のタブ */
.rankingTabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    background: #e3f4fc;
    border-radius: 12px;
}

.rankingTab {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #2a9fd6;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.rankingTab:hover {
    background: #d3ecf8;
}

.rankingTab.active {
    background: #3bb4e5;
    color: white;
}

/* トップ3の台 */
.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;        /* 下をそろえて、1位だけ背を高くする */
    gap: 16px;
    margin-bottom: 16px;
}

.podiumCard {
    --accent: #3bb4e5;
    flex: 1;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(#ffffff, #ebf7ff);
    border: 2px solid var(--accent);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(59, 180, 229, 0.18);
}

.place1 { --accent: #f5b800; }    /* 金 */
.place2 { --accent: #8c9aa7; }    /* 銀 */
.place3 { --accent: #d08a4a; }    /* 銅 */

.podiumEmpty {
    visibility: hidden;
}

.podiumName {
    margin-top: 14px;
    font-family: "Minecraft", sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 18px;
    color: var(--accent);
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podiumModel {
    height: 160px;
    margin: 12px 0 -8px;          /* 足元を台に少し重ねる */
    position: relative;
    z-index: 1;
}

.place1 .podiumModel {
    height: 200px;
}

.podiumBase {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    background: linear-gradient(color-mix(in srgb, var(--accent) 35%, rgb(255, 255, 255)), color-mix(in srgb, var(--accent) 10%, white));
}

.podiumRank {
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.place1 .podiumRank {
    font-size: 64px;
}

.podiumKills {
    margin-top: 4px;
    font-weight: bold;
    color: #1f2d3a;
}

@media (max-width: 500px) {
    .podium { gap: 8px; }
    .podiumName { font-size: 13px; }
    .podiumModel { height: 110px; }
    .place1 .podiumModel { height: 140px; }
}

.ranking {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ranking li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 8px;
    border-bottom: 1px solid #e6f4fb;
}

.ranking li:last-child {
    border-bottom: none;
}

.ranking li:hover {
    background: #f4fbff;
}

.rank {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background: #e3f4fc;
    color: #2a9fd6;
    font-weight: bold;
}

/* 1〜3位は濃い水色で目立たせる */
.ranking li:nth-child(-n+3) .rank {
    background: #3bb4e5;
    color: white;
}

/* 台はプレイヤーの詳細へのリンク */
a.podiumCard {
    text-decoration: none;
    transition: transform 0.15s;
}

a.podiumCard:hover {
    transform: translateY(-4px);
}

.playerName {
    color: inherit;
    text-decoration: none;
}

a.playerName:hover {
    color: #2a9fd6;
    text-decoration: underline;
}

.playerName {
    flex: 1;
    font-family: "Minecraft", sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.kills {
    color: #2a9fd6;
    font-weight: bold;
}

.rankingEmpty {
    color: #9aa8b4;
}