:root {
    color-scheme: light;
    --accent: #3740ff;
    --accent-soft: #eef0ff;
    --text: #20213b;
    --muted: #6c6e83;
    --line: #dfe2ee;
    --surface: #fff;
    --radius: 16px;
    --write-cols: 3;
    --write-rows: 2;
    --board-cols: 4;
    --board-rows: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { color: var(--text); background: #f5f6fb; touch-action: pan-y; }
button, textarea { font: inherit; }
button { cursor: pointer; touch-action: none; }
button:disabled { opacity: .38; cursor: default; }
button:focus-visible, textarea:focus-visible { outline: 3px solid #ffb547; outline-offset: 3px; }
button { transition: background .15s, border-color .15s; }
button:active:not(:disabled) { filter: brightness(.95); }
#app {
    position: fixed;
    top: var(--viewport-top, 0px);
    left: 0;
    width: 100%;
    height: var(--app-height, 100dvh);
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}
.app-header { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); font-size: 34px; }
.brand-copy { min-width: 0; }
h1 { margin: 0; font-size: clamp(23px, 3.1vw, 32px); letter-spacing: -.035em; color: var(--accent); }
.brand-copy p { margin: 3px 0 0; font-size: 14px; color: var(--muted); }
.phase-badge { margin-left: auto; white-space: nowrap; font-size: 13px; font-weight: 650; padding: 9px 14px; color: var(--accent); border: 1px solid #d9ddff; border-radius: 999px; }
main { flex: 1; min-height: 0; width: 100%; max-width: 1180px; margin: 0 auto; }
.phase-section { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.mode-switch { align-self: center; display: flex; padding: 5px; border: 1px solid var(--line); background: #eaecf5; border-radius: 14px; gap: 4px; flex: 0 0 auto; }
.mode-switch button { background: transparent; color: var(--muted); border: 0; border-radius: 10px; min-height: 44px; padding: 8px 24px; font-size: 16px; font-weight: 650; }
.mode-switch button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 2px 6px #20213b10; }
.mode-switch span { margin-right: 6px; font-size: 21px; }
.input-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
h2 { font-size: 17px; margin: 0; font-weight: 650; }
.section-heading p { color: var(--muted); margin: 4px 0 0; font-size: 14px; }
.word-fields { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--write-cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--write-rows), minmax(0, 1fr)); gap: 12px; }
.word-field { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 2px dashed #cdd1e1; border-radius: 14px; background: #fcfcff; overflow: hidden; touch-action: none; }
.word-field.is-filled { border-color: #949bff; border-style: solid; background: #fff; }
.field-heading { display: flex; justify-content: space-between; align-items: center; flex: 0 0 34px; padding: 0 4px 0 12px; }
.field-heading span { color: #8a8ca1; font-size: 12px; font-weight: 600; }
.field-clear { width: 36px; height: 32px; border: none; color: var(--muted); background: transparent; font-size: 20px; }
.word-field canvas { display: block; width: 100%; flex: 1; min-height: 0; cursor: crosshair; touch-action: none; background-image: linear-gradient(to bottom, transparent calc(75% - 1px), #edf0f8 75%, transparent calc(75% + 1px)); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 9px; flex: 0 0 auto; }
.pagination button { border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 40px; background: #fff; color: var(--accent); font-size: 21px; }
.pagination span { min-width: 45px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.write-pagination { align-self: center; }
.write-pagination span { min-width: 120px; }
.keyboard-panel label { font-size: 18px; font-weight: 650; }
textarea { display: block; width: 100%; flex: 1; min-height: 60px; resize: none; border: 2px solid #d9ddf0; border-radius: 14px; padding: 18px; color: var(--text); background: #fcfcff; line-height: 1.55; font-size: clamp(22px, 3.4vw, 34px); -webkit-user-select: text; user-select: text; touch-action: pan-y; overscroll-behavior: contain; }
textarea::placeholder { color: #a7aabd; }
.input-note { margin: 0; font-size: 13px; color: var(--muted); }
.hint { margin: 0; min-height: 19px; text-align: center; color: var(--muted); font-size: 14px; }
.hint.is-warning { color: #a64e19; }
.action-row { display: flex; justify-content: center; align-items: center; gap: 10px; flex: 0 0 auto; }
.btn { min-height: 48px; padding: 10px 22px; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 12px; font-size: 16px; font-weight: 650; }
.btn:hover:not(:disabled) { border-color: #a7afff; background: #f6f7ff; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px #3740ff20; }
.btn-primary:hover:not(:disabled) { color: #fff; background: #2932df; }
.btn-primary span { margin-right: 6px; }
.btn-small { min-height: 42px; padding: 8px 14px; font-size: 14px; }
.solve-instruction { display: flex; align-items: center; justify-content: center; gap: 12px; flex: 0 0 auto; }
.solve-instruction p { margin: 0; font-size: 14px; color: var(--muted); }
.count-badge { padding: 5px 10px; background: var(--accent-soft); color: var(--accent); font-size: 12px; border-radius: 8px; white-space: nowrap; }
.board-layout { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.board-panel { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; }
.source-panel { border: 1px dashed #c9cfee; background: #eef0fa; }
.target-panel { border: 1px solid #dce0f5; background: #fff; }
.zone-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
.zone-heading h2 { font-size: 15px; }
.word-zone { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(var(--board-cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--board-rows), minmax(0, 1fr)); gap: 10px; border-radius: 10px; }
.word-tile, .slot-empty, .drag-ghost { width: 100%; height: 100%; min-height: 0; min-width: 0; padding: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid #858dff; border-radius: 12px; background: #fff; color: var(--text); font-size: clamp(22px, 3vw, 32px); font-weight: 600; cursor: grab; touch-action: none; box-shadow: 0 3px 8px #22254508; }
.word-tile span, .drag-ghost span { display: block; max-width: 100%; max-height: 100%; overflow-wrap: anywhere; line-height: 1.2; }
.word-tile img, .drag-ghost img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.word-tile.is-overflowing { position: relative; cursor: pointer; touch-action: pan-y; }
.word-tile.is-overflowing > span { overflow: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
.word-tile.is-overflowing::after { content: '↕'; position: absolute; right: 3px; top: 2px; font-size: 12px; color: var(--muted); background: #fff; pointer-events: none; }
.word-tile[aria-pressed="true"] { border-color: var(--accent); background: #e8ebff; box-shadow: 0 0 0 3px #3740ff26; }
.sentence-slot { position: relative; min-width: 0; min-height: 0; }
.sentence-slot::before { content: attr(data-slot-number); position: absolute; top: 3px; left: 6px; font-size: 10px; color: var(--muted); pointer-events: none; }
.slot-empty { border: 2px dashed #d8dcec; color: #b4b9cf; box-shadow: none; background: #fafbff; cursor: pointer; font-weight: 400; }
.drop-hover { background: #dde2ff; outline: 2px solid var(--accent); }
.is-lifted { opacity: .25; }
.drag-ghost { transform: rotate(-3deg) scale(1.04); box-shadow: 0 12px 32px #20213b30; }
.empty-pool { grid-column: 1 / -1; align-self: center; text-align: center; color: var(--muted); font-size: 14px; margin: 0; }
.feedback-area { min-height: 28px; display: flex; justify-content: center; align-items: center; flex: 0 0 auto; }
.feedback { margin: 0; color: #a45b1f; text-align: center; font-size: 15px; font-weight: 650; }
.feedback.is-success { color: #20844b; }
.text-button { min-height: 40px; border: 0; background: transparent; color: var(--muted); font-size: 14px; padding: 6px 14px; border-radius: 8px; }
.text-button:hover { background: #e9ecf7; color: var(--accent); }
.tornado-overlay { position: fixed; inset: 0; z-index: 500; background: #f5f6fbf5; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; backdrop-filter: blur(8px); text-align: center; padding: 24px; }
.tornado-cloud { display: grid; place-items: center; width: 200px; height: 200px; border-radius: 50%; background: #e6e9ff; }
.tornado-cloud span { font-size: 110px; animation: whirl 1.2s ease-in-out infinite; }
.tornado-overlay p { color: var(--accent); font-size: 23px; font-weight: 650; margin: 12px 0 0; }
.tornado-overlay small { color: var(--muted); font-size: 16px; }
@keyframes whirl { 0% { transform: rotate(-20deg) scale(.8); } 60% { transform: rotate(380deg) scale(1.15); } 100% { transform: rotate(700deg) scale(.8); } }
@media (max-width: 600px) {
    #app { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); gap: 12px; }
    .brand-mark { width: 42px; height: 42px; font-size: 27px; border-radius: 12px; }
    .brand-copy p { font-size: 11px; }
    .phase-badge { display: none; }
    .input-panel { padding: 12px; border-radius: 16px; }
    .section-heading h2 { font-size: 15px; }
    .section-heading p { font-size: 12px; }
    .mode-switch button { padding: 7px 18px; }
    .word-fields { gap: 8px; }
    .action-row { gap: 6px; }
    .btn { padding: 10px 14px; font-size: 14px; }
    .solve-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .board-panel { padding: 10px; }
    .solve-instruction p { font-size: 12px; }
    .zone-heading h2 { font-size: 14px; }
    .pagination { gap: 5px; }
    .pagination button { width: 40px; height: 36px; }
    .pagination span { min-width: 36px; }
}
@media (max-height: 550px) {
    #app { padding-top: 8px; padding-bottom: 8px; gap: 6px; }
    .app-header { gap: 8px; }
    .brand-mark { width: 34px; height: 34px; font-size: 24px; border-radius: 10px; }
    h1 { font-size: 23px; }
    .brand-copy p, .section-heading p, .input-note { display: none; }
    .phase-section { gap: 6px; }
    .mode-switch { padding: 3px; }
    .mode-switch button { min-height: 34px; padding: 3px 18px; font-size: 14px; }
    .input-panel { padding: 10px; gap: 6px; }
    .section-heading h2 { font-size: 14px; }
    .btn { min-height: 38px; padding: 7px 16px; font-size: 14px; }
    .btn-small { min-height: 32px; padding: 5px 12px; font-size: 13px; }
    .write-pagination button { height: 30px; }
    .hint { min-height: 16px; font-size: 12px; }
    .board-layout { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 10px; }
    .board-panel { padding: 8px; gap: 6px; }
    .pagination button { height: 32px; }
    .feedback-area { min-height: 20px; }
    .feedback { font-size: 13px; }
    .secondary-actions .text-button { min-height: 30px; padding: 2px 12px; }
    .solve-instruction p { font-size: 12px; }
    textarea { padding: 10px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (orientation: landscape) and (min-height: 551px) {
    .target-panel .pagination { display: none; }
}
.compact-keyboard .app-header,
.compact-keyboard .mode-switch,
.compact-keyboard .hint,
.compact-keyboard .keyboard-panel > label,
.compact-keyboard .input-note,
.compact-keyboard #btn-clear { display: none; }
.compact-keyboard textarea { min-height: 40px; }
.update-notice { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; background: #e7eaff; border-radius: 12px; padding: 8px 12px; font-size: 13px; color: var(--accent); }
.update-notice button { border: 1px solid #c3caff; border-radius: 8px; padding: 8px 12px; background: #fff; color: var(--accent); min-height: 40px; font-weight: 650; }