/* ===========================================================
基本変数
=========================================================== */
:root{
    --bg:#0b1d33;

    /* デフォルトは PC 値（レスポンシブ・forceで上書き） */
    --W: 1360;
    --H: 768;

    --val-big:64px;
    --val:36px;
}

/* ===========================================================
通常レスポンシブ（?mode 無しでスマホ幅）
=========================================================== */
@media (max-width: 767px){
    :root{
        --W: 393;
        --H: 730;
        --val-big:36px;
        --val:24px;
    }
}

/* ===========================================================
force-pc：?mode=pc
=========================================================== */
:root.force-pc{
    --W:1360 !important;
    --H:768  !important;
    --val-big:64px !important;
    --val:36px     !important;
}

/* ===========================================================
force-sp：?mode=sp
=========================================================== */
:root.force-sp{
    --W:393 !important;
    --H:730 !important;
    --val-big:36px !important;
    --val:24px     !important;
}

/* ===========================================================
HTML / BODY
=========================================================== */
html,body{
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
    background:var(--bg);
    color:#eaf1f7;

    font-family:system-ui, -apple-system, "Segoe UI", Roboto,
                "Noto Sans JP", "Hiragino Kaku Gothic ProN",
                "Yu Gothic", Meiryo, sans-serif;
}

/* 風向・風速（Noto Sans JP） */
.font-noto {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 600;
}

/* 気温・湿度・気圧・水温・1分平均（LINE Seed JP） */
.font-seed {
    font-family: "LINE Seed JP", system-ui, sans-serif;
    font-weight: 600;
}

/*━━━━━━━━━━━━━━━━━━
PC（狭い表示＝埋め込みなど）
━━━━━━━━━━━━━━━━━━*/
@media (max-width:480px){
    :root.force-pc .font-noto { font-weight:400; }
    :root.force-pc .font-seed { font-weight:250; }
}

/* ===========================================================
viewport：全てのレイヤーの親
=========================================================== */
.viewport{
    position:fixed;
    inset:0;
    background:var(--bg);
    overflow:hidden;
}

/* ===========================================================
stage-bg（背景レイヤー）
→ fit.js により translate + scale が適用される
=========================================================== */
.stage-bg{
    position:fixed;
    top:0; left:0;
    width:calc(var(--W) * 1px);
    height:calc(var(--H) * 1px);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transform-origin:top left;
    will-change:transform;
    pointer-events:none;
}

/* ===========================================================
stage-ui（UIレイヤー）
→ fit.js により translate のみ
→ scaleしないため文字は一切ぼけない
=========================================================== */
.stage-ui{
    position:fixed;
    top:0; left:0;
    width:calc(var(--W) * 1px);
    height:calc(var(--H) * 1px);

    transform-origin:top left;
    will-change:transform;

    pointer-events:none; /* UIクリック不要のため */
}

/* ===========================================================
slot（共通）
=========================================================== */
.slot{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    line-height:1;
    overflow:hidden;

    color:#f4ff32;
    text-shadow:0 1px 2px rgba(0,0,0,.35);

    /* ぼやけ防止（最重要）*/
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}

/* 文字の大きさ（scale補正前の基準サイズ） */
.slot-big{ font-size:var(--val-big); }
.slot-small{ font-size:var(--val); }

/* ===========================================================
矢印（slot-arrow）
=========================================================== */
.slot-arrow{
    position:absolute;
    pointer-events:none;
    z-index:20;   /* slot より上 */
}

/* ===========================================================
overlay（通信エラー / メンテ表示）
=========================================================== */
#maintOverlay{
    position:fixed;
    inset:0;
    display:none;

    z-index:9999;

    background:rgba(0,0,0,.55);
    color:#fff;

    font-size:20px;
    font-weight:700;

    align-items:center;
    justify-content:center;
}