*,
*::before,
*::after {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;
}


body {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 32px 20px;

    background:
        linear-gradient(
            135deg,
            #eef2f5,
            #dfe5ea
        );

    color: #222;

    font-family:
        "Yu Gothic UI",
        "Meiryo",
        sans-serif;
}


button,
input {
    font: inherit;
}


/* =========================================================
   アプリ全体
========================================================= */

.app-container {
    display: flex;
    align-items: flex-start;

    gap: 34px;

    padding: 28px;

    border:
        1px solid
        #b7c0c7;

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.12);
}

/* =========================================================
   左側全体
========================================================= */

.left-column {
    width: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =========================================================
   左側ランキング
========================================================= */

.ranking-panel {
    width: 100%;
    min-height: 650px;

    padding: 18px;

    border:
        1px solid
        #aeb8bf;

    border-radius: 6px;

    background:
        #f8fafb;
}


.site-title {
    margin:
        0 0 28px;

    text-align: center;

    font-size: 28px;
    font-weight: 700;
}


.ranking-section h2 {
    margin:
        0 0 10px;

    text-align: center;

    font-size: 21px;
}


.ranking-status {
    min-height: 22px;

    margin-bottom: 8px;

    text-align: center;

    color: #666;

    font-size: 12px;
}


.ranking-list {
    margin: 0;

    padding-left: 36px;

    font-family:
        Consolas,
        "Yu Gothic UI",
        monospace;

    font-size: 14px;
}


.ranking-list li {
    min-height: 30px;

    padding-left: 3px;

    line-height: 30px;

    border-bottom:
        1px dotted
        #ccd2d7;
}


.ranking-entry {
    display: flex;

    justify-content: space-between;

    gap: 8px;
}


.ranking-score {
    font-weight: 700;
}


.ranking-user {
    overflow: hidden;

    max-width: 105px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.browser-info {
    margin-top: 30px;

    color: #6a6a6a;

    text-align: center;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   右側ゲーム
========================================================= */

.game-panel {
    width: 650px;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================================
   HUD
========================================================= */

.game-hud {
    width: 606px;
    height: 46px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    align-items: center;

    margin-bottom: 8px;

    padding:
        0 10px;

    border:
        1px solid
        #7f8c95;

    border-radius: 4px;

    background:
        #263238;

    color:
        #ffffff;

    font-family:
        Consolas,
        monospace;

    font-size: 14px;
}

.game-hud > div {
    text-align: center;
}


.hud-label {
    margin-right: 4px;

    color:
        #b0bec5;

    font-size: 11px;
}


/* =========================================================
   600 × 600 ゲームフィールド

   10 × 10
   1マス 60 × 60
========================================================= */

.game-board {
    position: relative;

    /*
        width / height をゲーム領域そのものの
        600pxにするためcontent-box。
    */
    box-sizing: content-box;

    width: 600px;
    height: 600px;

    overflow: hidden;

    border:
        3px solid
        #4b4b4b;

    background:
        #d6d2c5;

    box-shadow:
        inset 0 0 18px
        rgba(0, 0, 0, 0.25);
}


.board-grid {
    width: 600px;
    height: 600px;

    display: grid;

    grid-template-columns:
        repeat(10, 60px);

    grid-template-rows:
        repeat(10, 60px);
}


.cell {
    position: relative;

    width: 60px;
    height: 60px;
}


/* =========================================================
   床
========================================================= */

.cell.floor {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 50%,
            rgba(0, 0, 0, 0.025) 50%
        ),
        #cfcab9;
}


/* =========================================================
   壁
========================================================= */

.cell.wall {
    border:
        2px solid
        #41484d;

    background:

        linear-gradient(
            90deg,

            transparent 48%,

            rgba(0, 0, 0, 0.22) 49%,

            rgba(0, 0, 0, 0.22) 52%,

            transparent 53%
        ),

        linear-gradient(
            0deg,

            transparent 48%,

            rgba(255, 255, 255, 0.12) 49%,

            rgba(255, 255, 255, 0.12) 52%,

            transparent 53%
        ),

        #657078;


    box-shadow:

        inset 3px 3px 3px
        rgba(255, 255, 255, 0.18),

        inset -3px -3px 3px
        rgba(0, 0, 0, 0.24);
}


/* =========================================================
   箱の移動先 a～j
========================================================= */

.cell.target::before {
    content: "";

    position: absolute;

    left: 10px;
    top: 10px;

    z-index: 1;

    width: 40px;
    height: 40px;

    border:
        4px solid
        #a84a4a;

    border-radius: 7px;

    background:
        rgba(
            164,
            45,
            45,
            0.13
        );

    box-shadow:
        inset 0 0 0 3px
        rgba(
            255,
            255,
            255,
            0.18
        );

    transition:

        background
        160ms ease,

        border-color
        160ms ease,

        box-shadow
        160ms ease,

        transform
        160ms ease;
}


/* =========================================================
   現在操作中の箱の正しい移動先
========================================================= */

.cell.target.target-active::before {
    border-color:
        #ffc400;

    background:
        rgba(
            255,
            213,
            0,
            0.55
        );

    box-shadow:

        0 0 10px
        rgba(
            255,
            196,
            0,
            1
        ),

        0 0 20px
        rgba(
            255,
            196,
            0,
            0.7
        ),

        inset 0 0 0 3px
        rgba(
            255,
            255,
            255,
            0.65
        );

    transform:
        scale(1.08);
}


/* =========================================================
   駒共通

   60×60のマスに対して
   52×52で表示。
========================================================= */

.piece {
    position: absolute;

    left: 4px;
    top: 4px;

    z-index: 5;

    width: 52px;
    height: 52px;
}


/* =========================================================
   移動可能箱 A～J
========================================================= */

.box {
    border:
        4px solid
        #68401f;

    border-radius: 5px;

    background:

        linear-gradient(
            45deg,

            transparent 45%,

            rgba(
                92,
                47,
                15,
                0.85
            ) 46%,

            rgba(
                92,
                47,
                15,
                0.85
            ) 53%,

            transparent 54%
        ),

        linear-gradient(
            -45deg,

            transparent 45%,

            rgba(
                92,
                47,
                15,
                0.85
            ) 46%,

            rgba(
                92,
                47,
                15,
                0.85
            ) 53%,

            transparent 54%
        ),

        linear-gradient(
            #c98945,
            #a66029
        );


    box-shadow:

        inset 3px 3px 0
        rgba(
            255,
            255,
            255,
            0.25
        ),

        inset -3px -3px 0
        rgba(
            0,
            0,
            0,
            0.18
        );
}


/*
    箱A～Jの文字
*/

.box::after {
    content:
        attr(
            data-box-id
        );

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    color:
        #fff8e8;

    font-family:
        Consolas,
        monospace;

    font-size: 25px;
    font-weight: 900;

    text-shadow:
        2px 2px 2px
        rgba(
            0,
            0,
            0,
            0.75
        );
}


/* =========================================================
   現在操作している箱
========================================================= */

.box.box-active {
    outline:
        4px solid
        #ffc400;

    outline-offset:
        -2px;


    box-shadow:

        0 0 10px
        rgba(
            255,
            196,
            0,
            0.95
        ),

        0 0 18px
        rgba(
            255,
            196,
            0,
            0.55
        ),

        inset 3px 3px 0
        rgba(
            255,
            255,
            255,
            0.3
        ),

        inset -3px -3px 0
        rgba(
            0,
            0,
            0,
            0.18
        );
}


/* =========================================================
   移動不可箱 X
========================================================= */

.box.fixed {
    border-color:
        #5d1717;

    background:

        linear-gradient(
            45deg,

            transparent 45%,

            rgba(
                80,
                0,
                0,
                0.68
            ) 46%,

            rgba(
                80,
                0,
                0,
                0.68
            ) 53%,

            transparent 54%
        ),

        linear-gradient(
            -45deg,

            transparent 45%,

            rgba(
                80,
                0,
                0,
                0.68
            ) 46%,

            rgba(
                80,
                0,
                0,
                0.68
            ) 53%,

            transparent 54%
        ),

        linear-gradient(
            #bd4b43,
            #7d2424
        );
}


/* =========================================================
   移動不可箱では文字を表示しない
========================================================= */

.box.fixed::after {
    content: none;
}


/* =========================================================
   正しい移動先へ収納済み
========================================================= */

.box.completed {
    border-color:
        #7a1010;

    background:

        linear-gradient(
            45deg,

            transparent 45%,

            rgba(
                100,
                0,
                0,
                0.62
            ) 46%,

            rgba(
                100,
                0,
                0,
                0.62
            ) 53%,

            transparent 54%
        ),

        linear-gradient(
            -45deg,

            transparent 45%,

            rgba(
                100,
                0,
                0,
                0.62
            ) 46%,

            rgba(
                100,
                0,
                0,
                0.62
            ) 53%,

            transparent 54%
        ),

        linear-gradient(
            #ee6558,
            #b52323
        );


    box-shadow:

        0 0 8px
        rgba(
            255,
            0,
            0,
            0.55
        ),

        inset 3px 3px 0
        rgba(
            255,
            255,
            255,
            0.25
        ),

        inset -3px -3px 0
        rgba(
            0,
            0,
            0,
            0.18
        );
}


/* =========================================================
   プレイヤー
========================================================= */

.player {
    border:
        4px solid
        #123e78;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle at 50% 31%,

            #ffe0b2 0 20%,

            transparent 21%
        ),

        linear-gradient(
            #3d8bd9,
            #15599b
        );


    box-shadow:

        inset 2px 2px 3px
        rgba(
            255,
            255,
            255,
            0.35
        ),

        0 2px 3px
        rgba(
            0,
            0,
            0,
            0.35
        );
}


/*
    キャラクター方向
*/

.player-arrow {
    position: absolute;

    left: 14px;
    top: 13px;

    width: 0;
    height: 0;

    border-left:
        8px solid
        transparent;

    border-right:
        8px solid
        transparent;

    border-bottom:
        16px solid
        #ffffff;

    filter:
        drop-shadow(
            0 2px 1px
            rgba(
                0,
                0,
                0,
                0.45
            )
        );
}


.player.face-up .player-arrow {
    transform:
        rotate(0deg);
}


.player.face-right .player-arrow {
    transform:
        rotate(90deg);
}


.player.face-down .player-arrow {
    transform:
        rotate(180deg);
}


.player.face-left .player-arrow {
    transform:
        rotate(-90deg);
}


/* =========================================================
   オーバーレイ
========================================================= */

.game-overlay {
    position: absolute;

    inset: 0;

    z-index: 50;

    display: none;

    justify-content: center;

    align-items: center;

    padding: 30px;

    background:
        rgba(
            0,
            0,
            0,
            0.62
        );

    color:
        #ffffff;

    text-align: center;
}


.game-overlay.visible {
    display: flex;
}


.overlay-content,
.title-screen {
    width: 100%;
}


.overlay-title {
    margin:
        0 0 24px;

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

    text-shadow:
        3px 3px 4px
        rgba(
            0,
            0,
            0,
            0.8
        );
}


.overlay-message {
    margin:
        12px 0;

    font-size: 19px;
}


.overlay-score {
    margin:
        16px 0;

    font-size: 28px;
    font-weight: 700;
}


/* =========================================================
   タイトル
========================================================= */

.title-screen .overlay-title {
    margin-bottom: 34px;

    font-size: 46px;
}


.player-name-label {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 18px;
}


.player-name-input {
    width: 300px;
    height: 44px;

    padding:
        6px 10px;

    border:
        2px solid
        #d5d5d5;

    border-radius: 5px;

    outline: none;

    font-size: 18px;

    text-align: center;
}


.player-name-input:focus {
    border-color:
        #5ba7ef;
}


.validation-message {
    min-height: 23px;

    margin-top: 7px;

    color:
        #ffbbbb;

    font-size: 13px;
}


/* =========================================================
   ボタン
========================================================= */

.game-button {
    min-width: 120px;

    margin:
        10px 5px;

    padding:
        11px 18px;

    border:
        1px solid
        #185584;

    border-radius: 6px;

    background:
        linear-gradient(
            #4da5e8,
            #2274b2
        );

    color:
        #ffffff;

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

    cursor: pointer;
}


.game-button:hover:not(:disabled) {
    filter:
        brightness(1.08);
}


.game-button:disabled {
    cursor: default;

    opacity: 0.55;
}


.game-button.secondary {
    border-color:
        #666;

    background:
        linear-gradient(
            #999,
            #666
        );
}


/* =========================================================
   ステージ開始
========================================================= */

.stage-intro-overlay {
    background:
        rgba(
            0,
            0,
            0,
            0.34
        );
}


.stage-intro-text {
    font-size: 52px;
    font-weight: 700;

    text-shadow:
        3px 3px 4px
        rgba(
            0,
            0,
            0,
            0.8
        );

    transition:

        transform
        450ms ease-in,

        opacity
        450ms ease-in;
}


.stage-intro-text.slide-up {
    transform:
        translateY(-420px);

    opacity: 0;
}


.fade-target {
    transition:
        opacity
        450ms ease;
}


.fade-target.fade-out {
    opacity: 0;
}


/* =========================================================
   十字キー
========================================================= */

.control-area {
    width: 200px;
    height: 132px;

    display: grid;

    grid-template-columns:
        repeat(3, 62px);

    grid-template-rows:
        repeat(2, 62px);

    gap: 7px;

    margin-top: 16px;
}


.move-button {
    border:
        1px solid
        #7b8993;

    border-radius: 6px;

    background:
        linear-gradient(
            #ffffff,
            #dce3e8
        );

    color:
        #34434d;

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

    cursor: pointer;

    user-select: none;
}


.move-button:hover:not(:disabled) {
    background:
        linear-gradient(
            #f7fbff,
            #c8d9e5
        );
}


.move-button:active:not(:disabled) {
    transform:
        translateY(1px);
}


.move-button:disabled {
    cursor: default;

    opacity: 0.45;
}


.move-up {
    grid-column: 2;
    grid-row: 1;
}


.move-left {
    grid-column: 1;
    grid-row: 2;
}


.move-down {
    grid-column: 2;
    grid-row: 2;
}


.move-right {
    grid-column: 3;
    grid-row: 2;
}


/* =========================================================
   箱を引く表示
========================================================= */

.pull-indicator {
    margin-top: 8px;

    padding:
        7px 12px;

    border-radius: 4px;

    background:
        #edf0f2;

    color:
        #68747c;

    font-size: 13px;

    transition:

        background
        120ms,

        color
        120ms;
}


.pull-indicator.active {
    background:
        #ffe6a8;

    color:
        #8a5200;

    font-weight: 700;
}


.keyboard-help {
    margin-top: 7px;

    color:
        #777;

    font-size: 12px;
}


/* =========================================================
   レスポンシブ
========================================================= */

@media (max-width: 1020px) {

    .app-container {
        flex-direction: column;

        align-items: center;
    }


    .ranking-panel {
        width: 606px;

        min-height: auto;
    }


    .ranking-list {
        columns: 2;

        column-gap: 40px;
    }
}


@media (max-width: 680px) {

    body {
        min-width: 650px;

        justify-content: flex-start;
    }
}

/* =========================================================
   COMBO HUD
========================================================= */

#combo-display {
    display: inline-block;

    min-width: 44px;

    transition:
        color 150ms ease,
        transform 150ms ease,
        text-shadow 150ms ease;
}


#combo-display.combo-ready {
    color:
        #ffe082;

    font-size: 11px;

    font-weight: 700;

    text-shadow:
        0 0 5px
        rgba(255, 196, 0, 0.65);
}


