* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Arial, sans-serif; background: #fdf6ec; color: #333; -webkit-tap-highlight-color: transparent; }
#app { max-width: 640px; margin: 0 auto; padding: 16px 16px 40px; min-height: 100vh; display: flex; flex-direction: column; gap: 16px; }
h1 { font-size: 2rem; text-align: center; margin: 8px 0; }
h2 { font-size: 1.6rem; text-align: center; margin: 4px 0; }
p.hint { font-size: 1.2rem; text-align: center; margin: 0; color: #555; }
button { font: inherit; border: none; border-radius: 20px; cursor: pointer; }
.big { font-size: 1.6rem; padding: 22px; background: #ff9f43; color: #fff; box-shadow: 0 4px 0 #d9822b; width: 100%; }
.big:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9822b; }
.big.blue { background: #4dabf7; box-shadow: 0 4px 0 #2b8ad1; }
.big.green { background: #51cf66; box-shadow: 0 4px 0 #2f9e44; }
.big:disabled { background: #ccc; box-shadow: none; }
.small { font-size: 1.1rem; padding: 10px 16px; background: #eee; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.card { background: #fff; border-radius: 24px; padding: 20px; box-shadow: 0 2px 8px #0001; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.top { display: flex; justify-content: space-between; align-items: center; }
.steps { display: flex; gap: 6px; justify-content: center; }
.steps span { width: 40px; height: 8px; border-radius: 4px; background: #ddd; }
.steps span.on { background: #ff9f43; }
.week { display: flex; gap: 6px; justify-content: space-between; width: 100%; }
.day { flex: 1; text-align: center; background: #f4f4f4; border-radius: 12px; padding: 6px 0; font-size: .9rem; }
.day.today { outline: 2px solid #ff9f43; }
.day b { display: block; font-size: 1.4rem; min-height: 1.8rem; }
.check { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; padding: 14px; background: #f4f4f4; width: 100%; border-radius: 16px; }
.check.done { background: #d3f9d8; }
.ring { position: relative; width: 220px; height: 220px; }
.ring svg { transform: rotate(-90deg); }
.ring .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: bold; }
video { width: 100%; max-height: 45vh; object-fit: cover; border-radius: 20px; transform: scaleX(-1); background: #222; }
.ring.mini { width: 120px; height: 120px; }
.ring.mini .num { font-size: 2.2rem; }
.emoji { font-size: 7rem; line-height: 1; }
.word { font-size: 3.2rem; font-weight: bold; }
.word .sh { color: #e8590c; }
.count { font-size: 1.2rem; color: #666; }
.cheer { font-size: 2rem; text-align: center; color: #2f9e44; font-weight: bold; min-height: 2.4rem; }
.stars { font-size: 3rem; text-align: center; }
.mic { width: 170px; height: 170px; border-radius: 50%; font-size: 4.5rem; background: #ff6b6b; box-shadow: 0 6px 0 #c92a2a; color: #fff; transition: transform .08s; }
.mic:active { transform: translateY(4px); box-shadow: 0 2px 0 #c92a2a; }
.mic.rec { background: #fa5252; animation: pulse 1s infinite; }
.mic:disabled { background: #ccc; box-shadow: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px #fa525233; } }
.result { font-size: 2.2rem; font-weight: bold; text-align: center; min-height: 3rem; }
.result.ok { color: #2f9e44; } .result.no { color: #e8590c; } .result.unk { color: #868e96; }
.meta { font-size: .85rem; color: #aaa; }
.speaker { font-size: 3rem; background: none; padding: 0; }
.top h1 { margin: 0; font-size: 1.7rem; }
.title-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.title-row .speaker { font-size: 2rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px; font-size: 1.3rem; color: #fff; border-radius: 22px; }
.tile span { font-size: 3.2rem; line-height: 1; }
.tile small { font-size: .85rem; opacity: .8; }
.tile.orange { background: #ff9f43; box-shadow: 0 4px 0 #d9822b; }
.tile.green { background: #51cf66; box-shadow: 0 4px 0 #2f9e44; }
.tile.blue { background: #4dabf7; box-shadow: 0 4px 0 #2b8ad1; }
.tile.purple { background: #b197fc; box-shadow: 0 4px 0 #845ef7; }
.tile.light { background: #fff; color: #333; box-shadow: 0 3px 0 #ddd; border: 2px solid #eee; }
.tile:active { transform: translateY(3px); }
.big.purple { background: #b197fc; box-shadow: 0 4px 0 #845ef7; }
button.emoji { background: none; padding: 0; }
.small-word { font-size: 1.8rem; color: #555; cursor: pointer; }
.bounce { animation: bounce 1s infinite; }
@keyframes bounce { 50% { transform: scale(1.05); } }
.cam { position: relative; width: 100%; }
.cam video { display: block; }
.cam.nocam { min-height: 220px; display: flex; align-items: center; justify-content: center; background: #f4f4f4; border-radius: 20px; }
.ring.over { position: absolute; bottom: 10px; left: 10px; width: 120px; height: 120px; }
.cam.nocam .ring.over { position: static; width: 200px; height: 200px; }
.ring.over .num { font-size: 2.4rem; }
.odd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.odd { background: #f8f9fa; border: 3px solid #eee; padding: 10px 4px; font-size: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .1s; }
.odd span { font-size: 3rem; line-height: 1.1; }
.odd.right { border-color: #51cf66; background: #d3f9d8; transform: scale(1.08); }
.odd.group { border-color: #a5d8ff; opacity: .7; }
.odd.wrong { animation: shake .4s; border-color: #ff8787; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.odd-grid.hidden .odd { color: transparent; }
.odd-grid.hidden .odd span { visibility: hidden; }
.odd-grid.hidden .odd::after { content: '❓'; font-size: 2rem; color: #333; margin-top: -3.2rem; }
.big-count { font-size: 4rem; font-weight: bold; color: #845ef7; }
.plus { width: 100%; font-size: 3rem; padding: 26px; background: #b197fc; color: #fff; box-shadow: 0 5px 0 #845ef7; }
.plus:active { transform: translateY(4px); box-shadow: 0 1px 0 #845ef7; }
.num-input { display: block; margin: 8px auto; font-size: 1.6rem; width: 120px; text-align: center; border-radius: 12px; border: 2px solid #ddd; padding: 6px; }
table.log { width: 100%; border-collapse: collapse; font-size: .85rem; text-align: center; }
table.log td, table.log th { border-bottom: 1px solid #eee; padding: 6px 2px; }
.result .hint { font-size: 1.1rem; font-weight: normal; color: #555; }
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip { padding: 6px 14px; background: #f1f3f5; font-size: 1rem; }
.chip.on { background: #51cf66; color: #fff; }
.prof { display: flex; gap: 8px; align-items: center; width: 100%; padding: 6px; border-radius: 14px; }
.prof.on { background: #d3f9d8; }
.prof .pick { flex: 1; text-align: right; background: none; font-size: 1.2rem; }
.th-input { width: 70px; font-size: 1.1rem; text-align: center; border-radius: 10px; border: 2px solid #ddd; padding: 4px; }
.cal-row { display: flex; gap: 10px; align-items: center; font-size: 1.3rem; }
.cal-dot { min-width: 54px; text-align: center; padding: 6px; border-radius: 12px; background: #f1f3f5; color: #aaa; }
.cal-dot.done { background: #d3f9d8; color: #2f9e44; font-weight: bold; }
.version { text-align: center; }
.name-input { width: 200px; }
.num-input.wrong { border-color: #ff8787; }
.link-box { direction: ltr; font-size: .85rem; background: #f1f3f5; padding: 8px; border-radius: 10px; word-break: break-all; width: 100%; text-align: center; }
.tile.pink { background: #f783ac; box-shadow: 0 4px 0 #d6336c; }
.basket { width: 100%; min-height: 70px; border: 3px dashed #f783ac; border-radius: 20px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; padding: 6px; background: #fff0f6; }
.basket-label { font-size: 2.2rem; opacity: .35; }
.in-basket { font-size: 2.2rem; animation: pop .3s; }
@keyframes pop { from { transform: scale(0); } }
.sort-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.sort-card { background: #f8f9fa; border: 2px solid #eee; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; transition: transform .2s, opacity .3s; }
.sort-card span { font-size: 2.6rem; line-height: 1.1; }
.sort-card small { font-size: .75rem; color: #888; }
.sort-card.gone { opacity: 0; transform: translateY(-60px) scale(.3); pointer-events: none; }
.sort-card.wrong { animation: shake .4s; border-color: #ff8787; }
.chip.off { background: #f1f3f5; color: #aaa; text-decoration: line-through; }
.code-login summary { cursor: pointer; } .code-login[open] { gap: 10px; }