

@charset "utf-8";

* { box-sizing: border-box; }

svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; }

button svg, .iconbtn svg, .kiconbtn svg, .gicobtn svg { flex: 0 0 auto; }

:root { --ink: #14232E; --ink2: #3B4A54; --muted: #5A6B76; --faint: #8A959B; --line: #E7ECEF; --brandBlue: #0B6BA8; --brandBlueD: #0A4A76; --sky: #0EA5E9; --orange: #F97316; --orangeD: #EA580C; --acc: #0B6BA8; --acc2: #0EA5E9; --accInk: #0A4A76; --accSoft: #E7F3FB; --bg1: #EAF0F5; --bg2: #F3F7FA; --card: #FFFFFF; --star: #FFB300; --starOff: #D9E1E7; --cream1: #FFF1DC; --cream2: #FFF6EC; --kink: #43301F; --kmuted: #B0977E; --cardSh: #F1E0CB; --kblue: #1AA7DC; --kblue2: #4BC9F5; --kblueSh: #1187B8; --korange: #F97316; --korange2: #FFA24D; --korangeSh: #D9560E; --korangeInk: #E8620E; --kgreen: #22B892; --kgreen2: #3FD6AC; --kgreenSh: #159C79; --kyellow: #F5B301; --kyellow2: #FFD34D; }

[data-theme="brand"] { --acc: #0B6BA8; --acc2: #0EA5E9; --accInk: #0A4A76; --accSoft: #E7F3FB; }

[data-theme="kids"] { --acc: #F97316; --acc2: #FFA24D; --accInk: #E8620E; --accSoft: #FFF1E4; }

[data-theme="primary"] { --acc: #0E9E63; --acc2: #37C98A; --accInk: #0A7B4C; --accSoft: #E4F7EE; }

[data-theme="secondary"] { --acc: #7C5AE0; --acc2: #9E86F0; --accInk: #5B3FC0; --accSoft: #EEE9FC; }

[data-theme="ielts"] { --acc: #0A4A76; --acc2: #0B6BA8; --accInk: #08324F; --accSoft: #E6EEF5; }

[data-theme="teacher"] { --acc: #14232E; --acc2: #3B4A54; --accInk: #0A141C; --accSoft: #EBEEF0; }

[data-theme="admin"] { --acc: #B4531A; --acc2: #EA580C; --accInk: #8A3D10; --accSoft: #FBEDE2; }

html, body { margin: 0px; height: 100%; }

body { font-family: Manrope, system-ui, sans-serif; color: var(--ink); background: var(--bg1); -webkit-font-smoothing: antialiased; overflow: hidden; -webkit-tap-highlight-color: transparent; }

button { font-family: inherit; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; cursor: pointer; color: inherit; }

input, select, textarea { font-family: inherit; }

:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

#app { position: fixed; inset: 0px; overflow: hidden; background: linear-gradient(180deg,var(--bg1),var(--bg2)); }

.view { position: absolute; inset: 0px; display: none; flex-direction: column; overflow: hidden; }

.view.on { display: flex; animation: 0.34s ease 0s 1 normal none running vIn; }

@keyframes vIn { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.scroll { flex: 1 1 0%; overflow-y: auto; overscroll-behavior: contain; }

.scroll::-webkit-scrollbar { width: 0px; }

.wrap { width: 100%; max-width: 820px; margin: 0px auto; padding: 0px clamp(16px, 4vw, 30px); }

.wrap-sm { max-width: 520px; }

@keyframes bob { 
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}

@keyframes floaty { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-9px); }
}

@keyframes pop { 
  0% { transform: scale(0); }
  62% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes ring { 
  0% { transform: scale(0.75); opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes conf { 
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(560px) rotate(560deg); opacity: 0; }
}

@keyframes shakeX { 
  0%, 100% { transform: translateX(0px); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

@keyframes eq { 
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

@keyframes barGrow { 
  0% { width: 0px; }
}

.floaty { animation: 3s ease-in-out 0s infinite normal none running floaty; }

.bob { animation: 1.4s ease-in-out 0s infinite normal none running bob; }

.topbar { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 16px) clamp(16px,4vw,30px) 10px; flex: 0 0 auto; }

.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--card); box-shadow: rgba(18, 41, 58, 0.08) 0px 2px 8px; color: var(--muted); flex: 0 0 auto; transition: transform 0.1s; }

.iconbtn:active { transform: scale(0.94); }

.iconbtn svg { width: 20px; height: 20px; }

.tbtitle { flex: 1 1 0%; font: 800 clamp(17px, 4.5vw, 21px) "Space Grotesk"; color: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; font: 700 clamp(15px, 4vw, 17px) Manrope; padding: clamp(14px, 3.6vw, 17px) 22px; transition: transform 0.1s, box-shadow 0.2s, filter 0.2s; }

.btn svg { width: 1.15em; height: 1.15em; }

.btn:active { transform: scale(0.97); }

.btn-acc { background: var(--acc); color: rgb(255, 255, 255); box-shadow: 0 12px 26px -10px var(--acc); }

.btn-acc:hover { filter: brightness(1.05); }

.btn-soft { background: var(--accSoft); color: var(--accInk); }

.btn-white { background: var(--card); color: var(--ink2); box-shadow: rgba(18, 41, 58, 0.06) 0px 2px 10px; }

.btn-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--muted); }

.btn-lg { padding: 17px 24px; font-size: 17px; }

.btn-block { width: 100%; }

.card { background: var(--card); border-radius: 18px; box-shadow: rgba(18, 41, 58, 0.06) 0px 4px 16px; }

.pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-weight: 700; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }

.field label { font: 700 12.5px Manrope; color: var(--ink2); padding-left: 2px; }

.field .inp { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: 13px; padding: 13px 15px; }

.field .inp:focus-within { border-color: var(--acc); }

.field .inp svg { width: 18px; height: 18px; color: var(--faint); }

.field input, .field select, .field textarea { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; flex: 1 1 0%; font: 600 15px Manrope; background: none; color: var(--ink); width: 100%; }

.eyebrow { display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: rgb(255, 255, 255); border-radius: 999px; padding: 6px 13px; font: 700 10.5px Manrope; letter-spacing: 0.06em; }

.bnav { flex: 0 0 auto; display: flex; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 8px 6px calc(env(safe-area-inset-bottom) + 8px); }

.bnav button { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--faint); font: 700 10px Manrope; padding: 5px; transition: 0.15s; }

.bnav button svg { width: 23px; height: 23px; }

.bnav button.on { color: var(--acc); }

.grid { display: grid; gap: clamp(11px, 2.6vw, 15px); }

.g2 { grid-template-columns: 1fr 1fr; }

.g-auto { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.g-course { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.course { position: relative; border-radius: 22px; padding: 22px; color: rgb(255, 255, 255); overflow: hidden; cursor: pointer; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform 0.12s, box-shadow 0.2s; }

.course:hover { transform: translateY(-3px); }

.course:active { transform: translateY(0px); }

.course .cico { position: absolute; top: 16px; right: 16px; font-size: 44px; opacity: 0.9; }

.course .ctag { font: 800 9px Manrope; letter-spacing: 0.1em; opacity: 0.9; }

.course .cname { font: 800 clamp(19px, 4.6vw, 23px) / 1.1 "Space Grotesk"; margin-top: 3px; }

.course .cdesc { font: 600 12px Manrope; opacity: 0.9; margin-top: 4px; }

.stats { display: flex; gap: 9px; }

.stat { flex: 1 1 0%; background: var(--card); border-radius: 14px; padding: 11px 8px; box-shadow: rgba(18, 41, 58, 0.05) 0px 3px 12px; text-align: center; }

.stat .sv { font: 800 clamp(17px, 5vw, 21px) "Space Grotesk"; color: var(--ink); }

.stat .sl { font: 700 10px Manrope; color: var(--faint); }

.row { display: flex; align-items: center; gap: 13px; padding: 14px 16px; }

.row + .row { border-top: 1px solid var(--line); }

.row .rico { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.prog { height: 9px; border-radius: 99px; background: rgb(231, 237, 241); overflow: hidden; }

.prog > i { display: block; height: 100%; border-radius: 99px; background: var(--acc); transition: width 0.5s; }

.choice { display: flex; align-items: center; gap: 13px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 15px; cursor: pointer; transition: 0.15s; }

.choice:active { transform: scale(0.99); }

.choice.sel { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accSoft); }

.choice.correct { border-color: rgb(14, 158, 99); background: rgb(234, 248, 241); }

.choice.wrong { border-color: rgb(226, 74, 74); background: rgb(252, 236, 236); }

.choice .ck { width: 30px; height: 30px; border-radius: 9px; background: var(--bg1); color: var(--muted); display: flex; align-items: center; justify-content: center; font: 800 13px "Space Grotesk"; flex: 0 0 auto; }

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(11px, 3vw, 16px); }

.opt { position: relative; background: var(--card); border-radius: 20px; padding: clamp(12px, 3vw, 16px); box-shadow: rgba(18, 41, 58, 0.07) 0px 4px 14px; border: 3px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform 0.1s; }

.opt:active { transform: scale(0.98); }

.opt .oe { font-size: clamp(44px, 13vw, 72px); line-height: 1; }

.opt .ol { font: 800 clamp(15px, 4vw, 20px) "Baloo 2"; color: var(--ink); }

.opt.correct { border-color: rgb(47, 211, 165); background: rgb(234, 251, 243); }

.opt.wrong { border-color: rgb(255, 107, 107); animation: 0.4s ease 0s 1 normal none running shakeX; }

.obadge { position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border-radius: 50%; background: rgb(47, 211, 165); display: flex; align-items: center; justify-content: center; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 8px; }

.obadge svg { width: 20px; height: 20px; color: rgb(255, 255, 255); }

[data-theme="kids"] #app, .kbg { background: linear-gradient(180deg,var(--cream1),var(--cream2)) !important; }

.kwrap { width: 100%; max-width: 760px; margin: 0px auto; padding: 0px clamp(16px, 4vw, 28px); }

.kchip { display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); border-radius: 16px; padding: 10px 15px; box-shadow: 0 6px 0 var(--cardSh); font: 800 clamp(15px, 3.6vw, 19px) "Baloo 2"; color: var(--kink); }

.kbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 22px; font: 800 clamp(17px, 4.4vw, 22px) "Baloo 2"; padding: clamp(15px, 4vw, 19px) 24px; transition: transform 0.1s, box-shadow 0.1s; }

.kbtn svg { width: 1.15em; height: 1.15em; }

.kbtn-o { background: linear-gradient(180deg,var(--korange2),var(--korange)); color: rgb(255, 255, 255); box-shadow: 0 8px 0 var(--korangeSh); }

.kbtn-b { background: linear-gradient(180deg,var(--kblue2),var(--kblue)); color: rgb(255, 255, 255); box-shadow: 0 8px 0 var(--kblueSh); }

.kbtn-g { background: linear-gradient(180deg,var(--kgreen2),var(--kgreen)); color: rgb(255, 255, 255); box-shadow: 0 8px 0 var(--kgreenSh); }

.kbtn-w { background: rgb(255, 255, 255); color: var(--kmuted); box-shadow: 0 7px 0 var(--cardSh); }

.kbtn:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--korangeSh); }

.kbtn-b:active { box-shadow: 0 3px 0 var(--kblueSh); }

.kbtn-g:active { box-shadow: 0 3px 0 var(--kgreenSh); }

.kbtn-w:active { box-shadow: 0 2px 0 var(--cardSh); }

.kcard { background: rgb(255, 255, 255); border-radius: 24px; box-shadow: 0 8px 0 var(--cardSh); }

.ktopbar { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 14px) clamp(16px,4vw,28px) 6px; flex: 0 0 auto; }

.kiconbtn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 18px; background: rgb(255, 255, 255); box-shadow: 0 5px 0 var(--cardSh); color: var(--kmuted); transition: transform 0.1s; }

.kiconbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cardSh); }

.kiconbtn svg { width: 24px; height: 24px; }

.kprog { flex: 1 1 0%; height: 16px; border-radius: 99px; background: rgb(252, 230, 206); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px inset; }

.kprog > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgb(255, 201, 60), rgb(255, 138, 61)); transition: width 0.4s; }

.khearts { display: inline-flex; align-items: center; gap: 6px; background: rgb(255, 255, 255); border-radius: 16px; padding: 8px 12px; box-shadow: 0 5px 0 var(--cardSh); font: 800 15px "Baloo 2"; color: var(--korangeInk); }

.kbnav { flex: 0 0 auto; display: flex; gap: 12px; padding: 10px clamp(16px,4vw,28px) calc(env(safe-area-inset-bottom) + 12px); }

.kbnav button { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgb(255, 255, 255); border-radius: 22px; padding: 14px; box-shadow: 0 7px 0 var(--cardSh); font: 800 clamp(15px, 3.8vw, 18px) "Baloo 2"; color: var(--kmuted); transition: transform 0.1s, box-shadow 0.1s; }

.kbnav button:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--cardSh); }

.kbnav button .ic { width: 44px; height: 44px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.kbnav button.on { color: var(--korangeInk); }

.kbnav button.on .ic { background: linear-gradient(180deg,var(--korange2),var(--korange)); box-shadow: 0 4px 0 var(--korangeSh); }

.kbnav button.on .ic svg { color: rgb(255, 255, 255); }

.kbnav button .ic svg { width: 24px; height: 24px; color: var(--kmuted); }

@media (max-width: 420px) {
  .kbnav .lbl { display: none; }
}

.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: clamp(11px, 2.6vw, 16px); padding-bottom: 16px; }

.ktopic { background: rgb(255, 255, 255); border-radius: 24px; padding: 15px 10px; box-shadow: 0 7px 0 var(--cardSh); display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; position: relative; }

.ktopic:hover { transform: translateY(-3px); }

.ktopic:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--cardSh); }

.ktopic .tsq { width: clamp(56px, 15vw, 68px); height: clamp(56px, 15vw, 68px); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: clamp(30px, 8vw, 36px); }

.ktopic .tname { font: 800 clamp(13px, 3.5vw, 15px) / 1.05 "Baloo 2"; color: var(--kink); text-align: center; }

.tstars { display: flex; gap: 2px; }

.tstars svg { width: 15px; height: 15px; }

.tdone { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--kgreen); display: flex; align-items: center; justify-content: center; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.12) 0px 3px 6px; }

.tdone svg { width: 16px; height: 16px; color: rgb(255, 255, 255); }

.klevel { font: 800 11px Nunito; letter-spacing: 0.1em; color: var(--kmuted); margin: 16px 2px 8px; text-transform: uppercase; }

.center { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(12px, 3vw, 18px); padding: clamp(14px, 4vw, 24px); }

.bigtile { width: clamp(170px, 50vw, 270px); height: clamp(170px, 50vw, 270px); border-radius: clamp(36px, 9vw, 48px); background: rgb(255, 255, 255); box-shadow: 0 12px 0 var(--cardSh); display: flex; align-items: center; justify-content: center; font-size: clamp(92px, 28vw, 140px); line-height: 1; }

.kword { font: 800 clamp(42px, 12vw, 68px) / 1 "Baloo 2"; color: var(--kink); }

.kwvi { font: 800 clamp(15px, 4.2vw, 19px) Nunito; color: var(--kmuted); }

.kspk { width: clamp(62px, 16vw, 78px); height: clamp(62px, 16vw, 78px); border-radius: 50%; background: linear-gradient(180deg,var(--kblue2),var(--kblue)); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 0 var(--kblueSh); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; }

.kspk:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--kblueSh); }