#combo-display.combo-running {
    color:
        #ffca28;

    font-size: 17px;

    font-weight: 900;

    transform:
        scale(1.08);

    text-shadow:
        0 0 6px
        rgba(255, 196, 0, 0.9);
}


/* =========================================================
   コンボ演出

   ゲーム盤より上、
   ゲームオーバー等のoverlayより下。
========================================================= */

.combo-effect {
    position: absolute;

    left: 50%;
    top: 38%;

    z-index: 40;

    pointer-events: none;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.75);

    text-align: center;

    white-space: nowrap;
}


.combo-effect.show {
    animation:
        combo-pop
        850ms ease-out
        forwards;
}


.combo-effect-title {
    color:
        #ffd740;

    font-family:
        Consolas,
        "Yu Gothic UI",
        sans-serif;

    font-size: 42px;

    font-weight: 900;

    letter-spacing: 1px;

    text-shadow:
        0 3px 0 #6a4600,
        0 0 8px #ffffff,
        0 0 18px rgba(255, 196, 0, 0.95);
}


.combo-effect-point {
    margin-top: 3px;

    color:
        #ffffff;

    font-family:
        Consolas,
        monospace;

    font-size: 27px;

    font-weight: 900;

    text-shadow:
        2px 2px 3px
        rgba(0, 0, 0, 0.9);
}


