*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--color-primary:#3DB54A;--color-primary-light:#E8F5E9;--color-accent:#FFD100;--color-danger:#E8272A;--color-bg:#F5F5F3;--color-text:#1A1A1A;--color-text-secondary:#6B6B6B;--color-white:#FFFFFF;--font-heading:'Poppins',sans-serif;--font-body:'Inter',sans-serif;--radius-card:16px;--radius-btn:12px}
html,body{height:100%;background:var(--color-bg);font-family:var(--font-body);color:var(--color-text);-webkit-font-smoothing:antialiased;overflow:hidden;user-select:none;-webkit-user-select:none}
.app{max-width:430px;height:100%;margin:0 auto;position:relative;background:var(--color-bg);overflow:hidden}

.screen{display:none;height:100%;flex-direction:column}
.screen.active{display:flex}

.start{align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.start-icon{font-size:72px;margin-bottom:16px;animation:floatY 3s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.start-title{font-family:var(--font-heading);font-weight:800;font-size:24px;margin-bottom:6px}
.start-sub{font-size:14px;color:var(--color-text-secondary);margin-bottom:12px;line-height:1.5;max-width:320px}
.start-pts{font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--color-primary);margin-bottom:28px}
.btn{width:100%;max-width:320px;height:48px;border:none;border-radius:var(--radius-btn);background:var(--color-primary);color:var(--color-white);font-family:var(--font-heading);font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(61,181,74,0.35);-webkit-tap-highlight-color:transparent;transition:all 0.2s ease}
.btn:active{transform:scale(0.97)}
.link-back{margin-top:14px;font-size:14px;color:var(--color-text-secondary);cursor:pointer;background:none;border:none;font-family:var(--font-body);font-weight:500;-webkit-tap-highlight-color:transparent}

.game{padding:0;overflow:hidden}
.game-top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--color-white);border-bottom:1px solid rgba(0,0,0,0.06);flex-shrink:0}
.timer-wrap{flex:1}
.timer-bar{width:100%;height:6px;border-radius:3px;background:#E5E5E5;overflow:hidden}
.timer-fill{height:100%;border-radius:3px;background:var(--color-primary);transition:width 0.1s linear}
.timer-fill.low{background:var(--color-danger)}
.timer-text{font-size:11px;color:var(--color-text-secondary);margin-top:3px}
.score-display{font-family:var(--font-heading);font-weight:800;font-size:18px;color:var(--color-primary);flex-shrink:0;min-width:56px;text-align:right}

.wheel-deco{flex-shrink:0;display:flex;justify-content:center;padding:10px 16px 6px;background:linear-gradient(180deg,#FFF9E6 0%,var(--color-bg) 100%)}
.wheel-wrap{position:relative;width:80px;height:80px;flex-shrink:0;border-radius:50%;box-shadow:0 4px 16px rgba(0,0,0,0.14);border:3px solid var(--color-accent);overflow:hidden;animation:spinSlow 14s linear infinite}
.wheel-visual{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center}
@keyframes spinSlow{to{transform:rotate(360deg)}}

.board-area{flex:1;overflow-y:auto;padding:12px 16px 8px;-webkit-overflow-scrolling:touch}
.round-tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#BF8C00;margin-bottom:8px;text-align:center}
.hint-text{font-size:13px;color:var(--color-text-secondary);text-align:center;margin-bottom:12px;line-height:1.4}
.board-frame{border:3px solid var(--color-accent);border-radius:var(--radius-card);padding:16px 12px;background:linear-gradient(180deg,#FFFFFF 0%,#FFFCF0 100%);box-shadow:0 4px 20px rgba(255,209,0,0.2)}
.board-line{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:10px 16px;margin-bottom:8px}
.word{display:flex;gap:4px;flex-wrap:nowrap}
.tile{min-width:28px;height:36px;padding:0 4px;border-radius:8px;background:var(--color-white);border:2px solid #E0E0E0;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:800;font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.tile.space{min-width:8px;border:none;background:transparent;box-shadow:none}
.tile.hidden{color:transparent;position:relative}
.tile.hidden::after{content:'_';position:absolute;color:var(--color-text-secondary);font-weight:700}
.tile.reveal{animation:tilePop 0.35s ease;border-color:var(--color-primary);background:var(--color-primary-light)}
@keyframes tilePop{0%{transform:scale(0.85);opacity:0.5}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.tile.fixed{border-color:#BDBDBD;background:#F5F5F5;color:var(--color-text)}

.toast{position:fixed;left:50%;top:42%;transform:translateX(-50%);padding:10px 18px;border-radius:12px;font-family:var(--font-heading);font-weight:700;font-size:15px;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:20;white-space:nowrap}
.toast.show{opacity:1}
.toast.bad{background:#FDEAEA;color:#B71C1C}
.toast.good{background:#E8F5E9;color:#2E7D32}

.keyboard{padding:8px 10px 16px;background:var(--color-white);border-top:1px solid rgba(0,0,0,0.06);flex-shrink:0}
.kb-row{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-bottom:5px}
.kb-key{min-width:30px;height:38px;padding:0 5px;border:none;border-radius:8px;background:#EEEEEE;font-family:var(--font-heading);font-weight:700;font-size:13px;color:var(--color-text);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background 0.15s,transform 0.1s}
.kb-key:active:not(:disabled){transform:scale(0.94)}
.kb-key:disabled{opacity:0.35;cursor:default;background:#F5F5F5;color:#9E9E9E}

.results{align-items:center;justify-content:center;text-align:center;padding:40px 20px;overflow-y:auto}
.results-icon{font-size:72px;margin-bottom:12px;animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes popIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
.results-score{font-family:var(--font-heading);font-weight:800;font-size:48px;margin-bottom:4px}
.results-label{font-size:14px;color:var(--color-text-secondary);margin-bottom:6px}
.results-msg{font-family:var(--font-heading);font-weight:700;font-size:18px;margin-bottom:8px}
.results-breakdown{font-size:13px;color:var(--color-text-secondary);margin-bottom:28px;line-height:1.55;max-width:300px;text-align:left}
.results-breakdown strong{color:var(--color-text)}

@media(max-width:374px){.tile{min-width:24px;height:32px;font-size:13px}.kb-key{min-width:26px;height:34px;font-size:11px}}