.kspk svg { width: clamp(28px, 7vw, 36px); height: clamp(28px, 7vw, 36px); color: rgb(255, 255, 255); }

.kmic { position: relative; width: clamp(64px, 17vw, 82px); height: clamp(64px, 17vw, 82px); flex: 0 0 auto; cursor: pointer; }

.kmic .ring { position: absolute; inset: 0px; border-radius: 50%; background: rgb(255, 138, 61); opacity: 0.4; animation: 1.8s ease-out 0s infinite normal none running ring; }

.kmic .core { position: relative; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(180deg,var(--korange2),var(--korange)); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 0 var(--korangeSh); }

.kmic.rec .core { background: linear-gradient(rgb(255, 122, 122), rgb(226, 74, 74)); box-shadow: rgb(184, 50, 50) 0px 8px 0px; }

.kmic .core svg { width: clamp(28px, 7vw, 34px); height: clamp(28px, 7vw, 34px); color: rgb(255, 255, 255); }

.klbottom { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px,4vw,28px) calc(env(safe-area-inset-bottom) + 16px); }

.klbottom .kbtn { flex: 1 1 0%; }

.subdots { display: flex; gap: 6px; justify-content: center; }

.subdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--starOff); }

.subdots i.on { background: var(--korange); width: 26px; border-radius: 99px; }

.qcard { display: flex; align-items: center; gap: 14px; background: rgb(255, 255, 255); border-radius: 24px; padding: 16px 18px; box-shadow: rgba(180, 120, 60, 0.14) 0px 8px 16px; margin-bottom: clamp(14px, 3vw, 20px); }

.qcard .qspk { width: clamp(52px, 13vw, 62px); height: clamp(52px, 13vw, 62px); border-radius: 18px; background: linear-gradient(180deg,var(--kblue2),var(--kblue)); display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 0 var(--kblueSh); flex: 0 0 auto; cursor: pointer; }

.qcard .qspk svg { width: clamp(26px, 6.5vw, 30px); height: clamp(26px, 6.5vw, 30px); color: rgb(255, 255, 255); }

.qcard .qtxt { font: 800 clamp(18px, 5vw, 26px) / 1.15 "Baloo 2"; color: var(--kink); }

.memgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 2.4vw, 14px); max-width: 520px; margin: 0px auto; width: 100%; }

.memcard { aspect-ratio: 1 / 1; border-radius: 18px; background: linear-gradient(160deg,var(--kblue2),var(--kblue)); display: flex; align-items: center; justify-content: center; font-size: clamp(26px, 7vw, 40px); cursor: pointer; box-shadow: 0 6px 0 var(--kblueSh); transition: transform 0.2s; position: relative; }

.memcard .face { opacity: 0; transition: opacity 0.15s; }

.memcard.flip { background: rgb(255, 255, 255); box-shadow: 0 6px 0 var(--cardSh); }

.memcard.flip .face { opacity: 1; }

.memcard .back { position: absolute; font-size: clamp(24px, 6vw, 34px); color: rgba(255, 255, 255, 0.8); }

.memcard.flip .back { display: none; }

.memcard.done { background: rgb(234, 251, 243); box-shadow: rgb(188, 233, 213) 0px 6px 0px; opacity: 0.7; }

.spellrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 64px; }

.spellslot { width: clamp(44px, 11vw, 58px); height: clamp(52px, 13vw, 66px); border-radius: 14px; border: 3px dashed rgb(227, 201, 168); background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font: 800 clamp(24px, 6vw, 30px) "Baloo 2"; color: var(--kink); }

.spellslot.filled { border-style: solid; border-color: var(--kgreen2); background: rgb(234, 251, 243); }

.spellbank { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.spelltile { width: clamp(44px, 11vw, 58px); height: clamp(52px, 13vw, 66px); border-radius: 14px; background: rgb(255, 255, 255); box-shadow: 0 6px 0 var(--cardSh); display: flex; align-items: center; justify-content: center; font: 800 clamp(24px, 6vw, 30px) "Baloo 2"; color: var(--kink); cursor: pointer; transition: transform 0.1s; }

.spelltile:active { transform: translateY(3px); }

.spelltile.used { opacity: 0.3; pointer-events: none; }

.countscene { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 440px; margin: 0px auto; font-size: clamp(38px, 10vw, 54px); }

.reward { position: relative; flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(12px, 3vw, 18px); padding: clamp(16px, 5vw, 30px); overflow: hidden; }

.conf { position: absolute; top: -12px; border-radius: 3px; animation: 2.4s ease-in 0s infinite normal none running conf; }

.trophy { width: clamp(120px, 34vw, 150px); height: clamp(120px, 34vw, 150px); border-radius: clamp(38px, 10vw, 46px); background: linear-gradient(180deg,var(--kyellow2),var(--kyellow)); display: flex; align-items: center; justify-content: center; box-shadow: rgba(245, 179, 1, 0.42) 0px 14px 28px; position: relative; z-index: 2; }

.trophy svg { width: clamp(64px, 18vw, 82px); height: clamp(64px, 18vw, 82px); color: rgb(255, 255, 255); }

.big-h { font: 800 clamp(32px, 9vw, 48px) / 1 "Baloo 2"; color: var(--korangeInk); position: relative; z-index: 2; }

.rstars { display: flex; gap: 10px; position: relative; z-index: 2; }

.rstars svg { width: clamp(46px, 13vw, 58px); height: clamp(46px, 13vw, 58px); }

.rchips { display: flex; gap: 12px; position: relative; z-index: 2; }

.wave { display: flex; align-items: center; gap: 5px; height: 52px; color: var(--korange); }

.wave i { width: 6px; border-radius: 3px; background: currentcolor; animation: 1s ease-in-out 0s infinite normal none running eq; }

.splash { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; background: linear-gradient(160deg,var(--brandBlue),var(--brandBlueD) 60%,var(--orange) 180%); color: rgb(255, 255, 255); }

.splash .logo { width: 120px; height: 120px; border-radius: 36px; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; font-size: 64px; }

.brandname { font: 800 clamp(32px, 9vw, 46px) / 1 "Space Grotesk"; }

.brandname b { color: rgb(255, 217, 190); font-weight: 800; }

.toast-wrap { position: fixed; left: 0px; right: 0px; bottom: calc(env(safe-area-inset-bottom) + 84px); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 900; pointer-events: none; padding: 0px 16px; }

.toast { background: rgb(20, 35, 46); color: rgb(255, 255, 255); border-radius: 14px; padding: 12px 18px; font: 700 14px Manrope; box-shadow: rgba(0, 0, 0, 0.28) 0px 10px 24px; animation: 0.3s ease 0s 1 normal none running vIn; max-width: 100%; }

.toast.good { background: rgb(14, 124, 84); }

.toast.bad { background: rgb(193, 59, 59); }

.toast.info { background: var(--brandBlue); }

.avgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.avpick { aspect-ratio: 1 / 1; border-radius: 22px; background: rgb(255, 255, 255); box-shadow: 0 7px 0 var(--cardSh); display: flex; align-items: center; justify-content: center; font-size: clamp(30px, 8vw, 40px); cursor: pointer; border: 4px solid transparent; transition: transform 0.1s; }

.avpick:active { transform: translateY(3px); }

.avpick.sel { border-color: var(--korange); background: rgb(255, 243, 232); }

.nameinput { width: 100%; border: 4px solid rgb(241, 224, 203); border-radius: 20px; padding: 16px 18px; font: 800 clamp(20px, 5vw, 26px) "Baloo 2"; color: var(--kink); text-align: center; background: rgb(255, 255, 255); outline: none; }

.nameinput:focus { border-color: var(--korange); }

.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 4px 9px; font: 800 10px Manrope; letter-spacing: 0.04em; }

