/* Compact typography and zeroed out margins for 268px iframe containers */
        body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
			background-color: #9BDEFF;
			color: #333;
			display: flex;
			flex-direction: column;
			align-items: center; /* Centers items horizontally in flex direction */
			padding: 5px;
			margin: 0 auto;       /* Centers the body itself if the iframe is wider */
			width: 100%;         /* Let it fill the iframe container naturally */
			max-width: 258px;    /* Keeps your target width constraint safe */
			box-sizing: border-box;
		}
        h1 {
            margin: 5px 0;
            font-size: 1.5rem;
        }
        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 100%;
        }
        .settings-panel {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: bold;
            font-size: 0.85rem;
            margin-bottom: 2px;
        }
        .settings-panel select {
            padding: 4px;
            font-size: 0.8rem;
            border-radius: 4px;
            border: 1px solid #aaa;
            background-color: #fff;
        }
        .grid-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .word-preview {
            width: 100%;
            background: #fff;
            border: 2px solid #C8CEC4;
            border-radius: 6px;
            min-height: 36px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            font-weight: bold;
            text-transform: uppercase;
            color: #2196F3;
            letter-spacing: 1px;
            box-sizing: border-box;
        }
        .word-preview:empty::before {
            content: "Select letters...";
            color: #aaa;
            font-size: 0.85rem;
            font-weight: normal;
        }
        .error-shake {
            animation: shake 0.4s ease;
            border-color: #e74c3c !important;
            color: #e74c3c !important;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-4px); }
            40%, 80% { transform: translateX(4px); }
        }
        .grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr); /* 5 columns for your 25 tiles */
			gap: 4px;                              /* Consistent cell spacing */
			width: 100%;                           /* Spans matching the container */
			justify-content: center;               /* Centers grid items inside the track */
			justify-items: center;                  /* Centers tiles inside their own cells */
			margin: 0 auto;                        /* Centers the grid container itself */
		}
        .tile {
            width: 46px;
            height: 46px;
            background-color: #fff;
            border: 1.5px solid #aaa;
            border-radius: 4px;
            font-size: 1.2rem;
            font-weight: bold;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
        }
        .tile.selected {
            background-color: #ffeb3b;
            border-color: #fbc02d;
        }
        .tile.paused {
            background-color: #bbb;
            color: #bbb;
            cursor: not-allowed;
            border-color: #999;
        }
        .controls {
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
        }
        .row-buttons {
            display: flex;
            gap: 6px;
            width: 100%;
        }
        button {
            flex: 1;
            padding: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
        }
        button.action-btn { background-color: #2196F3; }
        button.submit-btn { 
            background-color: #ff9800; 
            font-size: 1rem;
            padding: 10px;
        }
        .panel-side {
            background: white;
            padding: 10px;
            border-radius: 6px;
            width: 100%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            box-sizing: border-box;
            margin-top: 5px;
        }
        /* Removed max-height parameters so container stretches vertically */
        .word-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .word-list li {
            padding: 5px 4px;
            border-bottom: 1px solid #eee;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 0.9rem;
            display: flex;
            justify-content: space-between;
        }
        .status-checking { color: #f39c12; font-size: 0.75rem; }
        .status-invalid { color: #e74c3c; font-size: 0.75rem; animation: flash 0.3s ease 2; }
        @keyframes flash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        .instructions {
            margin-top: 15px;
            width: 100%;
            font-size: 0.75rem;
            line-height: 1.3;
            color: #444;
        }