/* ============================================================
   Meow Land の見た目
   ------------------------------------------------------------
   ゲームの絵はすべて canvas に描いている。
   このCSSがやっているのは
     ・画面のふちの色や余白
     ・canvas を画面幅に合わせて縮める（中の座標は変えない）
     ・タイトル画面など、canvas の上に重ねるUI
     ・スマホ用の操作ボタン
   の4つだけ。
   ============================================================ */

:root {
    /* アールグレイ（紅茶）をイメージした色を基本にする */
    --tea-dark:  #2b2138;   /* 背景の紫がかった濃色 */
    --tea-mid:   #4a3a5c;
    --cream:     #f5e9d4;   /* 最中・米粉のクリーム色 */
    --gold:      #f0c45a;   /* おこめポップ */
    --pink:      #e88ba0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 12px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 0%, var(--tea-mid), var(--tea-dark) 70%);
    color: var(--cream);
    font-family: 'Noto Sans JP', sans-serif;
    /* スマホでスクロールやダブルタップ拡大が起きないようにする */
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* ============================================================
   画面の組み立て
   ------------------------------------------------------------
   ★操作ボタンは canvas の上に重ねない（ゲームが見えなくなるため）。
     よこ向き … canvas の左右の余白にボタンを置く
     たて向き … canvas の下にボタンを置く
   並べ替えはこのグリッドが行う。
   --side-space / --vert-space は「canvas 以外に使う場所」の目安で、
   canvas の大きさを決める計算に使っている。
   ============================================================ */
:root {
    --side-space: 24px;   /* canvas の左右で使う場所 */
    --vert-space: 96px;   /* canvas の上下で使う場所（情報表示など） */
}

.play-area {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
        ".    info   ."
        "left canvas right"
        ".    hint   .";
    align-items: center;
    justify-items: center;
    gap: 6px 10px;
}

#canvas-wrapper { grid-area: canvas; }
.info-panel     { grid-area: info; width: 100%; }
.pad-left       { grid-area: left; }
.pad-right      { grid-area: right; }

/* ---------- 上部の情報表示 ---------- */
.info-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(9px, 2.2vw, 13px);
    letter-spacing: 0.05em;
}
#hearts { color: var(--pink); }
#coins  { color: var(--gold); }
#time   { color: var(--cream); opacity: 0.8; }

/* ---------- canvas ---------- */
/* 高さを先に決め、幅は 16:9 から自動で決まるようにしている。
   こうすると、まわりに何を置いても canvas がはみ出さない。 */
#canvas-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    width: auto;
    height: min(
        calc((100vw - var(--side-space)) * 9 / 16),
        calc(100vh - var(--vert-space)),
        540px
    );
    border: 3px solid rgba(245, 233, 212, 0.25);
    border-radius: 10px;
    overflow: hidden;
    background: #1a1424;
}

#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- canvas の上に重ねる画面（タイトル・クリアなど） ---------- */
#ui-layer {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 何も出していないときは、下の canvas を触れるようにしておく */
    pointer-events: none;
}
#ui-layer.active {
    pointer-events: auto;
    background: rgba(28, 20, 40, 0.82);
    backdrop-filter: blur(2px);
}

#main-view {
    text-align: center;
    padding: 16px;
    max-width: 90%;
}
#main-view h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(16px, 4.5vw, 30px);
    line-height: 1.5;
    margin: 0 0 6px;
    color: var(--cream);
    text-shadow: 3px 3px 0 var(--tea-mid);
}
#main-view .sub {
    font-size: clamp(11px, 2.6vw, 15px);
    opacity: 0.85;
    margin: 0 0 18px;
    line-height: 1.8;
}
#main-view .score-list {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(9px, 2.4vw, 13px);
    line-height: 2.2;
    margin: 0 auto 18px;
    display: inline-block;
    text-align: left;
}
#main-view .score-list .v { color: var(--gold); }

#main-view button {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(11px, 2.8vw, 15px);
    padding: 14px 26px;
    margin: 5px;
    color: var(--tea-dark);
    background: var(--cream);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 0 #b9a888;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}
#main-view button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #b9a888;
}
#main-view button.sub-btn {
    background: transparent;
    color: var(--cream);
    border: 2px solid rgba(245, 233, 212, 0.5);
    box-shadow: none;
}
#main-view a { color: var(--cream); }

/* ---------- ポーズボタン ---------- */
#pause-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    font-size: 13px;
    color: var(--cream);
    background: rgba(28, 20, 40, 0.55);
    border: 2px solid rgba(245, 233, 212, 0.4);
    border-radius: 8px;
    cursor: pointer;
}

/* ---------- よこ向きのおすすめ（PC・よこ向きでは出さない） ---------- */
#rotate-hint {
    display: none;
    grid-area: hint;
    margin: 4px 0 0;
    text-align: center;
    font-size: 12px;
    opacity: 0.65;
}

/* ============================================================
   スマホ用の操作ボタン
   ------------------------------------------------------------
   指で操作する端末（マウスが無く、指が太い＝pointer: coarse）のときだけ出す。
   出すかどうかをCSSだけで決めているので、JavaScript は何もしなくてよい。
   ============================================================ */
.pad { display: none; }
.pad button {
    width: 64px;
    height: 64px;
    margin: 5px;
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    color: var(--cream);
    background: rgba(74, 58, 92, 0.55);
    border: 2px solid rgba(245, 233, 212, 0.45);
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
.pad button:active { background: rgba(245, 233, 212, 0.35); }
.pad-right button {
    width: 84px;
    height: 84px;
    font-size: 11px;
}

@media (hover: none) and (pointer: coarse) {
    .pad { display: flex; }

    /* よこ向き：canvas の左右にボタンを縦に並べる。
       ボタンぶんの幅（約200px）を canvas の計算から引いておく。 */
    .pad { flex-direction: column; }
    :root { --side-space: 210px; }

    /* たて向き：canvas の下に、左右に分けて並べる。
       ボタンは画面のいちばん下に寄せる（真ん中にあると親指が届かないため）。 */
    @media (orientation: portrait) {
        .play-area {
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "info   info"
                "canvas canvas"
                "hint   hint"
                "left   right";
            /* 情報・canvas・ひとことを上にまとめ、ボタンだけ画面の下に落とす */
            grid-template-rows: auto auto auto 1fr;
            min-height: calc(100vh - 24px);
        }
        .pad { flex-direction: row; align-self: end; }
        .pad-left  { justify-self: start; }
        .pad-right { justify-self: end; }
        :root {
            --side-space: 24px;
            --vert-space: 220px;   /* 情報表示＋下のボタンぶん */
        }
        /* たて向きのときだけ「よこ向きにしてね」と出す */
        #rotate-hint { display: block; }
    }
}