.mtile { background: rgb(255, 255, 255); border: 4px solid transparent; border-radius: 20px; padding: clamp(12px, 3vw, 16px); box-shadow: 0 7px 0 var(--cardSh); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; min-height: 64px; }

.mtile:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--cardSh); }

.mtile.wordt { font: 800 clamp(17px, 4.6vw, 22px) "Baloo 2"; color: var(--kink); }

.mtile.pict { font-size: clamp(38px, 11vw, 52px); line-height: 1; }

.mtile.sel { border-color: var(--korange); }

.mtile.matched { border-color: var(--kgreen2); background: rgb(234, 251, 243); opacity: 0.55; pointer-events: none; }

.mtile.miss { animation: 0.4s ease 0s 1 normal none running shakeX; }

.gscreen { background: linear-gradient(rgb(205, 234, 251) 0%, rgb(231, 245, 253) 46%, rgb(234, 247, 237) 100%) !important; }

.gtopbar { display: flex; align-items: center; gap: 12px; padding: 14px clamp(14px, 3vw, 22px) 6px; flex: 0 0 auto; flex-wrap: wrap; }

.gbrand { display: flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); border-radius: 18px; padding: 7px 14px 7px 8px; box-shadow: rgba(18, 41, 58, 0.1) 0px 4px 14px; }

.gbrand .gmark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(160deg, rgb(47, 182, 238), rgb(11, 107, 168)); display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); font: 800 12px "Space Grotesk"; flex: 0 0 auto; }

.gbrand .gnamewrap { line-height: 1.05; }

.gbrand .gname { font: 800 16px "Space Grotesk"; color: rgb(11, 107, 168); white-space: nowrap; }

.gbrand .gname b { color: rgb(249, 115, 22); }

.gbrand .gtag { font: 700 8px Manrope; color: rgb(154, 167, 174); letter-spacing: 0.03em; }

.gbrand .gmini { font-size: 30px; margin-left: 2px; }

.gstats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 0%; }

.gpill { display: inline-flex; align-items: center; gap: 6px; background: rgb(255, 255, 255); border-radius: 99px; padding: 8px 13px; box-shadow: rgba(18, 41, 58, 0.08) 0px 3px 10px; font: 800 14px "Space Grotesk"; color: rgb(20, 35, 46); }

.gpill svg { width: 16px; height: 16px; }

.gpill.gstar svg { color: rgb(255, 179, 0); }

.gpill.gcoin svg { color: rgb(245, 166, 35); }

.gprogpill { display: inline-flex; align-items: center; gap: 7px; background: rgb(11, 107, 168); border-radius: 99px; padding: 8px 12px 8px 14px; font: 800 12.5px Manrope; color: rgb(255, 255, 255); }

.gprogdots { display: flex; gap: 4px; }

.gprogdots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }

.gprogdots i.on { background: rgb(55, 214, 122); }

.gicobtn { width: 38px; height: 38px; border-radius: 50%; background: rgb(14, 165, 233); color: rgb(255, 255, 255); display: inline-flex; align-items: center; justify-content: center; box-shadow: rgba(11, 107, 168, 0.35) 0px 3px 10px; flex: 0 0 auto; }

.gicobtn svg { width: 17px; height: 17px; }

.gicobtn.ghome { background: rgb(245, 166, 35); }

.gbody { flex: 1 1 0%; display: flex; gap: 14px; padding: 8px clamp(14px, 3vw, 22px) 10px; overflow: hidden; min-height: 0px; }

.gside { width: 118px; flex: 0 0 auto; background: rgb(255, 255, 255); border-radius: 18px; padding: 14px 13px; box-shadow: rgba(18, 41, 58, 0.06) 0px 4px 14px; display: none; flex-direction: column; gap: 11px; }

@media (min-width: 920px) {
  .gside { display: flex; }
}

.gmicro { flex: 0 0 auto; text-align: center; font: 700 11.5px Manrope; color: rgb(154, 167, 174); padding: 10px clamp(14px, 3vw, 26px) 0px; }

@media (min-width: 920px) {
  .gmicro { display: none; }
}

.gside .gs-row { border-bottom: 1px solid rgb(238, 242, 245); padding-bottom: 9px; }

.gside .gs-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-bottom: 0px; }

.gside .gs-lab { font: 700 10.5px Manrope; color: rgb(154, 167, 174); }

.gside .gs-val { font: 800 16px "Space Grotesk"; color: rgb(20, 35, 46); margin-top: 2px; display: flex; align-items: center; gap: 5px; }

.gside .gs-val svg { width: 14px; height: 14px; }

.gside .gs-val.gorange { color: rgb(249, 115, 22); }

.gmain { flex: 1 1 0%; background: rgb(255, 255, 255); border-radius: 22px; box-shadow: rgba(18, 41, 58, 0.08) 0px 10px 26px; display: flex; flex-direction: column; overflow: hidden; min-width: 0px; }

.gmain-scroll { flex: 1 1 0%; overflow-y: auto; padding: 0px clamp(14px, 3vw, 26px) 16px; }

.gbanner-row { display: flex; justify-content: center; padding: 14px clamp(14px, 3vw, 26px) 6px; }

.gbanner { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(90deg, rgb(11, 107, 168), rgb(14, 165, 233)); color: rgb(255, 255, 255); font: 800 clamp(14px, 3vw, 18px) "Space Grotesk"; padding: 11px 26px; border-radius: 14px; letter-spacing: 0.01em; position: relative; }

.gbanner .gstardeco { position: absolute; font-size: 20px; top: 50%; transform: translateY(-50%); }

.gbanner .gstardeco.l { left: -14px; }

.gbanner .gstardeco.r { right: -14px; }

.gmascotcol { width: 118px; flex: 0 0 auto; align-items: flex-end; justify-content: center; display: none; }

@media (min-width: 920px) {
  .gmascotcol { display: flex; }
}

.gmchar { width: 118px; height: auto; object-fit: contain; filter: drop-shadow(rgba(18, 41, 58, 0.18) 0px 10px 14px); }

.gbottombar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px clamp(14px,3vw,22px) calc(env(safe-area-inset-bottom) + 14px); justify-content: space-between; }

.ghintbtn { display: inline-flex; align-items: center; gap: 7px; background: rgb(255, 255, 255); border-radius: 99px; padding: 12px 18px; box-shadow: rgba(18, 41, 58, 0.08) 0px 3px 10px; font: 800 14px Manrope; color: rgb(11, 107, 168); flex: 0 0 auto; }

.ghintbtn svg { width: 20px; height: 20px; flex: 0 0 auto; }

.grepeatbtn { display: inline-flex; align-items: center; gap: 7px; background: rgb(234, 243, 250); color: rgb(11, 107, 168); border-radius: 99px; padding: 12px 20px; font: 800 14px Manrope; flex: 0 0 auto; white-space: nowrap; }

.grepeatbtn svg { width: 19px; height: 19px; flex: 0 0 auto; }

.gnextbtn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(90deg, rgb(249, 115, 22), rgb(251, 146, 60)); color: rgb(255, 255, 255); border-radius: 99px; padding: 12px 24px; font: 800 14px Manrope; box-shadow: rgba(249, 115, 22, 0.5) 0px 6px 16px -4px; flex: 0 0 auto; white-space: nowrap; }

.gnextbtn svg { width: 19px; height: 19px; flex: 0 0 auto; }

.ghintbtn .gbadge { background: rgb(226, 74, 74); color: rgb(255, 255, 255); border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font: 800 11px Manrope; }

.gside-hint { font: 700 12px Manrope; text-align: center; padding: 16px 8px; color: rgb(154, 167, 174); }

.gopts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }

.gimgcard { background: rgb(255, 255, 255); border-radius: 18px; padding: 16px 10px 12px; box-shadow: rgba(18, 41, 58, 0.07) 0px 4px 14px; border: 3px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.1s; }

.gimgcard .ge { font-size: clamp(46px, 9vw, 64px); line-height: 1; }

