/* Buchstaben-Tornado — tablet-first, single-page, 3-phase */ :root { --bg: #f5f5f5; --surface: #ffffff; --border: #ddd; --border-strong: #888; --accent: #3740ff; --accent-soft: #e8eaff; --success: #2faa57; --warning: #d97706; --danger: #d23a3a; --text: #1a1a1a; --text-muted: #666; --box-size: clamp(70px, 9vw, 110px); /* medium default */ --tile-size: clamp(80px, 11vw, 130px); --radius: 12px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.12); --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.18); } /* Box size presets (applied via data-box-size on ) */ [data-box-size="small"] { --box-size: clamp(55px, 7vw, 85px); } [data-box-size="medium"] { --box-size: clamp(70px, 9vw, 110px); } [data-box-size="large"] { --box-size: clamp(90px, 13vw, 150px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } /* The HTML `hidden` attribute should always win over our display: flex/grid rules. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; overscroll-behavior: none; touch-action: manipulation; } body { min-height: 100vh; display: flex; flex-direction: column; align-items: stretch; user-select: none; -webkit-user-select: none; } .app-header { text-align: center; padding: 18px 16px 8px; } .app-header h1 { margin: 0 0 4px; font-size: 1.6rem; color: var(--accent); letter-spacing: 0.02em; } .subtitle { margin: 0; color: var(--text-muted); font-size: 1rem; } .phase-section { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 16px; gap: 18px; } /* ---------- WRITE phase ------------------------------------------------- */ #boxes-container { display: flex; flex-direction: column; align-items: center; gap: var(--gap, 8px); width: 100%; } .boxes-row-line { display: flex; flex-wrap: nowrap; gap: var(--gap, 8px); justify-content: center; } .btn-add-row { margin-top: 4px; align-self: center; } .letter-box { position: relative; width: var(--box-size); height: var(--box-size); background: var(--surface); border: 2px dashed var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color 0.15s, border-style 0.15s, box-shadow 0.15s; overflow: hidden; touch-action: none; /* let pointer events drive drawing */ } .letter-box.is-filled { border-style: solid; border-color: var(--accent); box-shadow: var(--shadow-md); } .letter-box canvas { width: 100%; height: 100%; display: block; cursor: crosshair; } .letter-box .box-clear { /* Kept below the 44px target on purpose: the button sits inside a drawing canvas (.letter-box has overflow:hidden, so the hit area can't extend past the box edge) and a full 44px corner zone would swallow too much of the smallest box preset's drawing surface, risking accidental erasure of a child's handwriting. 32px is the largest size that still leaves comfortable drawing room even in the "small" box preset (min 55px). */ position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); z-index: 2; } .letter-box.is-filled .box-clear { display: flex; } .letter-box .box-clear:hover { color: var(--danger); } .letter-box .box-index { position: absolute; bottom: 2px; left: 6px; font-size: 10px; color: var(--text-muted); pointer-events: none; } /* ---------- Buttons ----------------------------------------------------- */ .action-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .btn { appearance: none; border: none; border-radius: var(--radius); padding: 12px 22px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.08s, opacity 0.15s, background 0.15s; box-shadow: var(--shadow-sm); min-height: 48px; display: inline-flex; align-items: center; gap: 8px; } .btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover:not(:disabled) { background: #2c34d6; } .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--accent-soft); } .btn-tertiary { background: transparent; color: var(--text-muted); box-shadow: none; border: 1px dashed var(--border-strong); } .hint { margin: 0; color: var(--text-muted); font-size: 0.85rem; text-align: center; } /* ---------- TORNADO overlay -------------------------------------------- */ .tornado-overlay { position: fixed; inset: 0; background: rgba(245, 245, 245, 0.88); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(2px); } .tornado-spinner { font-size: 9rem; animation: tornado-spin 1.4s ease-in-out infinite; } @keyframes tornado-spin { 0% { transform: rotate(0deg) scale(0.7); } 50% { transform: rotate(540deg) scale(1.2); } 100% { transform: rotate(1080deg) scale(0.7); } } /* ---------- SOLVE phase ------------------------------------------------- */ .solve-instructions { font-size: 1.05rem; color: var(--text); text-align: center; } .solve-row-label { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 8px; } .tile-zone { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; min-height: calc(var(--tile-size) + 16px); padding: 8px; border-radius: var(--radius); width: 100%; max-width: 1100px; } .source-zone { background: rgba(55, 64, 255, 0.05); border: 2px dashed var(--border); } .target-zone { background: var(--surface); border: 2px solid var(--accent-soft); box-shadow: var(--shadow-sm); } .target-zone.drop-hover { border-color: var(--accent); background: var(--accent-soft); } .tile-slot { width: var(--tile-size); height: var(--tile-size); border-radius: var(--radius); border: 2px dashed var(--border); background: var(--bg); display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; } .tile-slot.drop-hover { border-color: var(--accent); background: var(--accent-soft); } .tile-slot.is-occupied { border-style: solid; border-color: transparent; background: transparent; } .tile { width: var(--tile-size); height: var(--tile-size); background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-md); cursor: grab; display: flex; align-items: center; justify-content: center; transition: transform 0.18s, box-shadow 0.18s; touch-action: none; } .tile img { width: 100%; height: 100%; pointer-events: none; display: block; border-radius: calc(var(--radius) - 4px); } .tile.is-dragging { position: fixed; z-index: 200; cursor: grabbing; box-shadow: var(--shadow-lg); transform: scale(1.06); pointer-events: none; } .feedback { text-align: center; font-size: 1.1rem; font-weight: 600; padding: 10px 20px; border-radius: var(--radius); min-width: 240px; } .feedback.is-success { background: rgba(47, 170, 87, 0.15); color: var(--success); } .feedback.is-partial { background: rgba(217, 119, 6, 0.15); color: var(--warning); } .target-zone.shake { animation: shake 0.45s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } /* ---------- Phase visibility ------------------------------------------- */ body.phase-write #write-section { display: flex; } body.phase-write #solve-section { display: none; } body.phase-solve #write-section { display: none; } body.phase-solve #solve-section { display: flex; } /* ---------- Size selector buttons --------------------------------------- */ .size-btns { display: flex; gap: 8px; justify-content: center; margin-bottom: 4px; } .size-btns button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 12px; font-weight: bold; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 0.9rem; } .size-btns button.active { background: var(--accent); color: white; border-color: var(--accent); } /* ---------- SW update toast --------------------------------------------- */ .sw-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--accent, #3740ff); color: white; padding: 12px 20px; border-radius: 8px; z-index: 9999; display: flex; gap: 12px; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .sw-toast button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: white; color: var(--accent, #3740ff); border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; } /* ---------- Space slots (word separator) -------------------------------- */ .target-slot.space-slot { background: rgba(128, 128, 128, 0.12); border: 2px dashed rgba(128, 128, 128, 0.5); border-radius: 10px; pointer-events: none; min-width: var(--tile-size); min-height: var(--tile-size); display: flex; align-items: center; justify-content: center; } .space-slot-label { font-size: 1.6rem; color: rgba(128, 128, 128, 0.55); user-select: none; line-height: 1; }