:root {
  --ink: #2b2d42; --muted: #7a7f9a; --card: #fff; --ok: #3dbe5a; --bad: #ff5d5d; --c: #ff9f1c;
  --r: 22px; --shadow: 0 6px 0 rgba(43,45,66,.07), 0 12px 28px rgba(43,45,66,.08);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Fredoka', ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  color: var(--ink); background: linear-gradient(165deg, #fff4df 0%, #fdf0ff 50%, #e3f4ff 100%) fixed;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; overscroll-behavior: none;
  font-size: 17px;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; padding: 0; }
button:disabled { opacity: .4; }
input { font: inherit; -webkit-user-select: text; user-select: text; }
#app { max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 100px); }
body.in-game #app { padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
h1 { font-size: 1.6rem; margin: 0; font-weight: 700; }
h2 { font-size: 1.05rem; margin: 22px 4px 10px; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); font-size: .9rem; }
.center { text-align: center; }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; }

/* Animasjoner */
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes flicker { 0%,100% { filter: drop-shadow(0 0 0 #ff9f1c); } 50% { filter: drop-shadow(0 0 8px #ff9f1c); } }
.pop { animation: pop .45s cubic-bezier(.2,.9,.3,1.3) both; }
.shake { animation: shake .45s; }

/* Topp */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.avatar-btn { display: flex; align-items: center; gap: 10px; text-align: left; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: var(--shadow); flex: none; }
.avatar-btn.small .avatar { width: 40px; height: 40px; font-size: 22px; }
.hello small { display: block; color: var(--muted); font-size: .85rem; }
.hello b { font-size: 1.25rem; }
.chips { display: flex; gap: 8px; }
.chip { background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; }
.chip.bump { animation: bump .35s; }
.chip.hot { background: linear-gradient(135deg, #ffd166, #ff7b00); color: #fff; animation: flicker 1.2s infinite; }
.chip.hot.bump { animation: bump .35s, flicker 1.2s infinite; }

/* Hjem */
.level-card { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; color: #fff; padding: 18px;
  border-radius: var(--r); background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000 12%));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 60%, #000 30%), 0 14px 30px rgba(0,0,0,.12); animation: rise .4s both; }
.level-card:active { transform: translateY(3px); }
.lc-icon { font-size: 44px; width: 64px; height: 64px; display: grid; place-items: center; background: rgba(255,255,255,.25); border-radius: 20px; flex: none; }
.lc-body { flex: 1; min-width: 0; }
.lc-body b { display: block; font-size: 1.3rem; margin: 2px 0 8px; }
.lc-body small { opacity: .92; font-size: .85rem; }
.lc-more { font-size: 2rem; opacity: .8; }
.bar { height: 12px; border-radius: 99px; background: #eceef5; overflow: hidden; margin: 6px 0; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); transition: width .4s; }
.bar.light { background: rgba(255,255,255,.3); }
.bar.light i { background: #fff; }
.goal-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: var(--r); padding: 14px 16px; margin-top: 14px; box-shadow: var(--shadow); animation: rise .4s .05s both; }
.ring { --p: 0; width: 72px; height: 72px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--ok) calc(var(--p) * 1%), #eceef5 0); }
.ring span { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; line-height: 1; }
.ring small { font-size: .7rem; color: var(--muted); font-weight: 500; }
.goal-text b { display: block; font-size: 1.05rem; }
.goal-text small { color: var(--muted); font-size: .85rem; }
.big-play { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 18px 0 14px; padding: 20px;
  font-size: 1.4rem; font-weight: 700; color: #fff; border-radius: 24px; background: linear-gradient(135deg, #ff9f1c, #ff5d8f);
  box-shadow: 0 7px 0 #c9406a, 0 16px 30px rgba(255,93,143,.35); transition: transform .08s; animation: rise .4s .1s both; }
.big-play span { font-size: 1.8rem; }
.big-play:active { transform: translateY(5px); box-shadow: 0 2px 0 #c9406a; }
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .modes { grid-template-columns: repeat(3, 1fr); } }
.mode { background: #fff; border-radius: var(--r); padding: 16px 12px; text-align: center; box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 35%, #fff), 0 10px 22px rgba(43,45,66,.07);
  border: 3px solid color-mix(in srgb, var(--c) 30%, #fff); animation: rise .4s calc(.15s + var(--d)) both; transition: transform .08s; }
.mode:active { transform: translateY(4px); }
.m-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 8px; font-size: 32px; border-radius: 18px; background: color-mix(in srgb, var(--c) 18%, #fff); }
.mode b { display: block; font-size: 1.05rem; }
.mode small { color: var(--muted); }

/* Navigasjon */
.nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px);
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -4px 20px rgba(43,45,66,.08); z-index: 5; }
.nav button { flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 16px; color: var(--muted); }
.nav button span { font-size: 24px; }
.nav button small { font-size: .78rem; font-weight: 600; }
.nav button.active { background: #fff2e0; color: var(--ink); }

/* Spill */
.screen.game { min-height: calc(100vh - 40px); min-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
.gamebar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.x { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); font-size: 1.2rem; color: var(--muted); flex: none; }
.gamebar .bar { flex: 1; height: 16px; margin: 0; background: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,.06); }
.gamebar .bar i { background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff)); }
#stage { flex: 1; display: flex; flex-direction: column; }
.prompt { text-align: center; color: var(--muted); font-size: 1.05rem; margin-bottom: 14px; }
.prompt b { color: var(--ink); }
.qcard { position: relative; background: #fff; border-radius: 28px; padding: 26px 20px; text-align: center; box-shadow: var(--shadow); margin-bottom: 20px; border-bottom: 6px solid color-mix(in srgb, var(--c) 40%, #fff); }
.qcard .emoji { font-size: 64px; line-height: 1.1; margin-bottom: 6px; }
.qword { font-size: clamp(1.8rem, 8vw, 2.6rem); font-weight: 700; word-break: break-word; }
.qcard.small { padding: 16px; }
.qcard.small .emoji { font-size: 48px; }
.qcard.small .qword { font-size: 1.8rem; }
.speak { position: absolute; right: 12px; top: 12px; width: 46px; height: 46px; border-radius: 50%; background: #eef7ff; font-size: 22px; }
.opts { display: grid; gap: 12px; }
.opts.grid2 { grid-template-columns: 1fr 1fr; }
.opt { background: #fff; border-radius: 20px; padding: 18px 14px; font-size: 1.35rem; font-weight: 600; box-shadow: 0 5px 0 #dfe2ee; border: 3px solid #eceef5;
  transition: transform .08s, background .2s; animation: rise .35s var(--d) both; }
.opt:active { transform: translateY(3px); box-shadow: 0 2px 0 #dfe2ee; }
.opt.pic { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 1.15rem; padding: 16px 8px; }
.opt .oe { font-size: 42px; }
.opt.right { background: #e3f8e8; border-color: var(--ok); box-shadow: 0 5px 0 #2f9a48; animation: bump .35s; }
.opt.wrong { background: #ffe5e5; border-color: var(--bad); box-shadow: 0 5px 0 #d84343; animation: shake .45s; }
.opt.dim { opacity: .45; }
.big-speaker { display: block; margin: 6px auto 26px; width: 130px; height: 130px; border-radius: 50%; font-size: 60px; color: #fff;
  background: linear-gradient(135deg, #00bbf9, #5b8cff); box-shadow: 0 7px 0 #2a6bd1, 0 16px 30px rgba(0,187,249,.35); }
.big-speaker:active { transform: translateY(4px); box-shadow: 0 3px 0 #2a6bd1; }

/* Par */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pairs .col { display: grid; gap: 10px; }
.tile { min-height: 64px; background: #fff; border-radius: 18px; padding: 10px 8px; font-size: 1.1rem; font-weight: 600; border: 3px solid #eceef5;
  box-shadow: 0 4px 0 #dfe2ee; display: flex; align-items: center; justify-content: center; gap: 6px; word-break: break-word;
  transition: transform .1s, opacity .3s, background .2s; animation: rise .35s var(--d) both; }
.tile.en { color: #3a4ad9; }
.tile .te { font-size: 1.4rem; }
.tile.sel { border-color: var(--c); background: color-mix(in srgb, var(--c) 15%, #fff); transform: scale(1.04); }
.tile.matched { background: #e3f8e8; border-color: var(--ok); box-shadow: none; opacity: .35; transform: scale(.94); pointer-events: none; }
.tile.wrongflash { border-color: var(--bad); background: #ffe5e5; }

/* Bokstaver */
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 22px; }
.slot { width: 44px; height: 54px; border-radius: 12px; background: rgba(255,255,255,.6); border: 3px dashed #c9cde0; font-size: 1.6rem; font-weight: 700; }
.slot.filled { background: #fff; border: 3px solid var(--c); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 50%, #fff); animation: pop .25s; }
.slot.right { border-color: var(--ok); background: #e3f8e8; }
.slot.keep { border-color: var(--ok); background: #e3f8e8; color: #2f9a48; box-shadow: 0 3px 0 #b6e6c2; animation: none; }
.slot.miss { border-color: var(--bad); background: #ffe5e5; color: #d84343; box-shadow: 0 3px 0 #f5b5b5; }
.slot.reveal { border: 3px solid var(--ok); background: #e3f8e8; color: #2f9a48; animation: pop .3s; }
.gap { width: 16px; }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.ltile { width: 56px; height: 60px; border-radius: 16px; background: #fff; font-size: 1.7rem; font-weight: 700; box-shadow: 0 5px 0 #dfe2ee; border: 3px solid #eceef5; }
.ltile:active { transform: translateY(3px); }
.ltile.used { opacity: .2; pointer-events: none; }
.row { display: flex; gap: 10px; justify-content: center; }
.ghost { background: #fff; border-radius: 16px; padding: 12px 18px; font-weight: 600; box-shadow: 0 4px 0 #dfe2ee; }
.ghost.wide { display: block; width: 100%; padding: 16px; font-size: 1.1rem; }

/* Lynrunde */
.lt-timer { height: 10px; background: #fff; border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.lt-timer i { display: block; height: 100%; background: linear-gradient(90deg, #f15bb5, #fee440); }
#ltsec { color: #f15bb5; font-size: 1.2rem; }
.qcard.lt .eq { font-size: 1.6rem; color: var(--muted); margin: 2px 0; }
.qcard.lt .qword.no { color: #9b5de5; }
.qcard.flash-ok { background: #e3f8e8; }
.qcard.flash-bad { background: #ffe5e5; animation: shake .4s; }
.tf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tfb { padding: 22px 10px; border-radius: 24px; font-size: 2.2rem; color: #fff; font-weight: 700; display: flex; flex-direction: column; align-items: center; }
.tfb small { font-size: 1rem; }
.tfb.yes { background: var(--ok); box-shadow: 0 6px 0 #2f9a48; }
.tfb.no { background: var(--bad); box-shadow: 0 6px 0 #d84343; }
.tfb:active { transform: translateY(4px); box-shadow: none; }
.lt-count { text-align: center; color: var(--muted); margin-top: 16px; }

/* Snakkeboble */
.bubble { position: sticky; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-top: 16px; border-radius: 20px;
  background: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(20px); transition: all .25s; pointer-events: none; }
.bubble.show { opacity: 1; transform: none; }
.bubble.ok { background: #e3f8e8; }
.bubble.bad { background: #fff0e0; }
.bubble .owl { font-size: 36px; animation: float 2s infinite; }
.bubble p { margin: 0; font-size: 1.1rem; }

/* Resultat */
.screen.result { text-align: center; padding-top: 30px; }
.trophy { font-size: 100px; line-height: 1.1; margin-bottom: 10px; }
.lead { font-size: 1.15rem; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.res-grid div { background: #fff; border-radius: 20px; padding: 14px; box-shadow: var(--shadow); animation: rise .4s both; }
.res-grid b { display: block; font-size: 1.8rem; }
.res-grid small { color: var(--muted); }
.learned { font-size: 1.1rem; font-weight: 600; }
.lvlup { background: linear-gradient(135deg, #fee440, #ff9f1c); border-radius: 20px; padding: 16px; font-size: 1.15rem; margin: 14px 0; box-shadow: var(--shadow); }

/* Statistikk */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 620px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; border-radius: 20px; padding: 14px 10px; text-align: center; box-shadow: var(--shadow); }
.stat span { font-size: 26px; }
.stat b { display: block; font-size: 1.35rem; margin-top: 2px; }
.stat small { color: var(--muted); font-size: .8rem; }
.stat.hotstat { background: linear-gradient(135deg, #fff1d0, #ffe0c2); }
.chart { display: flex; gap: 8px; align-items: flex-end; height: 170px; margin-top: 12px; padding: 14px 12px 10px; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart .col small { font-size: .72rem; color: var(--muted); height: 16px; }
.barv { flex: 1; width: 100%; max-width: 38px; display: flex; align-items: flex-end; background: #f3f4f9; border-radius: 10px; overflow: hidden; }
.barv i { display: block; width: 100%; background: linear-gradient(180deg, #00bbf9, #9b5de5); border-radius: 10px; }
.chart .col span { font-size: .85rem; margin-top: 6px; color: var(--muted); font-weight: 600; }
.chart .col.today span { color: var(--ink); }
.chart .col.today .barv { box-shadow: 0 0 0 2px #ff9f1c; }
.hard { padding: 6px; }
.hard-row { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-align: left; }
.hard-row:active { background: #f3f4f9; }
.hard-row b { flex: 1; }

/* Profiler */
.screen.profiles { text-align: center; padding-top: 20px; }
.logo { margin-bottom: 20px; }
.owl-big { display: inline-block; font-size: 96px; animation: float 3s infinite; }
.logo h1 { font-size: 2.4rem; background: linear-gradient(135deg, #ff9f1c, #f15bb5, #9b5de5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo p { color: var(--muted); margin: 4px 0 0; }
.profile-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.profile { background: #fff; border-radius: var(--r); padding: 18px 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1.15rem; animation: rise .4s var(--d) both; }
.profile .avatar { width: 76px; height: 76px; font-size: 46px; box-shadow: none; background: #fff6e5; }
.profile.add { border: 3px dashed #d4d7e5; box-shadow: none; background: rgba(255,255,255,.6); }
.profile.add .avatar { background: #eef0f7; color: var(--muted); font-size: 34px; }
.screen.newp .card { margin-bottom: 6px; }
.lbl { display: block; font-weight: 600; margin: 4px 0 10px; }
#pname { width: 100%; font-size: 1.4rem; padding: 14px 16px; border-radius: 16px; border: 3px solid #eceef5; outline: none; margin-bottom: 18px; }
#pname:focus { border-color: #ff9f1c; }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.av { aspect-ratio: 1; border-radius: 16px; font-size: 32px; background: #f6f7fb; border: 3px solid transparent; }
.av.sel { border-color: #ff9f1c; background: #fff2e0; animation: bump .3s; }

/* Ark */
#sheet { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#sheet.open { pointer-events: auto; }
.sheet-bg { position: absolute; inset: 0; background: rgba(43,45,66,.35); animation: fade .2s both; }
@keyframes fade { from { opacity: 0; } }
@keyframes slideup { from { transform: translateY(100%); } }
.sheet-card { position: absolute; left: 0; right: 0; bottom: 0; max-width: 760px; margin: 0 auto; max-height: 85vh; overflow: auto; background: #fff;
  border-radius: 28px 28px 0 0; padding: 20px 18px calc(env(safe-area-inset-bottom) + 18px); animation: slideup .28s cubic-bezier(.2,.9,.3,1) both; }
.sheet-card h2 { color: var(--ink); font-size: 1.35rem; margin: 0 0 14px; }
.levels { display: grid; gap: 10px; margin-bottom: 14px; }
.lvl-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: 18px; background: #f6f7fb; border: 3px solid transparent; }
.lvl-row.cur { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.lvl-row.locked { opacity: .55; }
.li { font-size: 32px; width: 48px; text-align: center; }
.lvt { flex: 1; }
.lvt b { display: block; }
.lvt small { color: var(--muted); font-size: .82rem; }
.tick { color: var(--c); font-size: 1.4rem; font-weight: 700; }
.row-btn { display: block; width: 100%; text-align: left; padding: 16px; border-radius: 16px; background: #f6f7fb; margin-bottom: 10px; font-size: 1.05rem; font-weight: 500; }
.row-btn.danger { color: #d84343; }

/* Toast og konfetti */
#toast { position: fixed; top: calc(env(safe-area-inset-top) + 12px); left: 50%; transform: translate(-50%, -150%); z-index: 30;
  background: #2b2d42; color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 1.05rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.3); white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
#toast.show { transform: translate(-50%, 0); }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* Sky og foreldreside */
.cloud-card { margin-top: 22px; background: #fff; border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); text-align: center; }
.cloud-card b { display: block; font-size: 1.1rem; }
.cloud-card small { display: block; color: var(--muted); margin: 4px 0 12px; }
.cloud-card .row { flex-wrap: wrap; }
.cloud-ok { margin-top: 20px; color: var(--muted); font-size: .9rem; }
.link { color: #3a4ad9; font-weight: 600; text-decoration: underline; }
.code-input, .text-input { width: 100%; font-size: 1.4rem; padding: 14px 16px; border-radius: 16px; border: 3px solid #eceef5; outline: none; margin-bottom: 14px; }
.code-input { text-align: center; font-size: 2rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; }
.code-input:focus, .text-input:focus { border-color: #ff9f1c; }
.screen.parent .card { margin-bottom: 12px; }
.screen.parent a { color: #3a4ad9; }
.parent-login { text-align: center; }
.parent-login .trophy { font-size: 64px; margin: 0; }
.parent-login h2 { color: var(--ink); font-size: 1.4rem; margin: 6px 0; }
.facts { text-align: left; padding-left: 20px; line-height: 1.5; }
.facts li { margin-bottom: 6px; }
.gbtn { display: flex; justify-content: center; min-height: 48px; margin: 16px 0 10px; }
.acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct b { display: block; word-break: break-all; }
.ghost.small { padding: 8px 12px; font-size: .9rem; flex: none; }
.child-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.child-head .avatar { width: 48px; height: 48px; font-size: 28px; background: #fff6e5; box-shadow: none; }
.ch-name { flex: 1; min-width: 0; }
.ch-name b { display: block; font-size: 1.2rem; }
.ch-name small { color: var(--muted); }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini { background: #f6f7fb; border-radius: 14px; padding: 8px 4px; text-align: center; }
.mini span { font-size: 18px; }
.mini b { display: block; font-size: 1.05rem; }
.mini small { color: var(--muted); font-size: .72rem; }
.chart.small { height: 110px; box-shadow: none; padding: 10px 0 0; margin-top: 8px; }
.hard-line { font-size: .9rem; margin: 10px 0 0; }
.dev-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f1f6; }
.dev-row > span { font-size: 24px; }
.dev-row div { flex: 1; }
.dev-row b, .dev-row small { display: block; }
.small-play { font-size: 1.1rem; padding: 14px; margin: 14px 0 8px; }
.small-play span { font-size: 1.3rem; }
.code-box { background: #fff6e5; border: 3px dashed #ff9f1c; border-radius: 20px; padding: 14px; margin-top: 14px; text-align: center; }
.code-box .code { display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: .15em; margin: 4px 0; }
.code-box small { display: block; color: var(--muted); }
.sheet-card .lbl { margin-top: 6px; }
.sheet-card .avatars { margin-bottom: 6px; }
.ghost.wide.gap-top { margin-top: 10px; }
.screen.profiles { position: relative; }
.parent-btn { position: absolute; top: 0; right: 0; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: var(--shadow); font-size: 22px; display: grid; place-items: center; }
.parent-btn i { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 14px; background: #fff; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.gate { text-align: center; }
.hold-btn { --h: 0; width: 140px; height: 140px; margin: 16px auto 20px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ff9f1c calc(var(--h) * 1%), #eceef5 0); touch-action: none; -webkit-touch-callout: none; cursor: pointer; }
.hold-btn span { width: 116px; height: 116px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 48px; pointer-events: none; }
.remember { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 14px 0 0; font-size: .95rem; -webkit-user-select: none; }
.remember input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: #ff9f1c; }

/* Flokker */
.flock-card { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border-radius: var(--r); padding: 12px 14px; margin-top: 12px; box-shadow: var(--shadow); border: 3px solid #efe4ff; animation: rise .4s .08s both; --c: #9b5de5; }
.fc-emoji { font-size: 34px; width: 52px; height: 52px; border-radius: 16px; background: #f3ebff; display: grid; place-items: center; flex: none; }
.fc-body { flex: 1; min-width: 0; }
.fc-body b { display: block; }
.fc-body small { color: var(--muted); font-size: .82rem; }
.fc-body .bar { margin: 5px 0; height: 10px; }
.badge { background: #ff5d8f; color: #fff; border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: .9rem; animation: bump 1s infinite; }
.screen.flock { --c: #9b5de5; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.tab { white-space: nowrap; background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; box-shadow: var(--shadow); }
.tab.on { background: #9b5de5; color: #fff; }
.fl-head { text-align: center; margin: 4px 0 14px; }
.fl-head > span { font-size: 60px; display: block; animation: float 3s infinite; }
.fl-head small { color: var(--muted); }
.goal-big { text-align: center; margin-bottom: 4px; }
.goal-big b { display: block; font-size: 1.4rem; margin: 4px 0; }
.goal-big small { color: var(--muted); }
.bar.thick { height: 18px; }
.bar.thick i { background: linear-gradient(90deg, #9b5de5, #f15bb5); }
.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hl { background: #fff; border-radius: 18px; padding: 12px; text-align: center; box-shadow: var(--shadow); }
.hl > span { font-size: 26px; }
.hl small { display: block; color: var(--muted); font-size: .76rem; }
.hl b { display: block; margin: 2px 0; }
.members { padding: 6px; }
.mem { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; text-align: left; }
.mem:not(:disabled):active { background: #f6f0ff; }
.mem.me { background: #fff6e5; opacity: 1; }
.mem .avatar { width: 46px; height: 46px; font-size: 26px; box-shadow: none; background: #f3ebff; }
.mem-body { flex: 1; min-width: 0; }
.mem-body b { display: block; }
.mem-body small { color: var(--muted); font-size: .8rem; }
.dots { display: flex; gap: 4px; margin: 4px 0; }
.dots i { width: 20px; height: 20px; border-radius: 50%; background: #eceef5; color: #aab; font-size: .65rem; font-style: normal; display: grid; place-items: center; font-weight: 600; }
.dots i.on { background: #3dbe5a; color: #fff; }
.dots i.td { box-shadow: 0 0 0 2px #ff9f1c; }
.cheer-hint { font-size: 24px; opacity: .7; }
.inbox { background: #fff0f6; margin-bottom: 12px; }
.inbox.new { animation: pop .5s both; }
.ib-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ib-row > span:first-child { font-size: 24px; }
.ib-row span:nth-child(2) { flex: 1; }
.ib-kind { font-size: 1.3rem; font-weight: 700; }
.ib-row.unseen { font-weight: 600; }
.trophy.small { font-size: 64px; margin: 0; }
.cheers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.cheer { background: #f6f0ff; border-radius: 18px; padding: 16px 6px; font-size: 1.5rem; font-weight: 700; box-shadow: 0 4px 0 #e2d4fb; }
.cheer:active { transform: translateY(3px); }
h2.ink { color: var(--ink); font-size: 1.3rem; }
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.row.wrap { flex-wrap: wrap; justify-content: flex-start; }
.flock-admin .fa-head, .fa-head { display: flex; align-items: center; gap: 12px; }
.fa-emoji { font-size: 30px; width: 48px; height: 48px; border-radius: 14px; background: #f3ebff; display: grid; place-items: center; flex: none; }
.fa-head b { display: block; font-size: 1.1rem; }
.fa-head small { color: var(--muted); font-size: .82rem; }
.fa-head.preview { background: #f6f7fb; border-radius: 16px; padding: 10px; margin: 6px 0 10px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.kchip { border-radius: 999px; padding: 7px 12px; background: #f6f7fb; font-weight: 600; font-size: .92rem; border: 2px dashed #d4d7e5; }
.kchip.on { background: #f3ebff; border: 2px solid #c9a8f5; }
.kchip i { font-style: normal; color: var(--muted); margin-left: 4px; }
.fa-owner { margin-top: 12px; background: #fff6e5; border-radius: 16px; padding: 12px; text-align: center; }
.fa-owner small { display: block; color: var(--muted); }
.fa-owner .code { display: block; font-size: 1.8rem; font-weight: 700; letter-spacing: .15em; margin: 2px 0 8px; }
.fa-owner .row { justify-content: center; }
.kid-checks { display: grid; gap: 8px; margin-bottom: 10px; }
.kid-check { display: flex; align-items: center; gap: 10px; background: #f6f7fb; border-radius: 14px; padding: 10px 12px; font-size: 1.05rem; }
.kid-check input { width: 22px; height: 22px; accent-color: #9b5de5; }
.card.flat { box-shadow: none; background: #f6f7fb; padding: 6px 12px; margin-bottom: 8px; }