.gimgcard .gl { background: rgb(234, 243, 250); color: rgb(11, 107, 168); font: 800 14px Manrope; padding: 6px 14px; border-radius: 10px; }

.gimgcard.correct { border-color: rgb(55, 214, 122); }

.gimgcard.wrong { border-color: rgb(226, 74, 74); animation: 0.4s ease 0s 1 normal none running shakeX; }

.gspkbtn { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(rgb(47, 182, 238), rgb(11, 107, 168)); display: flex; align-items: center; justify-content: center; box-shadow: rgba(11, 107, 168, 0.55) 0px 6px 16px -4px; cursor: pointer; margin: 6px auto; }

.gspkbtn svg { width: 24px; height: 24px; color: rgb(255, 255, 255); }

.gmatchrow { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 8px; }

.gmrow-item { display: flex; align-items: center; gap: 10px; background: rgb(255, 255, 255); border: 2px solid rgb(238, 242, 245); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; cursor: pointer; transition: 0.15s; }

.gmrow-item .gnum { width: 26px; height: 26px; border-radius: 50%; background: rgb(11, 107, 168); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font: 800 12px Manrope; flex: 0 0 auto; }

.gmrow-item .gspkmini { width: 30px; height: 30px; border-radius: 50%; background: rgb(234, 243, 250); color: rgb(11, 107, 168); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.gmrow-item .gspkmini svg { width: 14px; height: 14px; }

.gmrow-item.sel { border-color: rgb(11, 107, 168); }

.gmrow-item.matched { border-color: rgb(55, 214, 122); background: rgb(238, 251, 242); opacity: 0.6; pointer-events: none; }

.gmrow-item.miss { animation: 0.4s ease 0s 1 normal none running shakeX; border-color: rgb(226, 74, 74); }

.gletterbox { display: flex; justify-content: center; gap: 9px; margin: 16px 0px 10px; flex-wrap: wrap; }

.gletterslot { width: 52px; height: 58px; border-radius: 12px; border: 2px dashed rgb(199, 211, 218); background: rgb(247, 250, 252); display: flex; align-items: center; justify-content: center; font: 800 24px "Baloo 2"; color: rgb(11, 107, 168); }

.gletterslot.filled { border-style: solid; background: rgb(255, 255, 255); box-shadow: rgba(18, 41, 58, 0.08) 0px 3px 8px; }

.gletterbank { display: flex; justify-content: center; gap: 9px; margin-top: 18px; flex-wrap: wrap; }

.gletterbank .gtile { width: 52px; height: 58px; border-radius: 12px; background: rgb(255, 255, 255); box-shadow: rgba(18, 41, 58, 0.1) 0px 4px 10px; display: flex; align-items: center; justify-content: center; font: 800 24px "Baloo 2"; color: rgb(20, 35, 46); cursor: pointer; transition: transform 0.1s; }

.gletterbank .gtile:active { transform: scale(0.94); }

.gletterbank .gtile.used { opacity: 0.25; pointer-events: none; }

.gmemogrid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 640px; margin: 8px auto 0px; }

.gmemocard { aspect-ratio: 1 / 1; border-radius: 16px; background: linear-gradient(160deg, rgb(47, 182, 238), rgb(11, 107, 168)); display: flex; align-items: center; justify-content: center; font: 800 15px "Space Grotesk"; color: rgba(255, 255, 255, 0.85); cursor: pointer; box-shadow: rgba(11, 107, 168, 0.3) 0px 5px 12px; position: relative; transition: transform 0.15s; }

.gmemocard .gface { opacity: 0; font-size: 34px; transition: opacity 0.15s; }

.gmemocard.flip { background: rgb(255, 247, 224); box-shadow: rgba(18, 41, 58, 0.1) 0px 5px 12px; }

.gmemocard.flip .gback { display: none; }

.gmemocard.flip .gface { opacity: 1; }

.gmemocard.done { background: rgb(234, 251, 243); box-shadow: none; opacity: 0.65; }

.gmicbtn { width: 88px; height: 88px; border-radius: 50%; background: rgb(255, 255, 255); border: 3px solid rgb(11, 107, 168); display: flex; align-items: center; justify-content: center; margin: 14px auto 8px; cursor: pointer; position: relative; }

.gmicbtn svg { width: 32px; height: 32px; color: rgb(11, 107, 168); }

.gmicbtn.rec { background: rgb(11, 107, 168); }

.gmicbtn.rec svg { color: rgb(255, 255, 255); }

.gsentbubble { flex: 1 1 0%; background: rgb(247, 250, 252); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; font: 700 18px Manrope; color: rgb(20, 35, 46); }

.gsentbubble .gwrong { color: rgb(226, 74, 74); }

.opt.sel { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accSoft); }

.opt[data-opt] { cursor: pointer; }

.st-sec { display: inline-flex; align-items: center; gap: 8px; background: var(--accSoft); color: var(--accInk); border-radius: 999px; padding: 6px 13px; font: 800 10.5px Manrope; letter-spacing: 0.06em; margin-bottom: 12px; }

.st-instr { background: var(--accSoft); border-radius: 14px; padding: 13px 15px; margin-bottom: 16px; color: var(--accInk); font: 700 14px / 1.45 Manrope; display: flex; gap: 10px; align-items: flex-start; }

.st-instr svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }

.st-q { font: 800 clamp(15px, 4.2vw, 19px) / 1.3 "Space Grotesk"; margin: 0px 0px 12px; display: flex; gap: 9px; align-items: flex-start; }

.st-qn { display: inline-flex; width: 24px; height: 24px; border-radius: 7px; background: var(--acc); color: rgb(255, 255, 255); align-items: center; justify-content: center; font: 800 12px "Space Grotesk"; flex: 0 0 auto; margin-top: 1px; }

.st-block { margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }

.st-block:last-of-type { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.st-abc { display: flex; gap: 6px; margin: 8px 0px 4px; }

.st-abc .lbl { width: 24px; height: 24px; border-radius: 7px; background: var(--bg1); display: flex; align-items: center; justify-content: center; font: 800 12px "Space Grotesk"; color: var(--muted); flex: 0 0 auto; }

.st-cols { display: flex; gap: 12px; }

.st-col { flex: 1 1 0%; display: flex; flex-direction: column; gap: 9px; }

.st-mt { background: rgb(255, 255, 255); border: 2px solid var(--line); border-radius: 13px; padding: 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: 0.12s; min-height: 54px; font: 700 14px Manrope; color: var(--ink); }

.st-mt.big { font-size: 15px; }

.st-mt.sel { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accSoft); }

.st-mt.matched { border-color: rgb(14, 158, 99); background: rgb(234, 248, 241); opacity: 0.7; pointer-events: none; }

.st-mt.miss { border-color: rgb(226, 74, 74); animation: 0.4s ease 0s 1 normal none running shakeX; }

.st-tf { display: flex; align-items: center; gap: 11px; background: rgb(255, 255, 255); border: 1.5px solid var(--line); border-radius: 14px; padding: 11px; margin-bottom: 10px; }

.st-tf .pic { width: 52px; height: 52px; border-radius: 12px; background: var(--bg1); display: flex; align-items: center; justify-content: center; font-size: 28px; flex: 0 0 auto; }

.st-tf .sen { flex: 1 1 0%; font: 600 14px Manrope; }

.st-tfb { width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--line); background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 19px; cursor: pointer; flex: 0 0 auto; transition: 0.12s; }

.st-tfb.sel { border-color: var(--acc); background: var(--accSoft); }

.st-yn { display: flex; gap: 8px; flex: 0 0 auto; }

.st-ynb { padding: 9px 15px; border-radius: 11px; border: 2px solid var(--line); background: rgb(255, 255, 255); font: 800 13px Manrope; cursor: pointer; transition: 0.12s; }

.st-ynb.sel { border-color: var(--acc); background: var(--accSoft); color: var(--accInk); }

