@media screen and (max-width: 767px) {
    html {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        --mobile-stage-scale: 0.66;
        min-width: 0;
        margin: 0;
        padding: 6px;
        overflow-x: hidden;
        overflow-y: auto;
        font-size: 18px;
    }

    #canvas {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    main {
        position: relative;
        z-index: 1;
    }

    main,
    .w3-auto,
    .frame,
    .grid {
        width: 100%;
        max-width: none;
    }

    .frame {
        position: static;
        top: auto;
        transform: none;
    }

    .grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
    }

    #tlsblock,
    #tllbelbow,
    #tlltelbow,
    .grid > .lb-corner-bck,
    .grid > .lt-corner-bck,
    .grid > .a4,
    .grid > .a5,
    .grid > .a10,
    .grid > .a11,
    .grid > .a12,
    .grid > .a13,
    .grid > .a14,
    .grid > .a15,
    .grid > .a16,
    .grid > .a17,
    .grid > .a18,
    .grid > .a19,
    .grid > .a21,
    .grid > .a22,
    .grid > .a23 {
        display: none !important;
    }

    .a7 {
        order: 1;
        width: 100%;
        margin: 0;
        padding: 8px 0 0;
    }

    .a7 .title,
    .a7 .bb-title {
        text-align: center;
    }

    .a7 > .title {
        font-size: 1.55em;
        line-height: 1.1;
    }

    .a7 > .bb-title {
        font-size: 0.9em;
        line-height: 1.25;
    }

    .btn-area {
        display: flex;
        flex-wrap: wrap;
        float: none;
        gap: 6px;
        width: 100%;
        margin-top: 8px;
    }

    .btn-area .btn {
        flex: 1 1 calc(50% - 3px);
        width: auto;
        min-width: 0;
        height: 48px;
        border-radius: 20px;
        padding: 9px 14px 0 8px;
        font-size: 0.9em;
        white-space: nowrap;
    }

    .a6 {
        order: 2;
        width: 100%;
        margin: 0;
    }

    .pic {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .bw_frame,
    .pic-frame {
        width: 100%;
        max-width: 549px;
        height: auto;
        min-height: 0;
        aspect-ratio: 549 / 298;
        margin: 0 auto;
        background-size: 100% 100%;
        overflow: hidden;
        position: relative;
    }

    .hangman-frame {
        padding-top: 0;
    }

    .intro-picture {
        width: min(210px, 62vw);
        max-width: 70%;
        margin-top: 32px;
    }

    .hangman-stage-scale {
        position: absolute;
        top: 20px;
        left: 50%;
        width: 360px;
        height: 275px;
        margin: 0;
        transform: translateX(-50%) scale(var(--mobile-stage-scale));
        transform-origin: top center;
    }

    .hangman-stage {
        top: 0;
        width: 360px;
        max-width: none;
        height: 275px;
        margin: 0;
    }

    .que.a8,
    body.game-active .que.a8 {
        order: 3;
        width: 100%;
        min-height: 76px;
        margin: 0;
        padding: 4px 0;
        font-size: 1.1em;
    }

    body.game-active .que.a8 {
        order: 2;
    }

    body.game-active .a6 {
        order: 3;
    }

    .welcome-title {
        display: block;
        flex: 0 0 100%;
        width: 100% !important;
        font-size: 1.15em;
        text-align: center !important;
        white-space: normal;
    }

    #wordDisplay[hidden] {
        display: none;
    }

    .word-display {
        width: 100%;
        max-width: none;
        min-height: 110px;
        gap: 7px;
        padding: 4px 0;
    }

    .word-row {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        gap: 3px 1px;
        padding: 0 2px;
    }

    .word-group {
        gap: 1px;
    }

    .letter-slot {
        width: clamp(20px, 6.2vw, 80px);
        min-width: clamp(20px, 6.2vw, 40px);
        max-width: clamp(20px, 6.2vw, 40px);
        height: 40px;
        border-bottom-width: 4px;
        font-size: 1.2em;
    }

    .space-slot {
        width: 9px;
        min-width: 9px;
    }

    #login_area,
    #settings_area,
    #ans_area,
    #help_area,
    #rang_area {
        order: 4;
        width: 100%;
        margin: 0;
    }

    #login_area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
    }

    #login_area > #input_name,
    #login_area > #input_secret {
        flex: 0 0 82px;
        text-align: right;
    }

    #login_area > div:empty {
        display: none;
    }

    #login_area > .login-input-wrap {
        flex: 1 1 calc(100% - 90px);
        min-width: 0;
    }

    .login-input-wrap {
        width: auto;
        min-width: 0;
    }

    #player_name,
    #player_secret {
        width: 80%;
        height: 50px;
        margin: 0;
        box-sizing: border-box;
    }

    #start_btn {
        width: 40%;
        height: 50px;
        margin: auto;
        margin-top: 4px;
        padding: 9px 14px 0 8px;
        font-size: 1em;
        white-space: nowrap;
    }

    #settings_area {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }

    #settings_area[hidden] {
        display: none !important;
    }

    #settings_area > div {
        display: flex !important;
        align-items: center;
        gap: 6px !important;
    }

    #settings_area .chunk {
        flex: 0 0 86px;
        width: auto;
        font-size: 0.9em;
    }

    #settings_area .l-btn,
    #settings_area .r-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 48px;
        padding-top: 9px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.85em;
    }

    #settings_area #close_settings_btn {
        flex: 0 0 calc((100% - 6px) / 2);
        width: calc((100% - 6px) / 2);
        height: 48px;
        margin-left: 90px;
        padding: 9px 14px 0 8px;
        font-size: 0.9em;
        text-align: right;
        white-space: nowrap;
    }

    .hangman-control-area {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .hangman-control-area::before {
        position: static;
        flex: 0 0 12px;
        width: 100%;
        height: 12px;
        margin-bottom: 5px;
    }

    body.game-active #ans_area {
        width: 100%;
        margin: 0;
    }

    .keyboard {
        display: flex !important;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 4px;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 4px 0;
    }

    .letter-btn,
    .keyboard-control {
        flex: 0 0 calc((100% - 24px) / 7);
        width: auto;
        min-width: 0;
        height: 46px;
        border-radius: 17px;
        padding: 0 7px 0 2px;
        font-size: 0.92em;
    }

    .layout-toggle-btn,
    .group-toggle-btn,
    .palette-toggle-btn {
        font-size: 0.58em;
        padding-right: 4px;
    }

    .keyboard-bottom-line {
        height: 12px;
        margin-top: 5px;
    }

    .keyboard-status-panel {
        min-height: 58px;
        padding: 5px 4px 0;
    }

    .status-message {
        min-height: 50px;
        padding: 0 0px 0 6px;
        font-size: 0.94em;
    }

    .game-over-btn {
        right: 3px;
        bottom: 4px;
        width: 110px;
        height: 44px;
        padding: 9px 9px 0 4px;
        font-size: 0.9em;
    }

    .a20 {
        order: 5;
        width: 100%;
        padding: 0 !important;
    }

    #stats {
        position: relative !important;
        top: 0;
        width: 100%;
        height: auto;
        min-height: 310px;
        margin: 0;
        border-top-width: 38px;
        border-left-width: 9px;
    }

    #stats > span {
        top: -32px !important;
        right: 8px;
        font-size: 1em;
    }

    #stats .stats-area {
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
        gap: 0;
        width: calc(100% - 5px);
        height: auto;
        min-height: 272px;
        margin-left: 5px;
        overflow: visible;
    }

    .stat-item {
        _display: flex;
        flex: 0 0 33.333%;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        min-height: 68px;
        padding: 4px 5px;
    }

    .stat-item .l-stat {
        font-size: 0.72em;
        white-space: nowrap;
    }

    .stat-item .r-stat {
        font-size: 1.05em;
        overflow-wrap: anywhere;
    }

    #help_grid,
    #rang_grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    #help_text,
    #rang_text {
        width: 100%;
        max-height: 55vh;
        overflow-y: auto !important;
        padding: 8px;
    }

    #help_grid > div:last-child,
    #rang_grid > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    #help_grid > div:last-child > br,
    #rang_grid > div:last-child > div[style] {
        display: none;
    }

    #l-elipse,
    #r-elipse {
        position: absolute;
        top: 0;
        z-index: 6;
        width: 18px;
        height: 9px;
    }

    #l-elipse {
        left: 17%;
        animation-name: mobileTopDown;
    }

    #r-elipse {
        right: 17%;
        left: auto;
        animation-name: mobileDownTop;
    }

    @keyframes mobileTopDown {
        0% { transform: translateY(18px); }
        25% { transform: translateY(62px); }
        50% { transform: translateY(112px); }
        75% { transform: translateY(82px); }
        100% { transform: translateY(168px); }
    }

    @keyframes mobileDownTop {
        0% { transform: translateY(168px); }
        25% { transform: translateY(132px); }
        50% { transform: translateY(88px); }
        75% { transform: translateY(48px); }
        100% { transform: translateY(18px); }
    }

    #help_grid .l-btn,
    #rang_grid .l-btn {
        flex: 1 1 calc(50% - 3px);
        width: auto;
        min-width: 0;
        height: 46px;
        margin-top: 0;
        padding-top: 8px;
        font-size: 0.85em;
    }

    #rang_text {
        overflow-x: auto !important;
    }

    #rang_list {
        min-width: 620px;
    }
}

@media screen and (max-width: 359px) {
    body {
        --mobile-stage-scale: 0.56;
        font-size: 16px;
    }

    .letter-btn,
    .keyboard-control {
        height: 42px;
        border-radius: 15px;
        font-size: 0.86em;
    }

    .stat-item {
        flex-basis: 50%;
    }

    #stats {
        min-height: 430px;
    }
}

@media screen and (min-width: 420px) and (max-width: 479px) {
    body {
        --mobile-stage-scale: 0.76;
    }
}

@media screen and (min-width: 480px) and (max-width: 559px) {
    body {
        --mobile-stage-scale: 0.87;
    }
}

@media screen and (min-width: 560px) and (max-width: 767px) {
    body {
        --mobile-stage-scale: 1;
    }
}