/*
    ×4以上
*/

.combo-effect.high-combo
.combo-effect-title {
    color:
        #ff9800;

    font-size: 48px;

    text-shadow:
        0 3px 0 #7a2700,
        0 0 10px #fff3b0,
        0 0 22px rgba(255, 100, 0, 0.95);
}


/*
    ×8以上
*/

.combo-effect.super-combo
.combo-effect-title {
    color:
        #fff176;

    font-size: 54px;

    text-shadow:
        0 3px 0 #8a2d00,
        0 0 8px #ffffff,
        0 0 18px #ff9800,
        0 0 30px #ff5722;
}


@keyframes combo-pop {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.55);
    }

    18% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.18);
    }

    35% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    72% {
        opacity: 1;

        transform:
            translate(-50%, -62%)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -95%)
            scale(0.92);
    }
}


/* =========================================================
   ステージクリア画面のコンボ得点
========================================================= */

.overlay-combo-score {
    margin:
        8px 0 18px;

    color:
        #ffd740;

    font-size: 21px;

    font-weight: 700;

    text-shadow:
        1px 2px 2px
        rgba(0, 0, 0, 0.8);
}


/* =========================================================
   戻るボタン
========================================================= */

.back-button {
    width: 240px;
    height: 44px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 14px;

    border:
        1px solid
        #185584;

    border-radius: 6px;

    background:
        linear-gradient(
            #4da5e8,
            #2274b2
        );

    color: #ffffff;

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

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 2px 4px
        rgba(0, 0, 0, 0.18);

    transition:
        filter 150ms ease,
        transform 100ms ease;
}


.back-button:hover {
    filter:
        brightness(1.08);
}


.back-button:active {
    transform:
        translateY(1px);
}


/* =========================================================
   著作権表示
========================================================= */

#copyright {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    font-family: sans-serif;

    margin-top: 10px;
    text-align: center;
}