.st-scene { border-radius: 16px; background: linear-gradient(160deg, rgb(223, 241, 251), rgb(234, 247, 239)); padding: 18px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-size: clamp(30px, 8vw, 44px); margin-bottom: 16px; }

.st-pal { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; justify-content: center; }

.st-sw { width: 38px; height: 38px; border-radius: 11px; cursor: pointer; border: 3px solid rgb(255, 255, 255); box-shadow: 0 0 0 1.5px var(--line); transition: 0.12s; }

.st-sw.sel { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.08); }

.st-objs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.st-obj { aspect-ratio: 1 / 1; border-radius: 16px; background: rgb(255, 255, 255); border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: clamp(28px, 7.5vw, 40px); cursor: pointer; transition: 0.15s; position: relative; }

.st-obj .nm { font: 700 9px Manrope; color: var(--faint); margin-top: 2px; }

.st-obj .dot { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(255, 255, 255); display: none; }

.st-obj.coloured .dot { display: block; }

.st-sp { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; flex-wrap: wrap; }

.st-sp .pic { width: 54px; height: 54px; border-radius: 14px; background: var(--bg1); display: flex; align-items: center; justify-content: center; font-size: 30px; flex: 0 0 auto; }

.st-slots { display: flex; gap: 5px; }

.st-slot { width: 34px; height: 42px; border-radius: 9px; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; font: 800 19px "Space Grotesk"; cursor: pointer; background: rgb(255, 255, 255); color: var(--ink); }

.st-slot.has { border-style: solid; border-color: var(--acc); }

.st-tiles { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }

.st-tile { width: 34px; height: 42px; border-radius: 9px; background: rgb(255, 255, 255); box-shadow: 0 3px 0 var(--line); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font: 800 19px "Space Grotesk"; cursor: pointer; transition: 0.1s; color: var(--ink); }

.st-tile:active { transform: translateY(2px); }

.st-tile.used { opacity: 0.22; pointer-events: none; }

.st-pass { font: 500 15px / 2.15 Manrope; color: var(--ink2); margin-bottom: 16px; }

.st-blank { display: inline-flex; min-width: 72px; height: 28px; border-bottom: 2px solid var(--acc); align-items: center; justify-content: center; font: 800 13px Manrope; color: var(--acc); cursor: pointer; padding: 0px 5px; vertical-align: middle; }

.st-blank.on { background: var(--accSoft); border-radius: 6px 6px 0px 0px; }

.st-bank { display: flex; gap: 8px; flex-wrap: wrap; }

.st-word { background: rgb(255, 255, 255); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 13px; font: 700 14px Manrope; cursor: pointer; box-shadow: 0 2px 0 var(--line); color: var(--ink); }

.st-word.used { opacity: 0.3; pointer-events: none; }

.st-inrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.st-in { flex: 1 1 0%; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; font: 700 15px Manrope; outline: none; color: var(--ink); }

.st-in:focus { border-color: var(--acc); }

.st-suf { font: 700 14px Manrope; color: var(--muted); }

.st-hint { width: 56px; height: 56px; border-radius: 14px; background: var(--bg1); display: flex; align-items: center; justify-content: center; font-size: 30px; flex: 0 0 auto; }

.st-scard { display: flex; align-items: center; gap: 13px; background: rgb(255, 255, 255); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; }

.st-scard .n { width: 40px; height: 40px; border-radius: 12px; background: var(--accSoft); color: var(--accInk); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }

.gmain-scroll { flex: 1 1 0%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 0px clamp(10px, 2.2vw, 22px) 10px; min-height: 0px; }

.gmain-scroll.allow-scroll { overflow-y: auto; justify-content: flex-start; }

.gmain-scroll.allow-scroll::-webkit-scrollbar { width: 0px; }

.gfit { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.4vh, 14px); min-height: 0px; flex: 1 1 0%; }

.gfit .opts, .gfit .kgrid { width: 100%; max-height: 100%; }

.gfit .opt, .gfit .choice { min-height: 0px; }

.gfit .oe { font-size: clamp(26px, 7.4vh, 60px); line-height: 1; }

.gfit .ol { font-size: clamp(11px, 1.8vh, 15px); }

.kghub { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(7px, 1.4vh, 13px); width: 100%; align-content: center; }

.kgtile > div:first-child { aspect-ratio: 1 / 1; max-height: clamp(56px, 12vh, 104px); margin: 0px auto; width: 100%; }

@media (min-aspect-ratio: 4 / 3) and (min-width: 900px) {
  .wrap { max-width: 1180px; }
  .kwrap { max-width: 1100px; }
  .gbody { gap: 18px; padding: 8px clamp(18px, 2.4vw, 34px) 12px; }
  .gside { width: 150px; }
  .gmain { border-radius: 26px; }
  .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
  .menu-grid > * { margin-bottom: 0px !important; }
  .kgtile > div:first-child { max-height: clamp(70px, 14vh, 120px); }
}

@media (min-aspect-ratio: 4 / 3) and (min-width: 1180px) {
  .wrap { max-width: 1320px; }
  .kwrap { max-width: 1240px; }
  .gside { width: 168px; }
}

@media (max-height: 520px) {
  .gtopbar { padding: 8px 14px 4px; }
  .gbottombar { padding: 6px 14px 8px; }
  .gbanner { padding: 7px 18px; font-size: clamp(12px, 2.6vw, 15px); }
  .gfit { gap: 6px; }
}

.view .scroll { overflow-y: auto; }

.kgrid { padding-bottom: 18px; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: clamp(10px, 1.6vw, 18px) !important; }

@media (max-width: 900px) {
  .kgrid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 560px) {
  .kgrid { grid-template-columns: repeat(2, 1fr) !important; }
}

.ktopic { overflow: hidden; padding: 0px 0px 12px !important; gap: 0px !important; border-radius: 22px !important; }

.ktopic .tsq { overflow: hidden; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; max-width: none !important; border-radius: 22px 22px 0px 0px !important; padding: 0px !important; font-size: clamp(30px, 6vw, 44px) !important; }

.ktopic .tsq img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; }

.ktopic .tname { padding: 0px 6px; margin-top: 10px !important; font: 800 clamp(13px, 1.15vw, 16px) / 1.15 "Baloo 2" !important; }

.ktopic .tstars { margin-top: 6px; }

:root { --vimg: clamp(84px,18vh,150px); --vimg-sm: clamp(56px,11vh,92px); }

.vimg, .gfit .oe, .opt .oe { align-items: center; justify-content: center; margin: 0px auto; overflow: hidden; width: var(--vimg-sm) !important; height: var(--vimg-sm) !important; font-size: calc(var(--vimg-sm) * .62) !important; line-height: var(--vimg-sm) !important; display: flex !important; }

.vimg img, .opt .oe img { display: block; width: 100% !important; height: 100% !important; object-fit: contain !important; }

.vcard-img { display: flex; align-items: center; justify-content: center; font-size: calc(var(--vimg) * .62); margin: 0px auto; background: rgb(244, 248, 251); border-radius: 22px; overflow: hidden; width: var(--vimg) !important; height: var(--vimg) !important; }

.vcard-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

.gmain-scroll { padding-bottom: clamp(8px, 1.6vh, 16px) !important; }

.gspkbtn { flex: 0 0 auto; margin-bottom: 2px; width: clamp(46px, 7.2vh, 60px) !important; height: clamp(46px, 7.2vh, 60px) !important; }

.gbottombar { position: relative; z-index: 6; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55)); padding: clamp(6px,1.2vh,12px) clamp(14px,3vw,22px) calc(env(safe-area-inset-bottom) + clamp(8px,1.6vh,16px)) !important; }

.gmascotcol { z-index: 1; pointer-events: none; }

.gmchar { width: clamp(78px, 10vw, 118px) !important; }

.gbrand { z-index: 5; }

