englishPk/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;
        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;
        --primary: 221.2 83.2% 53.3%;
        --primary-foreground: 210 40% 98%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 221.2 83.2% 53.3%;
        --radius: 0.5rem;
    }

    * {
        @apply border-border;
        margin: 0;
        padding: 0;
    }

    html,
    body {
        min-height: 100%;

    }

    body {
        @apply bg-background text-foreground antialiased;
    }
}



@layer utilities {
    .pk-start-stage,
    .pk-end-stage,
    .pk-game-stage {
        overflow-x: hidden;
    }

    .pk-game-stage {
        display: grid;
        place-items: center;
    }

    .pk-game-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .cursor-hammer {
        --hammer-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-36 16 16)'%3E%3Crect x='14' y='9' width='4' height='20' rx='2' fill='%23815a2f'/%3E%3Crect x='13' y='8' width='6' height='3' rx='1.5' fill='%236b4220'/%3E%3Cpath d='M8 5h14c1.7 0 3 1.3 3 3v4c0 1.7-1.3 3-3 3H8c-1.7 0-3-1.3-3-3V8c0-1.7 1.3-3 3-3Z' fill='%23f2b84b'/%3E%3Cpath d='M8 5h5v10H8c-1.7 0-3-1.3-3-3V8c0-1.7 1.3-3 3-3Z' fill='%23d78a2a'/%3E%3Cpath d='M19 5h3c1.7 0 3 1.3 3 3v4c0 1.7-1.3 3-3 3h-3V5Z' fill='%23999'/%3E%3Cpath d='M19 5h3c1.7 0 3 1.3 3 3v1h-6V5Z' fill='%23c9c9c9'/%3E%3C/g%3E%3C/svg%3E") 10 26, auto;
        cursor: var(--hammer-cursor);
    }

    .cursor-hammer * {
        cursor: var(--hammer-cursor) !important;
    }

    .text-balance {
        text-wrap: balance;
    }

    @media (max-height: 820px) and (min-width: 768px) {
        .pk-start-stage,
        .pk-end-stage {
            padding-block: 0.75rem !important;
        }

        .pk-start-card,
        .pk-end-card {
            border-radius: 1.25rem !important;
            padding: clamp(14px, 2.25vw, 28px) !important;
        }

        .pk-start-visual {
            font-size: clamp(46px, 11vh, 78px) !important;
            margin-bottom: 0.25rem !important;
        }

        .pk-start-title {
            font-size: clamp(26px, 5.2vh, 38px) !important;
        }

        .pk-start-subtitle {
            font-size: clamp(14px, 2.3vh, 17px) !important;
            margin-top: 0.375rem !important;
        }

        .pk-start-panel {
            gap: 0.65rem !important;
            margin-top: 1rem !important;
            padding: 0.85rem !important;
        }

        .pk-start-choice {
            font-size: 0.95rem !important;
            padding-block: 0.55rem !important;
        }

        .pk-start-summary {
            font-size: 0.8rem !important;
            padding-block: 0.45rem !important;
        }

        .pk-start-warning {
            margin-top: 0.65rem !important;
        }

        .pk-start-button {
            font-size: 1.05rem !important;
            margin-top: 1rem !important;
            padding: 0.65rem 2rem !important;
        }

        .pk-end-visual {
            font-size: clamp(54px, 11vh, 86px) !important;
            margin-bottom: 0.5rem !important;
        }

        .pk-end-title {
            font-size: clamp(28px, 5.2vh, 42px) !important;
        }

        .pk-end-result {
            font-size: clamp(24px, 4.8vh, 36px) !important;
            margin-top: 0.5rem !important;
        }

        .pk-end-score-grid {
            margin-top: 1rem !important;
        }

        .pk-end-score-card {
            padding: 1rem !important;
        }

        .pk-end-score {
            font-size: 2rem !important;
        }

        .pk-end-button {
            margin-top: 1rem !important;
            padding: 0.75rem 2rem !important;
        }

        .pk-game-stage {
            padding-block: 0.5rem !important;
        }

        .pk-game-card {
            border-radius: 1.25rem !important;
            min-height: calc(100svh - 56px - 1rem) !important;
            padding: clamp(10px, 1.6vw, 18px) !important;
        }

        .pk-game-header {
            margin-bottom: 0.5rem !important;
        }

        .pk-game-title {
            font-size: clamp(24px, 4.2vh, 30px) !important;
        }

        .pk-game-meta {
            font-size: 0.8rem !important;
            margin-top: 0.15rem !important;
        }

        .pk-game-grid {
            gap: clamp(10px, 1.6vw, 18px) !important;
        }

        .pk-team-card {
            border-width: 3px !important;
            padding: 0.5rem !important;
        }

        .pk-team-label {
            font-size: clamp(14px, 2.4vh, 18px) !important;
        }

        .pk-team-score {
            font-size: clamp(26px, 5vh, 40px) !important;
        }

        .pk-current-turn {
            font-size: clamp(16px, 2.8vh, 20px) !important;
            margin-top: 0.55rem !important;
            padding-block: 0.45rem !important;
        }

        .pk-listen-area {
            padding-block: clamp(8px, 2vh, 18px) !important;
        }

        .pk-speak-button {
            height: clamp(50px, 8vh, 62px) !important;
            margin-top: 0.4rem !important;
            width: clamp(50px, 8vh, 62px) !important;
        }

        .pk-word-text-hero {
            margin-top: 0.5rem !important;
            text-shadow: 2px 2px 0 #dbeafe !important;
        }

        .pk-word-text-hero.pk-word-size-large {
            font-size: clamp(38px, 7.4vh, 56px) !important;
        }

        .pk-word-text-hero.pk-word-size-medium {
            font-size: clamp(32px, 6.4vh, 48px) !important;
        }

        .pk-word-text-hero.pk-word-size-small {
            font-size: clamp(23px, 5vh, 34px) !important;
        }

        .pk-answer-grid {
            gap: 0.65rem !important;
        }

        .pk-option-button {
            border-radius: 1rem !important;
            min-height: clamp(82px, 13.5vh, 118px) !important;
            padding: 0.6rem !important;
        }

        .pk-word-image {
            height: clamp(40px, 7vh, 60px) !important;
            width: clamp(40px, 7vh, 60px) !important;
        }

        .pk-word-emoji {
            font-size: clamp(34px, 6.8vh, 54px) !important;
        }

        .pk-word-text-option {
            margin-top: 0.35rem !important;
        }

        .pk-word-text-option.pk-word-size-large {
            font-size: clamp(23px, 4.2vh, 32px) !important;
        }

        .pk-word-text-option.pk-word-size-medium {
            font-size: clamp(20px, 3.8vh, 28px) !important;
        }

        .pk-word-text-option.pk-word-size-small {
            font-size: clamp(17px, 3.3vh, 24px) !important;
        }

        .pk-answer-feedback {
            font-size: clamp(14px, 2.7vh, 18px) !important;
            gap: 0.5rem !important;
            padding: 0.65rem 1rem !important;
        }
    }

    @media (max-height: 700px) and (min-width: 768px) {
        .pk-start-stage,
        .pk-end-stage,
        .pk-game-stage {
            place-items: start center !important;
            padding-block: 0.5rem !important;
        }

        .pk-start-card,
        .pk-end-card,
        .pk-game-card {
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
            min-height: auto !important;
            padding: 0.75rem !important;
        }

        .pk-start-visual {
            font-size: clamp(38px, 9vh, 58px) !important;
        }

        .pk-start-title {
            font-size: clamp(24px, 5vh, 32px) !important;
        }

        .pk-start-subtitle {
            font-size: 0.9rem !important;
        }

        .pk-start-panel {
            gap: 0.5rem !important;
            margin-top: 0.75rem !important;
            padding: 0.65rem !important;
        }

        .pk-start-choice {
            padding-block: 0.45rem !important;
        }

        .pk-start-summary {
            font-size: 0.75rem !important;
        }

        .pk-start-button {
            margin-top: 0.75rem !important;
            padding: 0.55rem 1.75rem !important;
        }

        .pk-end-visual {
            font-size: clamp(42px, 9vh, 64px) !important;
        }

        .pk-end-result,
        .pk-end-score-grid,
        .pk-end-button {
            margin-top: 0.75rem !important;
        }

        .pk-game-title {
            font-size: clamp(22px, 4.8vh, 28px) !important;
        }

        .pk-current-turn {
            margin-top: 0.5rem !important;
            padding-block: 0.45rem !important;
        }

        .pk-listen-area {
            padding-block: 0.5rem !important;
        }

        .pk-option-button {
            min-height: clamp(78px, 14vh, 108px) !important;
        }
    }

    @media (max-height: 560px), (max-width: 767px) {
        .pk-start-stage,
        .pk-end-stage,
        .pk-game-stage {
            align-items: start !important;
            overflow-y: auto;
            padding-block: 0.75rem !important;
        }
    }
}