.gtopbar { position: relative; z-index: 5; flex: 0 0 auto; }

.gfit { padding: 2px 0px; gap: clamp(5px, 1.1vh, 12px) !important; }

.gfit .opts { align-content: center; gap: clamp(7px, 1.3vh, 14px) !important; }

.gfit .opt { border-radius: 16px; padding: clamp(6px, 1.1vh, 12px) !important; }

.gfit .ol { font-size: clamp(11px, 1.7vh, 15px) !important; margin-top: 4px; }

.rmwrap { position: relative; width: 100%; height: 100%; overflow: auto hidden; }

.rmwrap::-webkit-scrollbar { height: 0px; }

.rmstage { position: relative; height: 100%; min-height: 420px; margin: 0px auto; }

.rmnode { position: absolute; width: clamp(58px, 8.6vh, 84px); height: clamp(58px, 8.6vh, 84px); border-radius: 50%; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.14) 0px 6px 0px; cursor: pointer; transition: transform 0.12s; z-index: 3; overflow: hidden; }

.rmnode:active { transform: translateY(3px); }

.rmnode img { width: 100%; height: 100%; object-fit: cover; }

.rmlab { position: absolute; transform: translateX(-50%); background: rgb(255, 255, 255); border-radius: 11px; padding: 3px 10px; font: 800 11.5px Nunito; color: var(--kink); box-shadow: rgba(0, 0, 0, 0.13) 0px 3px 7px; white-space: nowrap; z-index: 4; }

.rmsticker { position: absolute; font-size: clamp(26px, 4.4vh, 44px); z-index: 2; filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 5px 7px); pointer-events: none; }

.rmdeco { position: absolute; z-index: 1; opacity: 0.9; pointer-events: none; }

.k2fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(7px, 1.4vh, 12px); width: 100%; max-width: 560px; margin: 0px auto; }

.k2card { aspect-ratio: 3 / 4; perspective: 700px; cursor: pointer; max-height: clamp(64px, 15vh, 122px); }

.k2in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(0.4, 1.4, 0.6, 1); }

.k2card.open .k2in { transform: rotateY(180deg); }

.k2back, .k2face { position: absolute; inset: 0px; border-radius: 14px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; }

.k2back { background: linear-gradient(150deg, rgb(56, 189, 248), rgb(11, 107, 168)); box-shadow: rgba(11, 78, 126, 0.35) 0px 4px 0px; }

.k2face { background: rgb(255, 255, 255); transform: rotateY(180deg); box-shadow: 0 4px 0 var(--cardSh); border: 3px solid transparent; color: var(--kink); text-align: center; padding: 4px; overflow: hidden; }

.k2card.hit .k2face { border-color: rgb(47, 211, 165); background: rgb(234, 251, 243); }

.k2chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgb(255, 255, 255); border-radius: 14px; padding: 9px 15px; font: 800 clamp(14px, 2.6vh, 19px) "Baloo 2"; color: var(--kink); box-shadow: 0 4px 0 var(--cardSh); cursor: grab; user-select: none; touch-action: none; transition: transform 0.1s; }

.k2chip:active { transform: translateY(2px); }

.k2chip.k2sel { outline: 3px solid var(--korange); transform: scale(1.06); }

.k2chip.k2used { opacity: 0.25; pointer-events: none; }

.k2ghost { position: fixed; z-index: 999; pointer-events: none; transform: translate(-50%, -60%) scale(1.1) rotate(-3deg); opacity: 0.95; margin: 0px; }

.k2slot { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; min-height: 40px; border: 2.5px dashed rgb(201, 214, 224); border-radius: 12px; background: rgb(255, 255, 255); font: 800 11.5px Nunito; color: rgb(170, 184, 196); padding: 4px 10px; cursor: pointer; transition: 0.15s; }

.k2slot.k2ok { border-style: solid; border-color: rgb(47, 211, 165); background: rgb(234, 251, 243); color: var(--kink); font: 800 clamp(14px, 2.6vh, 18px) "Baloo 2"; }

.k2slot.k2no { border-color: rgb(255, 107, 107); animation: 0.4s ease 0s 1 normal none running shakeX; }

.k2row { display: flex; align-items: center; gap: 10px; background: rgb(255, 255, 255); border-radius: 16px; padding: 7px 12px; box-shadow: 0 4px 0 var(--cardSh); margin-bottom: 8px; width: 100%; max-width: 560px; }

.k2pic { font-size: clamp(22px, 4.4vh, 34px); line-height: 1; }

.k2vi { flex: 1 1 0%; font: 800 clamp(13px, 2.4vh, 17px) "Baloo 2"; color: var(--kink); text-align: left; }

.k2tray { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; width: 100%; }

.k2big { font-size: clamp(44px, 10.5vh, 84px); line-height: 1; text-align: center; }

.k2sent { background: rgb(255, 255, 255); border-radius: 18px; padding: clamp(10px, 2vh, 16px) 18px; box-shadow: 0 5px 0 var(--cardSh); font: 800 clamp(16px, 3vh, 24px) "Baloo 2"; color: var(--kink); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 8px auto; max-width: 580px; }

@keyframes k2float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-13px); }
}

.k2bubwrap { display: flex; gap: clamp(8px, 2vw, 18px); justify-content: center; align-items: center; flex-wrap: wrap; }

.k2bub { width: clamp(76px, 15vh, 120px); height: clamp(76px, 15vh, 120px); border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgb(234, 248, 255), rgb(155, 220, 248) 62%, rgb(95, 195, 238)); box-shadow: rgba(11, 107, 168, 0.14) -6px -8px 0px inset, rgba(11, 78, 126, 0.16) 0px 6px 0px; display: flex; align-items: center; justify-content: center; font: 800 clamp(13px, 2.4vh, 18px) "Baloo 2"; color: rgb(10, 74, 118); cursor: pointer; animation: 2.6s ease-in-out 0s infinite normal none running k2float; text-align: center; padding: 6px; }

.k2bub.wrong { animation: 0.4s ease 0s 1 normal none running shakeX; }

.k2pop { animation: 0.35s ease 0s 1 normal forwards running k2popout !important; }

@keyframes k2popout { 
  100% { transform: scale(0); opacity: 0; }
}

.k2grid { display: grid; gap: 5px; width: 100%; max-width: 430px; margin: 0px auto; }

.k2cell { aspect-ratio: 1 / 1; background: rgb(255, 255, 255); border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 clamp(13px, 2.5vh, 20px) "Space Grotesk"; color: var(--ink); box-shadow: 0 3px 0 var(--line); cursor: pointer; user-select: none; }

.k2cell.on { background: rgb(255, 233, 168); box-shadow: rgb(245, 179, 1) 0px 3px 0px; }

.k2cell.win { background: rgb(191, 243, 223); box-shadow: rgb(47, 211, 165) 0px 3px 0px; color: rgb(14, 123, 91); }

.k2cell.badcell { animation: 0.35s ease 0s 1 normal none running shakeX; }

.k2holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 1.4vh, 12px); width: 100%; max-width: 560px; margin: 0px auto; }

.k2hole { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; max-height: clamp(74px, 15vh, 130px); }

.k2mole { position: absolute; bottom: 8%; width: 78%; transform: translateY(140%); transition: transform 0.18s; cursor: pointer; text-align: center; }

.k2hole.up .k2mole { transform: translateY(0px); }

.k2mword { display: block; background: rgb(255, 255, 255); border-radius: 10px; font: 800 clamp(11px, 2vh, 15px) "Baloo 2"; color: var(--kink); box-shadow: 0 3px 0 var(--cardSh); padding: 2px 4px; margin: 0px auto 2px; max-width: 96%; }

.k2balwrap { display: flex; gap: clamp(6px, 1.6vw, 16px); justify-content: center; align-items: flex-end; flex-wrap: wrap; }

.k2balloon { width: clamp(56px, 11vh, 90px); cursor: pointer; animation: 3s ease-in-out 0s infinite normal none running k2float; }

.k2balloon.wrong { animation: 0.4s ease 0s 1 normal none running shakeX; }

.k2bins { display: flex; gap: clamp(10px, 2vw, 18px); width: 100%; max-width: 600px; margin: 6px auto 0px; }

.k2bin { flex: 1 1 0%; min-height: clamp(96px, 18vh, 150px); border-radius: 18px; border: 3px dashed rgb(201, 214, 224); background: rgba(255, 255, 255, 0.72); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 8px; cursor: pointer; transition: 0.15s; }

.k2bin.k2no { border-color: rgb(255, 107, 107); animation: 0.4s ease 0s 1 normal none running shakeX; }

.k2bin .k2binlab { font: 800 clamp(13px, 2.4vh, 17px) "Baloo 2"; color: var(--kink); }

.k2bin .k2got { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; font-size: clamp(18px, 3.6vh, 28px); }

.k2timer { font: 800 clamp(16px, 3vh, 24px) "Baloo 2"; color: var(--korangeInk); background: rgb(255, 255, 255); border-radius: 999px; padding: 5px 16px; box-shadow: 0 4px 0 var(--cardSh); display: inline-block; }

.k2shadow { filter: brightness(0) opacity(0.72); }

.k2tfbtn { width: clamp(84px, 16vh, 130px); height: clamp(84px, 16vh, 130px); border-radius: 26px; background: rgb(255, 255, 255); box-shadow: 0 6px 0 var(--cardSh); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.1s; }

.k2tfbtn:active { transform: translateY(3px); }

.k2tfbtn.wrong { animation: 0.4s ease 0s 1 normal none running shakeX; }

.pgtile { display: flex; align-items: center; gap: 10px; background: rgb(255, 255, 255); border: 2px solid var(--line); border-radius: 13px; padding: 12px; cursor: pointer; font: 700 14px Manrope; transition: 0.12s; user-select: none; }

.pgtile.pgsel { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accSoft); }

.pgtile.pgok { border-color: rgb(47, 211, 165); background: rgb(234, 248, 241); opacity: 0.65; pointer-events: none; }

.pgtile.pgno { border-color: rgb(226, 74, 74); animation: 0.4s ease 0s 1 normal none running shakeX; }

.pgblank { display: inline-flex; align-items: center; justify-content: center; width: clamp(24px, 6.5vw, 38px); height: clamp(36px, 9vw, 48px); margin: 2px 3px; border-bottom: 4px dashed rgb(201, 214, 224); font: 800 clamp(17px, 4.6vw, 26px) "Space Grotesk"; color: var(--ink); }

.pgblank.pgfill { border-bottom-style: solid; border-bottom-color: rgb(47, 211, 165); color: rgb(22, 163, 74); animation: 0.35s ease 0s 1 normal none running pop; }

.pgkey { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 46px; padding: 0px 6px; background: rgb(255, 255, 255); border: 2px solid var(--line); border-radius: 12px; font: 800 18px "Space Grotesk"; cursor: pointer; user-select: none; transition: 0.12s; }

.pgkey:active { transform: translateY(2px); }

.pgkey.pgok { border-color: rgb(47, 211, 165); background: rgb(234, 248, 241); color: rgb(22, 163, 74); opacity: 0.55; pointer-events: none; }

.pgkey.pgno { border-color: rgb(226, 74, 74); animation: 0.4s ease 0s 1 normal none running shakeX; }

.pgnum { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: rgb(255, 255, 255); display: none; align-items: center; justify-content: center; font: 800 12px "Space Grotesk"; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px; }

.pgline { min-height: 52px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; background: rgb(255, 255, 255); border: 2px dashed rgb(201, 214, 224); border-radius: 14px; padding: 10px 14px; font: 800 clamp(16px, 4.6vw, 21px) "Space Grotesk"; color: var(--ink); text-align: center; }

.pgline.pgfull { border-style: solid; border-color: rgb(47, 211, 165); background: rgb(234, 248, 241); color: rgb(22, 163, 74); }

.pghole { aspect-ratio: 1 / 1; background: rgb(234, 240, 244); border-radius: 16px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }

.pgmole { width: 100%; height: 88%; background: rgb(255, 255, 255); border: 2px solid var(--line); border-radius: 14px 14px 0px 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; user-select: none; animation: 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0s 1 normal both running pgpop; transition: 0.12s; }

.pgmole:active { transform: translateY(3px); }

.pgmole.pgok { border-color: rgb(47, 211, 165); background: rgb(234, 248, 241); }

.pgmole.pgno { border-color: rgb(226, 74, 74); animation: 0.4s ease 0s 1 normal none running shakeX; }

@keyframes pgpop { 
  0% { transform: translateY(85%); opacity: 0.4; }
  100% { transform: translateY(0px); opacity: 1; }
}

.pgwin { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 14px; font: 600 16px Manrope; outline: none; }

.pgwin:focus { border-color: var(--acc); }

.rw2 { position: relative; width: 100%; max-width: 560px; margin: 0px auto; overflow: hidden; }

.rw2 svg { position: absolute; left: 0px; top: 0px; width: 100%; z-index: 0; }

.rw2node { position: absolute; width: 84px; height: 84px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.14) 0px 6px 0px, rgba(0, 0, 0, 0.14) 0px 10px 22px; overflow: hidden; cursor: pointer; z-index: 4; border: 4px solid rgb(255, 255, 255); transition: transform 0.15s; transform: translate(-50%, -50%); }

.rw2node:active { transform: translate(-50%, -50%) scale(0.94); }

.rw2node.done { border-color: rgb(55, 214, 122); }

.rw2node.cur { border-color: rgb(255, 122, 69); animation: 1.6s ease-in-out 0s infinite normal none running rw2pulse; }

.rw2node.lock { cursor: default; border-color: rgb(220, 227, 232); }

@keyframes rw2pulse { 
  0%, 100% { box-shadow: rgba(0, 0, 0, 0.14) 0px 6px 0px, rgba(255, 122, 69, 0.45) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(0, 0, 0, 0.14) 0px 6px 0px, rgba(255, 122, 69, 0) 0px 0px 0px 14px; }
}

.rw2lab { position: absolute; transform: translateX(-50%); z-index: 5; background: rgb(255, 255, 255); border-radius: 12px; padding: 3px 12px; font: 800 12px "Baloo 2"; color: var(--kink); box-shadow: 0 3px 0 var(--cardSh); white-space: nowrap; }

.rw2lab.done { background: rgb(234, 251, 243); color: rgb(31, 157, 91); }

.rw2lab.cur { background: var(--korange); color: rgb(255, 255, 255); box-shadow: rgb(212, 90, 40) 0px 3px 0px; }

.rw2star { position: absolute; z-index: 6; font-size: 20px; transform: translate(-50%, -50%); filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 2px); }

.rw2deco { position: absolute; z-index: 1; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(rgba(0, 0, 0, 0.12) 0px 3px 3px); }

.rw2sign { position: absolute; z-index: 2; transform: translate(-50%, -50%); background: rgb(185, 122, 69); border: 3px solid rgb(138, 90, 51); color: rgb(255, 255, 255); border-radius: 10px; padding: 3px 10px; font: 800 11px "Baloo 2"; box-shadow: rgb(122, 76, 40) 0px 3px 0px; pointer-events: none; }

.rw2sign::after { content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); width: 6px; height: 14px; background: rgb(138, 90, 51); border-radius: 3px; }

.rw2banner { position: absolute; transform: translateX(-50%); z-index: 5; text-align: center; pointer-events: none; }

.rw2mascot { position: absolute; z-index: 7; transform: translateX(-50%); text-align: center; width: 100px; pointer-events: none; }

* { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }

button { cursor: default; }

button { pointer-events: none; }

.view.on { animation: auto ease 0s 1 normal none running none; }

