[v-cloak] { display: none !important; }
body.ts-cutscene-active { overflow: hidden; }

@font-face {
	font-family: "Sriracha Local";
	src: url('/assets/fonts/sriracha/Sriracha-Regular.ttf?v=20260806.1') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--ts-indigo: #4f46e5;
	--ts-indigo-hover: #4338ca;
	--ts-indigo-deep: #17133e;
	--ts-night: #07142c;
	--ts-night-soft: #10275f;
	--ts-paper: #fffaf0;
	--ts-paper-deep: #f3e3be;
	--ts-talisman: #f6cf63;
	--ts-talisman-soft: #fff1b5;
	--ts-cinnabar: #b8342e;
	--ts-cinnabar-dark: #84251f;
	--ts-jade: #3f7d51;
	--ts-emerald: #059669;
	--ts-rose: #e11d48;
	--ts-ink: #172033;
	--ts-muted: #5e6674;
	--ts-line: #dacba9;
	--ts-focus: #93c5fd;
	--ts-soft-shadow: 0 18px 38px -26px rgba(7, 20, 44, .5);
	--ts-cta-shadow: 0 14px 28px -18px rgba(79, 70, 229, .76);
	--ts-space-xs: 8px;
	--ts-space-sm: 12px;
	--ts-space-md: 18px;
	--ts-space-lg: 28px;
	--ts-space-xl: 44px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body, button, textarea { font-family: "Sarabun", sans-serif; }
button, a, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--ts-focus);
	outline-offset: 3px;
}
button:disabled { cursor: not-allowed; opacity: .55; }

.ts-body {
	margin: 0;
	min-width: 320px;
	background: #f8fafc;
	color: var(--ts-ink);
	font-size: 1rem;
	line-height: 1.55;
}
.ts-app { min-height: 100vh; }

.ts-system-state {
	min-height: 100vh;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: radial-gradient(circle at 50% 25%, #eef2ff, #f8fafc 42%);
}
.ts-system-state h1,
.ts-system-state p { margin: 0; }
.ts-system-state p,
.ts-system-state small { color: var(--ts-muted); }
.ts-loading-seal,
.ts-error-seal {
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--ts-talisman-soft);
	color: var(--ts-cinnabar);
	font-size: 28px;
	box-shadow: var(--ts-soft-shadow);
	animation: ts-seal-breathe 1.4s cubic-bezier(.22, 1, .36, 1) infinite alternate;
}
.ts-error-seal { background: #fff1f2; color: var(--ts-rose); animation: none; }

.ts-primary,
.ts-secondary,
.ts-ghost-on-dark,
.ts-stamp {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 10px 18px;
	border-radius: 12px;
	font: inherit;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s cubic-bezier(.22, 1, .36, 1), background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ts-primary {
	border: 1px solid var(--ts-indigo);
	background: var(--ts-indigo);
	color: #fff;
	box-shadow: var(--ts-cta-shadow);
}
.ts-primary:hover:not(:disabled) { background: var(--ts-indigo-hover); border-color: var(--ts-indigo-hover); transform: translateY(-2px); }
.ts-primary-large { min-height: 52px; padding: 12px 22px; font-size: 1.04rem; }
.ts-secondary {
	border: 1px solid #c7d2fe;
	background: #fff;
	color: var(--ts-indigo);
	box-shadow: 0 8px 20px -18px rgba(49,46,129,.6);
}
.ts-secondary:hover { background: #eef2ff; border-color: #a5b4fc; transform: translateY(-1px); }
.ts-ghost-on-dark {
	border: 1px solid rgba(255,255,255,.42);
	background: rgba(7,20,44,.46);
	color: #fff;
}
.ts-ghost-on-dark:hover { background: rgba(7,20,44,.72); transform: translateY(-2px); }

.ts-intro {
	position: relative;
	min-height: 100vh;
	display: grid;
	align-items: end;
	overflow: hidden;
	background: var(--ts-night);
	color: #fff;
}
.ts-intro-image,
.ts-intro-shade {
	position: absolute;
	inset: 0;
}
.ts-intro-image {
	background-image: url('/assets/game/taddhita-seal/concepts/key-art-fox-battle.webp?v=20260807.1');
	background-size: cover;
	background-position: center;
	transform: scale(1.02);
	animation: ts-intro-image 1.2s cubic-bezier(.22, 1, .36, 1) both;
}
.ts-intro-shade {
	background:
		linear-gradient(90deg, rgba(4,11,27,.86) 0%, rgba(4,11,27,.56) 42%, rgba(4,11,27,.08) 72%),
		linear-gradient(0deg, rgba(4,11,27,.96) 0%, transparent 62%);
}
.ts-intro-back {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 13px;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 12px;
	background: rgba(4,11,27,.58);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
}
.ts-intro-copy {
	position: relative;
	z-index: 2;
	width: min(730px, calc(100% - 36px));
	margin: 0 auto 7vh clamp(20px, 6vw, 90px);
	padding: 24px 0;
	animation: ts-copy-enter .75s .15s cubic-bezier(.22, 1, .36, 1) both;
}
.ts-story-line { margin: 0 0 10px; color: #dbeafe; font-weight: 700; }
.ts-intro h1 {
	margin: 0;
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 800;
	line-height: .96;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.ts-intro h2 { margin: 10px 0 0; color: #f6cf63; font-size: clamp(1.25rem, 3vw, 2rem); }
.ts-intro blockquote {
	max-width: 34rem;
	margin: 26px 0 16px;
	font-family: "Sriracha Local", "Sarabun", sans-serif;
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	line-height: 1.65;
	color: #fef3c7;
}
.ts-intro-copy > p:last-of-type { max-width: 65ch; color: #e2e8f0; }
.ts-intro-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.ts-due-callout {
	width: fit-content;
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 18px;
	padding: 10px 13px;
	border: 1px solid rgba(246,207,99,.55);
	border-radius: 12px;
	background: rgba(7,20,44,.72);
	color: #fef3c7;
}
.ts-due-callout > i { color: var(--ts-talisman); font-size: 1.2rem; }
.ts-due-callout strong,
.ts-due-callout small { display: block; }
.ts-due-callout small { color: #dbeafe; }

.ts-chapter-atlas {
	min-height: 100vh;
	padding-bottom: var(--ts-space-xl);
	background: #07142c;
	color: #fff;
}
.ts-atlas-head {
	position: relative;
	min-height: 310px;
	display: flex;
	align-items: end;
	padding: 100px max(24px, calc((100vw - 1180px) / 2)) var(--ts-space-xl);
	overflow: hidden;
	background-image:
		linear-gradient(90deg, rgba(4,11,27,.94), rgba(4,11,27,.62) 60%, rgba(4,11,27,.22)),
		linear-gradient(0deg, #07142c, transparent 68%),
		url('/assets/game/taddhita-seal/concepts/key-art-fox-battle.webp?v=20260807.1');
	background-position: center;
	background-size: cover;
}
.ts-atlas-head > div { position: relative; max-width: 760px; }
.ts-atlas-head h1 {
	margin: 0 0 var(--ts-space-sm);
	font-size: clamp(2.25rem, 6vw, 4.75rem);
	line-height: 1;
	letter-spacing: -.03em;
	text-wrap: balance;
}
.ts-atlas-head p { max-width: 70ch; margin: 0; color: #dbeafe; font-size: 1.04rem; }
.ts-chapter-list {
	width: min(1180px, calc(100% - 36px));
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ts-space-md);
	margin: 0 auto;
	padding: var(--ts-space-lg) 0 0;
}
.ts-chapter-card {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 14px;
	background: #0b1b35;
	transition: border-color .18s ease, background-color .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.ts-chapter-card:hover { transform: translateY(-2px); border-color: var(--ts-chapter-accent); background: #102443; }
.ts-chapter-card.is-complete { border-color: color-mix(in srgb, var(--ts-chapter-accent) 68%, #fff 32%); }
.ts-chapter-open {
	width: 100%;
	min-height: 154px;
	display: grid;
	grid-template-columns: 44px 58px minmax(0,1fr) 24px;
	align-items: center;
	gap: var(--ts-space-sm);
	padding: var(--ts-space-md);
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.ts-chapter-number { align-self: start; color: var(--ts-chapter-accent); font-size: 1.05rem; font-weight: 900; }
.ts-chapter-emblem {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--ts-chapter-soft);
	color: #172033;
	font-size: 1.35rem;
}
.ts-chapter-copy { min-width: 0; display: grid; gap: 3px; }
.ts-chapter-copy strong { color: #fff; font-size: 1.2rem; line-height: 1.25; }
.ts-chapter-copy small { color: var(--ts-chapter-soft); font-weight: 700; }
.ts-chapter-copy em { color: #bfdbfe; font-size: .8rem; font-style: normal; }
.ts-chapter-copy b { color: #e2e8f0; font-size: .78rem; }
.ts-chapter-progress { height: 5px; overflow: hidden; margin-top: var(--ts-space-xs); border-radius: 999px; background: rgba(255,255,255,.14); }
.ts-chapter-progress i { height: 100%; display: block; border-radius: inherit; background: var(--ts-chapter-accent); }
.ts-chapter-open > .fa-chevron-right { color: var(--ts-chapter-accent); }
.ts-chapter-review {
	width: 100%;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ts-space-xs);
	padding: var(--ts-space-xs) var(--ts-space-md);
	border: 0;
	border-top: 1px solid rgba(255,255,255,.13);
	background: color-mix(in srgb, var(--ts-chapter-accent) 18%, #07142c 82%);
	color: #fff;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}
.ts-chapter-review:hover { background: color-mix(in srgb, var(--ts-chapter-accent) 28%, #07142c 72%); }

.ts-tutorial,
.ts-immediate {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 84px 18px 30px;
	background:
		radial-gradient(circle at 14% 10%, rgba(246,207,99,.16), transparent 20rem),
		linear-gradient(135deg, #07142c, #17133e);
	color: #fff;
}
.ts-tutorial { position: relative; }
.ts-tutorial-card,
.ts-immediate-card {
	width: min(720px, 100%);
	padding: clamp(22px, 5vw, 46px);
	border: 1px solid rgba(246,207,99,.42);
	border-radius: 16px;
	background: rgba(255,250,240,.97);
	color: var(--ts-ink);
	box-shadow: 0 28px 60px -34px rgba(0,0,0,.9);
}
.ts-tutorial-progress { height: 7px; overflow: hidden; margin-bottom: 24px; border-radius: 999px; background: #e5e7eb; }
.ts-tutorial-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--ts-indigo),var(--ts-emerald)); }
.ts-tutorial h1,
.ts-immediate h1 { margin: 0 0 18px; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.12; letter-spacing: -.025em; }
.ts-tutorial-word { display: grid; place-items: center; gap: 4px; margin: 24px 0; padding: 24px; border-radius: 14px; background: #fff7df; }
.ts-tutorial-word strong { color: #71261f; font-size: clamp(3.5rem, 11vw, 6rem); line-height: 1; }
.ts-tutorial-word span { color: var(--ts-muted); font-weight: 800; }
.ts-forge-demo,
.ts-forge-formula {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0;
	padding: 22px;
	border: 1px solid #e7c36d;
	border-radius: 14px;
	background:
		linear-gradient(rgba(255,250,240,.58),rgba(255,250,240,.58)),
		url('/assets/game/taddhita-seal/concepts/talisman-paper-texture.webp?v=20260807.1') center/cover;
	font-size: clamp(1.45rem, 4vw, 2.15rem);
	font-weight: 900;
}
.ts-forge-demo em,
.ts-forge-formula em { padding: 5px 12px; border-radius: 8px; background: var(--ts-talisman); color: #71261f; font-style: normal; }
.ts-forge-demo strong,
.ts-forge-formula strong { color: var(--ts-cinnabar); }
.ts-worked-analysis { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.ts-worked-analysis span { padding: 9px 13px; border: 1px solid #c9aa67; border-radius: 10px; background: #fff7df; color: #3f2d1c; font-size: clamp(1rem,3vw,1.35rem); font-weight: 900; }
.ts-tutorial-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.ts-tutorial-skip { min-height: 44px; display: block; margin: 12px auto -12px; padding: 8px 12px; border: 0; background: transparent; color: #4f46e5; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

.ts-sync-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	width: fit-content;
	margin-top: 12px;
	padding: 5px 10px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 999px;
	background: rgba(5,15,38,.58);
	color: #e0e7ff;
	font-size: .76rem;
	font-weight: 800;
}
.ts-sync-status.is-saved { border-color: rgba(110,231,183,.48); color: #a7f3d0; }
.ts-sync-status.is-error { border-color: rgba(253,186,116,.5); color: #fed7aa; }
.ts-command-sync { display: inline-block; margin-left: 5px; color: #a7f3d0; }

.ts-game-shell {
	min-height: 100vh;
	background:
		radial-gradient(circle at 88% 0%, rgba(79,70,229,.08), transparent 26rem),
		#f8fafc;
}
.ts-command {
	position: sticky;
	top: 0;
	z-index: 40;
	min-height: 68px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px clamp(12px, 3vw, 34px);
	background: var(--ts-night-soft);
	color: #fff;
	box-shadow: 0 8px 18px -16px rgba(7,20,44,.9);
}
.ts-command-back,
.ts-command-character,
.ts-command-sound,
.ts-command-reset {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border: 1px solid rgba(255,255,255,.24);
	border-radius: 12px;
	background: rgba(255,255,255,.08);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
.ts-command-character { position: relative; overflow: visible; padding: 2px; border-color: rgba(246,207,99,.72); background: #111c39; }
.ts-command-character img { width: 36px; height: 36px; display: block; border-radius: 9px; object-fit: cover; object-position: center 24%; }
.ts-command-character span { position: absolute; right: -6px; bottom: -5px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--ts-night-soft); border-radius: 999px; background: var(--ts-talisman); color: var(--ts-cinnabar-dark); font-size: .7rem; font-weight: 950; line-height: 1; }
.ts-command-sound.is-on { border-color: rgba(246,207,99,.72); background: rgba(246,207,99,.16); color: var(--ts-talisman); }
.ts-command-reset.is-armed { border-color: #fda4af; background: #be123c; color: #fff; animation: ts-restart-arm .6s ease infinite alternate; }
.ts-brand { display: flex; align-items: center; gap: 10px; min-width: 245px; }
.ts-brand-mark {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--ts-talisman);
	color: var(--ts-cinnabar-dark);
}
.ts-brand small,
.ts-brand strong { display: block; line-height: 1.3; }
.ts-brand small { color: #c7d2fe; font-size: .74rem; }
.ts-brand strong { font-size: 1rem; }
.ts-command-progress { width: min(270px, 28vw); margin-left: auto; }
.ts-command-progress small { display: block; margin-bottom: 5px; color: #e0e7ff; text-align: right; font-size: .74rem; font-weight: 800; }
.ts-command-progress > div { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.ts-command-progress > div > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f6cf63, #10b981); }

.ts-battle-layout {
	width: min(1260px, calc(100% - 24px));
	margin: 18px auto 48px;
	border-radius: 16px;
	background: var(--ts-paper);
	box-shadow: var(--ts-soft-shadow);
	overflow: hidden;
}
.ts-arena {
	position: relative;
	min-height: clamp(500px, 57vh, 690px);
	overflow: hidden;
	background-image:
		linear-gradient(180deg, rgba(4,11,27,.12) 0%, rgba(4,11,27,.28) 44%, rgba(4,11,27,.9) 100%),
		var(--ts-arena-art, url('/assets/game/taddhita-seal/concepts/key-art-fox-battle.webp?v=20260807.1'));
	background-size: cover;
	background-position: center;
	color: #fff;
}
.ts-arena.is-chapter-gotta::after { background: radial-gradient(circle at 51% 53%, rgba(94,234,212,.12), transparent 26%); }
.ts-arena.is-chapter-gotta .ts-boss-avatar { background: #d1fae5; color: #047857; }
.ts-arena.is-chapter-gotta .ts-health-current { background: #0f9f83; box-shadow: 3px 0 9px rgba(45,212,191,.54); }
.ts-arena.is-chapter-gotta .ts-boss-aura { background: radial-gradient(ellipse at 52% 48%, transparent 46%, rgba(45,212,191,.18) 58%, transparent 73%); }
.ts-arena.is-chapter-gotta .ts-atmosphere-embers { background: #5eead4; box-shadow: 56px -32px 0 rgba(94,234,212,.48), 132px 18px 0 rgba(167,243,208,.44), 246px -54px 0 rgba(45,212,191,.42), 318px 12px 0 rgba(153,246,228,.34), 428px -38px 0 rgba(94,234,212,.4), 516px 24px 0 rgba(167,243,208,.32); }
.ts-arena::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 51% 53%, rgba(246,207,99,.11), transparent 24%);
}
.ts-arena.is-wrong { animation: ts-arena-shake .35s ease; }
.ts-arena.is-success::after { animation: ts-seal-flash .7s ease; }
.ts-arena.is-sealed::after { background: radial-gradient(circle at 51% 53%, rgba(246,207,99,.28), transparent 34%); animation: ts-seal-pulse 1.1s cubic-bezier(.22,1,.36,1); }
.ts-arena.is-impact-factor,
.ts-arena.is-impact-forge,
.ts-arena.is-impact-type,
.ts-arena.is-impact-analysis,
.ts-arena.is-impact-finisher { animation: ts-impact-hit-stop .52s cubic-bezier(.16,1,.3,1); }
.ts-atmosphere,
.ts-atmosphere > span { position: absolute; inset: 0; pointer-events: none; }
.ts-atmosphere { z-index: 1; overflow: hidden; opacity: .78; }
.ts-atmosphere-fog {
	top: auto !important;
	height: 42%;
	background: radial-gradient(ellipse at 24% 80%, rgba(151,173,207,.19), transparent 55%), radial-gradient(ellipse at 78% 65%, rgba(198,214,235,.12), transparent 48%);
	filter: blur(10px);
	animation: ts-fog-drift 13s ease-in-out infinite alternate;
}
.ts-atmosphere-embers {
	inset: auto auto 20% 28% !important;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #f6cf63;
	box-shadow: 56px -32px 0 rgba(246,207,99,.5), 132px 18px 0 rgba(255,244,197,.48), 246px -54px 0 rgba(246,207,99,.44), 318px 12px 0 rgba(255,244,197,.36), 428px -38px 0 rgba(246,207,99,.42), 516px 24px 0 rgba(255,244,197,.34);
	animation: ts-embers-rise 4.8s ease-in-out infinite;
}
.ts-boss-aura {
	position: absolute;
	z-index: 1;
	top: 18%;
	right: 1%;
	width: 42%;
	height: 66%;
	border-radius: 52% 45% 48% 56%;
	background: radial-gradient(ellipse at 52% 48%, transparent 48%, rgba(159,190,255,.14) 58%, transparent 72%);
	filter: drop-shadow(0 0 18px rgba(129,162,255,.22));
	pointer-events: none;
}
.ts-arena[class*="is-chapter-"]::after { background: radial-gradient(circle at 51% 53%, color-mix(in srgb, var(--ts-chapter-accent) 24%, transparent), transparent 28%); }
.ts-arena[class*="is-chapter-"] .ts-boss-aura { background: radial-gradient(ellipse at 52% 48%, transparent 45%, color-mix(in srgb, var(--ts-chapter-accent) 22%, transparent) 58%, transparent 73%); }
.ts-arena[class*="is-chapter-"] .ts-atmosphere-embers { background: var(--ts-chapter-accent); }
.ts-impact-anchor {
	position: absolute;
	z-index: 6;
	top: 36%;
	right: 22%;
	width: 86px;
	height: 86px;
	pointer-events: none;
}
.ts-impact-flash,
.ts-impact-ring,
.ts-impact-emblem { position: absolute; inset: 0; opacity: 0; }
.ts-impact-flash {
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 8%, #f6cf63 14%, rgba(220,76,67,.78) 31%, transparent 68%);
	mix-blend-mode: screen;
}
.ts-impact-ring { border: 3px solid #fff4c5; border-radius: 50%; box-shadow: 0 0 24px rgba(246,207,99,.88), inset 0 0 18px rgba(220,76,67,.72); }
.ts-impact-emblem {
	display: grid;
	place-items: center;
	border: 4px double #fff4c5;
	border-radius: 50%;
	background: rgba(132,37,31,.82);
	color: #fff4c5;
	font-weight: 900;
	transform: rotate(-13deg) scale(.45);
	box-shadow: 0 8px 24px -10px rgba(4,11,27,.9);
}
.ts-arena.is-impact-factor .ts-impact-flash,
.ts-arena.is-impact-forge .ts-impact-flash,
.ts-arena.is-impact-type .ts-impact-flash,
.ts-arena.is-impact-analysis .ts-impact-flash,
.ts-arena.is-impact-finisher .ts-impact-flash { animation: ts-impact-flash .56s cubic-bezier(.16,1,.3,1); }
.ts-arena.is-impact-factor .ts-impact-ring,
.ts-arena.is-impact-forge .ts-impact-ring,
.ts-arena.is-impact-type .ts-impact-ring,
.ts-arena.is-impact-analysis .ts-impact-ring,
.ts-arena.is-impact-finisher .ts-impact-ring { animation: ts-impact-ring .62s cubic-bezier(.16,1,.3,1); }
.ts-arena.is-impact-type .ts-impact-emblem,
.ts-arena.is-impact-finisher .ts-impact-emblem { animation: ts-impact-emblem .72s cubic-bezier(.16,1,.3,1); }
.ts-arena.is-impact-factor .ts-boss-aura,
.ts-arena.is-impact-forge .ts-boss-aura,
.ts-arena.is-impact-type .ts-boss-aura,
.ts-arena.is-impact-analysis .ts-boss-aura,
.ts-arena.is-impact-finisher .ts-boss-aura,
.ts-arena.is-impact-factor .ts-boss-avatar,
.ts-arena.is-impact-forge .ts-boss-avatar,
.ts-arena.is-impact-type .ts-boss-avatar,
.ts-arena.is-impact-analysis .ts-boss-avatar,
.ts-arena.is-impact-finisher .ts-boss-avatar { animation: ts-boss-recoil .48s cubic-bezier(.16,1,.3,1); }
.ts-counter-wave {
	position: absolute;
	z-index: 7;
	top: 31%;
	right: 16%;
	width: 120px;
	height: 120px;
	border: 2px solid rgba(165,180,252,.82);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}
.ts-arena.is-wrong .ts-counter-wave { animation: ts-counter-wave .48s cubic-bezier(.16,1,.3,1); }
.ts-combat-callout {
	position: absolute;
	z-index: 9;
	top: 45%;
	left: 7%;
	padding: 8px 14px;
	border: 1px solid rgba(255,244,197,.72);
	border-radius: 10px;
	background: rgba(75,33,27,.9);
	color: #fff4c5;
	font-size: clamp(1.05rem,2vw,1.35rem);
	font-weight: 900;
	box-shadow: 0 15px 28px -18px rgba(4,11,27,.95);
	animation: ts-combat-callout .74s cubic-bezier(.16,1,.3,1) both;
}
.ts-combat-callout.is-type,
.ts-combat-callout.is-finisher { border-color: #f6cf63; background: rgba(132,37,31,.94); }
.ts-boss-intro {
	position: absolute;
	z-index: 22;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	background: linear-gradient(90deg, rgba(4,11,27,.05), rgba(4,11,27,.94) 26%, rgba(75,33,27,.9) 74%, rgba(4,11,27,.05));
	color: #fff;
	text-align: center;
	pointer-events: none;
	clip-path: polygon(0 35%,100% 20%,100% 76%,0 64%);
	animation: ts-boss-intro 1.7s cubic-bezier(.16,1,.3,1) both;
}
.ts-boss-intro span { color: #f6cf63; font-size: clamp(1rem,2vw,1.35rem); font-weight: 900; }
.ts-boss-intro strong { font-size: clamp(3.2rem,10vw,6rem); line-height: 1; text-shadow: 0 3px 0 #71261f, 0 16px 30px rgba(220,76,67,.38); }
.ts-boss-intro small { color: #e0e7ff; font-weight: 800; }
.ts-combat-sigil {
	position: absolute;
	z-index: 1;
	top: 43%;
	right: 9%;
	width: 112px;
	height: 112px;
	display: grid;
	place-items: center;
	border: 3px double rgba(246,207,99,.58);
	border-radius: 50%;
	color: rgba(246,207,99,.72);
	font-family: serif;
	font-size: 3.2rem;
	transform: rotate(-9deg);
	box-shadow: inset 0 0 0 8px rgba(184,52,46,.18), 0 0 28px rgba(246,207,99,.2);
	transition: color .25s ease, border-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.ts-arena.is-stage-forge .ts-combat-sigil { color: #f6cf63; border-color: #f6cf63; transform: rotate(5deg) scale(1.08); }
.ts-arena.is-stage-type .ts-combat-sigil { color: #a7f3d0; border-color: #6ee7b7; transform: rotate(-4deg) scale(1.12); }
.ts-arena.is-stage-analysis .ts-combat-sigil { color: #ddd6fe; border-color: #c4b5fd; transform: rotate(4deg) scale(1.16); }
.ts-arena.is-stage-sealed .ts-combat-sigil { color: #fff; border-color: #f6cf63; transform: rotate(0) scale(1.28); animation: ts-combat-land .55s cubic-bezier(.22,1,.36,1); }
.ts-combat-effect { position: absolute; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
.ts-effect-talisman,
.ts-effect-school,
.ts-effect-tail { position: absolute; opacity: 0; transition: opacity .32s ease, transform .48s cubic-bezier(.22,1,.36,1); }
.ts-effect-talisman {
	top: 31%; right: 24%; width: 54px; height: 108px;
	display: grid; place-items: center;
	border: 1px solid #d6ab3d;
	background: url('/assets/game/taddhita-seal/concepts/talisman-paper-texture.webp?v=20260807.1') center/cover;
	color: #84251f; font-size: 1.25rem; font-weight: 900;
	transform: translate(-180px,-70px) rotate(-24deg) scale(.7);
	box-shadow: 0 14px 24px -16px rgba(7,20,44,.9);
}
.ts-effect-talisman::before,
.ts-effect-talisman::after { content: ""; position: absolute; left: 7px; right: 7px; height: 2px; background: rgba(132,37,31,.58); }
.ts-effect-talisman::before { top: 8px; }
.ts-effect-talisman::after { bottom: 8px; }
.ts-effect-school {
	top: 35%; right: 17%; min-width: 112px; padding: 10px 14px;
	border: 3px double rgba(246,207,99,.85); border-radius: 50%;
	background: rgba(132,37,31,.72); color: #fff4c5; font-weight: 900; text-align: center;
	transform: scale(.45) rotate(-20deg);
}
.ts-effect-formation { position: absolute; top: 22%; right: 7%; width: 250px; height: 250px; opacity: 0; transform: scale(.55) rotate(-25deg); transition: opacity .35s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.ts-effect-formation,
.ts-effect-formation::before,
.ts-effect-formation::after,
.ts-effect-formation i,
.ts-effect-formation b,
.ts-effect-formation em { border: 1px solid rgba(246,207,99,.72); border-radius: 50%; }
.ts-effect-formation::before,
.ts-effect-formation::after,
.ts-effect-formation i,
.ts-effect-formation b,
.ts-effect-formation em { content: ""; position: absolute; inset: 12%; }
.ts-effect-formation::after { inset: 26%; border-style: dashed; }
.ts-effect-formation i { inset: 4% 46%; border-radius: 0; transform: rotate(45deg); }
.ts-effect-formation b { inset: 4% 46%; border-radius: 0; transform: rotate(-45deg); }
.ts-effect-formation em { inset: 46% 4%; border-radius: 0; }
.ts-effect-formation {
	border: 0;
	background: url('/assets/game/taddhita-seal/concepts/analysis-formation.webp?v=20260807.1') center/contain no-repeat;
	mix-blend-mode: screen;
	filter: drop-shadow(0 0 12px rgba(246,207,99,.36));
}
.ts-effect-formation::before,
.ts-effect-formation::after,
.ts-effect-formation i,
.ts-effect-formation b,
.ts-effect-formation em { display: none; }
.ts-effect-tail { top: 25%; right: 12%; padding: 8px 12px; border-radius: 10px; background: rgba(255,250,240,.92); color: #84251f; font-weight: 900; transform: translateY(45px) scale(.7); }
.ts-arena.is-stage-forge .ts-effect-talisman,
.ts-arena.is-stage-type .ts-effect-talisman,
.ts-arena.is-stage-analysis .ts-effect-talisman,
.ts-arena.is-stage-sealed .ts-effect-talisman { opacity: 1; transform: translate(0,0) rotate(7deg) scale(1); }
.ts-arena.is-stage-type .ts-effect-school,
.ts-arena.is-stage-analysis .ts-effect-school,
.ts-arena.is-stage-sealed .ts-effect-school { opacity: 1; transform: scale(1) rotate(-6deg); }
.ts-arena.is-stage-analysis .ts-effect-formation,
.ts-arena.is-stage-sealed .ts-effect-formation { opacity: .88; transform: scale(1) rotate(6deg); animation: ts-formation-turn 11s linear infinite; }
.ts-arena.is-stage-sealed .ts-effect-talisman,
.ts-arena.is-stage-sealed .ts-effect-school { opacity: .25; }
.ts-arena.is-stage-sealed .ts-effect-tail { opacity: 1; transform: translateY(0) scale(1); animation: ts-tail-release .75s cubic-bezier(.22,1,.36,1); }

.ts-boss-bar {
	position: absolute;
	z-index: 2;
	top: 18px;
	left: 18px;
	width: min(560px, calc(100% - 36px));
	display: grid;
	grid-template-columns: 48px minmax(0,auto) minmax(110px,1fr);
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 14px;
	background: rgba(4,11,27,.76);
	box-shadow: 0 12px 26px -20px rgba(0,0,0,.9);
}
.ts-boss-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: #fff; color: var(--ts-cinnabar); font-size: 20px; }
.ts-boss-bar small,
.ts-boss-bar strong { display: block; line-height: 1.32; }
.ts-boss-bar small { color: #fef3c7; font-size: .72rem; }
.ts-boss-bar strong { font-size: .92rem; }
.ts-health { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.18); }
.ts-health span { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; border-radius: inherit; }
.ts-health-trail { z-index: 1; background: #f6cf63; transition: width .55s cubic-bezier(.16,1,.3,1); }
.ts-health-current { z-index: 2; background: #dc4c43; transition: width .18s cubic-bezier(.7,0,.84,0); box-shadow: 3px 0 9px rgba(255,111,97,.64); }
.ts-arena .ts-boss-avatar { background: var(--ts-chapter-soft, #fff); color: #172033; }
.ts-arena .ts-health-current { background: var(--ts-chapter-accent, #dc4c43); box-shadow: 3px 0 9px color-mix(in srgb, var(--ts-chapter-accent, #dc4c43) 62%, transparent); }

.ts-tail-seals {
	position: absolute;
	z-index: 2;
	top: 88px;
	right: 18px;
	max-width: min(410px, calc(100% - 36px));
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 6px;
}
.ts-tail-seals > span {
	min-width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 8px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 10px;
	background: rgba(4,11,27,.72);
	color: #94a3b8;
	font-weight: 800;
	font-size: .8rem;
}
.ts-tail-seals > span.is-lit { border-color: #f6cf63; background: #f6cf63; color: #71261f; box-shadow: 0 8px 18px -12px rgba(246,207,99,.85); }

.ts-word-focus {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	width: min(520px, 72%);
	transform: translate(-50%, -42%);
	text-align: center;
	filter: drop-shadow(0 9px 18px rgba(4,11,27,.7));
}
.ts-word-focus small { display: block; color: #fef3c7; font-weight: 800; }
.ts-word-focus h2 {
	margin: 4px 0 clamp(28px, 3vw, 36px);
	color: #fff4c5;
	font-size: clamp(4rem, 9vw, 6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.035em;
	text-shadow: 0 2px 0 #71261f, 0 12px 28px rgba(246,207,99,.42);
}
.ts-word-focus p { display: inline-block; margin: 0; padding: 5px 12px; border-radius: 10px; background: rgba(4,11,27,.72); color: #fff; font-weight: 700; }
.ts-meaning-reveal { min-height: 44px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.36); border-radius: 12px; background: rgba(4,11,27,.64); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }

.ts-master-line {
	position: absolute;
	z-index: 3;
	left: 18px;
	right: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 760px;
	padding: 12px 14px;
	border: 1px solid rgba(255,255,255,.26);
	border-radius: 14px;
	background: rgba(4,11,27,.86);
	box-shadow: 0 14px 28px -20px rgba(0,0,0,.9);
}
.ts-master-line.is-error { border-color: rgba(251,113,133,.8); }
.ts-master-line.is-success { border-color: rgba(52,211,153,.8); }
.ts-master-portrait { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: #e2e8f0; color: var(--ts-indigo-deep); font-size: 20px; }
.ts-master-line strong,
.ts-master-line p { margin: 0; }
.ts-master-line strong { display: block; color: #fef3c7; }
.ts-master-line p { color: #e2e8f0; font-size: .9rem; }

.ts-workbench {
	position: relative;
	padding: 22px clamp(16px, 4vw, 46px) 34px;
	background:
		linear-gradient(rgba(255,250,240,.62),rgba(255,250,240,.62)),
		url('/assets/game/taddhita-seal/concepts/talisman-paper-texture.webp?v=20260807.1') center/640px auto;
	border-top: 9px solid #4b211b;
	box-shadow: inset 0 4px 0 #a85a3c, inset 0 11px 18px -14px rgba(75,33,27,.9);
}
.ts-workbench::before {
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	height: 1px;
	background: var(--ts-line);
}
.ts-mastery {
	width: min(680px, 100%);
	margin: 0 auto 22px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
.ts-mastery > div { position: relative; display: grid; justify-items: center; gap: 5px; color: #4b5563; }
.ts-mastery > div:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 20px; left: calc(50% + 23px); width: calc(100% - 46px); height: 2px; background: #d8d3c7; }
.ts-mastery-icon { position: relative; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid #9ca3af; border-radius: 12px; background: #e7e3da; color: #4b5563; }
.ts-mastery small { font-weight: 800; }
.ts-mastery small b { font-weight: 900; }
.ts-mastery > div.is-done .ts-mastery-icon { border-color: #047857; background: #d1fae5; color: #047857; }
.ts-mastery > div.is-done:not(:last-child)::after { background: #6ee7b7; }
.ts-mastery > div.is-current { color: var(--ts-indigo-deep); }
.ts-mastery > div.is-current .ts-mastery-icon { border: 3px double #fff; outline: 2px solid var(--ts-indigo); background: var(--ts-indigo); color: #fff; box-shadow: var(--ts-cta-shadow); }

.ts-task-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}
.ts-task-head h2 { margin: 0 0 4px; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; }
.ts-task-head h2:focus { outline: 3px solid var(--ts-focus); outline-offset: 5px; border-radius: 4px; }
.ts-task-head p { margin: 0; color: var(--ts-muted); }
.ts-task-badges { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ts-magic-badge {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	border: 1px solid #9a6b12;
	border-radius: 999px;
	background: #fff8df;
	color: #6f211b;
	cursor: pointer;
}
.ts-magic-badge > i { color: #9a6b12; }
.ts-magic-badge span { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; text-align: left; }
.ts-magic-badge b { font-size: 1rem; line-height: 1; }
.ts-magic-badge small { font-size: .68rem; font-weight: 850; }
.ts-exam-badge { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #fff1f2; color: #be123c; font-size: .78rem; font-weight: 800; }

.ts-magic-assist {
	max-width: 840px;
	margin: 0 auto 16px;
	padding: 14px;
	border: 1px solid rgba(154,107,18,.58);
	border-radius: 16px;
	background:
		radial-gradient(circle at 6% 0, rgba(246,207,99,.2), transparent 31%),
		linear-gradient(135deg, #101b38, #07152d 62%, #182654);
	color: #fff;
	box-shadow: 0 18px 36px -28px rgba(7,20,44,.86);
}
.ts-magic-assist__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ts-magic-assist__head > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ts-magic-assist__head > div > i { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(246,207,99,.5); border-radius: 12px; background: rgba(246,207,99,.12); color: var(--ts-talisman); }
.ts-magic-assist__head span { display: grid; gap: 1px; }
.ts-magic-assist__head b { color: #fff4c5; }
.ts-magic-assist__head small { color: #c7d2fe; font-size: .74rem; }
.ts-magic-cast { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; padding: 9px 14px; border: 1px solid #f6cf63; border-radius: 12px; background: linear-gradient(135deg,#f6cf63,#f59e0b); color: #571d16; font-weight: 950; box-shadow: 0 10px 24px -15px rgba(246,207,99,.95); cursor: pointer; }
.ts-magic-cast:disabled { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #94a3b8; box-shadow: none; cursor: not-allowed; }
.ts-magic-hint { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(3,10,26,.54); animation: ts-magic-reveal .52s cubic-bezier(.16,1,.3,1) both; }
.ts-magic-hint span { display: block; margin-bottom: 3px; color: #f6cf63; font-size: .7rem; font-weight: 900; letter-spacing: .03em; }
.ts-magic-hint p { margin: 0; color: #f8fafc; line-height: 1.55; }
.ts-magic-hint--scaffold { width: fit-content; margin-top: 5px !important; padding: 7px 12px; border: 1px solid rgba(246,207,99,.38); border-radius: 9px; background: rgba(246,207,99,.1); color: #fff4c5 !important; font-size: clamp(1.08rem,2vw,1.34rem); font-weight: 900; letter-spacing: .03em; }
.ts-magic-hint--grammar { display: grid; gap: 2px; margin: 7px 0 0; padding: 0; list-style: none; color: #dbe5f5; font-size: .82rem; line-height: 1.42; }
.ts-magic-hint--grammar li::before { content: "›"; margin-right: 7px; color: #f6cf63; font-weight: 900; }
.ts-magic-hint--ghost { color: rgba(255,244,197,.48) !important; font-size: clamp(1.12rem,2.5vw,1.45rem); font-weight: 900; text-shadow: 0 0 18px rgba(246,207,99,.24); }

.ts-talisman-rack {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(9px, 2vw, 18px);
	max-width: 840px;
	margin: 0 auto;
}
.ts-talisman {
	position: relative;
	min-height: 178px;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 1px;
	padding: 38px 14px 25px;
	border: 1px solid #c89526;
	border-radius: 5px 5px 10px 10px;
	background:
		linear-gradient(180deg, rgba(255,226,126,.48), rgba(246,207,99,.2)),
		url('/assets/game/taddhita-seal/concepts/talisman-paper-texture.webp?v=20260807.1') center/cover;
	color: #6f211b;
	box-shadow: inset 0 0 0 6px rgba(255,244,197,.22), 0 14px 28px -22px rgba(113,38,31,.78);
	cursor: pointer;
	transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, border-color .18s ease;
}
.ts-talisman::before {
	content: "";
	position: absolute;
	inset: 9px;
	border: 1px solid rgba(132,37,31,.5);
	clip-path: polygon(0 0,34% 0,38% 4px,62% 4px,66% 0,100% 0,100% 100%,66% 100%,62% calc(100% - 4px),38% calc(100% - 4px),34% 100%,0 100%);
	pointer-events: none;
}
.ts-talisman::after {
	content: "";
	position: absolute;
	top: 33px;
	bottom: 18px;
	left: 50%;
	width: 44%;
	transform: translateX(-50%);
	border-top: 1px solid rgba(132,37,31,.28);
	border-bottom: 1px solid rgba(132,37,31,.28);
	background: linear-gradient(90deg, transparent 0 46%, rgba(132,37,31,.12) 46% 48%, transparent 48% 52%, rgba(132,37,31,.12) 52% 54%, transparent 54%);
	pointer-events: none;
}
.ts-talisman-sigil {
	position: absolute;
	z-index: 1;
	top: 16px;
	left: 50%;
	width: 48px;
	height: 24px;
	transform: translateX(-50%);
	pointer-events: none;
}
.ts-talisman-sigil::before,
.ts-talisman-sigil::after,
.ts-talisman-sigil b,
.ts-talisman-sigil em { content: ""; position: absolute; }
.ts-talisman-sigil::before { top: 11px; left: 0; right: 0; height: 1px; background: rgba(132,37,31,.62); }
.ts-talisman-sigil::after { inset: 4px 16px; border: 1px solid rgba(132,37,31,.72); transform: rotate(45deg); }
.ts-talisman-sigil b { inset: 7px 19px; border: 1px solid rgba(132,37,31,.74); border-radius: 50%; background: rgba(246,207,99,.5); }
.ts-talisman-sigil em { top: 2px; bottom: 2px; left: 23px; width: 1px; background: rgba(132,37,31,.4); }
.ts-talisman:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 20px 30px -20px rgba(113,38,31,.66); }
.ts-talisman small,
.ts-talisman-kind,
.ts-talisman strong { position: relative; z-index: 2; }
.ts-talisman small,
.ts-talisman-kind { font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.ts-talisman strong { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; text-shadow: 0 1px 0 rgba(255,244,197,.8); }
.ts-talisman.is-right { border-color: #059669; background: #d1fae5; color: #047857; }
.ts-talisman.is-wrong { border-color: #e11d48; background: #fff1f2; color: #be123c; animation: ts-talisman-wrong .35s ease; }
.ts-coach-note { max-width: 680px; margin: 18px auto 0; padding: 11px 13px; border-radius: 12px; background: #eef2ff; color: #3730a3; font-size: .9rem; font-weight: 700; text-align: center; }

.ts-forge-stage { max-width: 840px; margin: 0 auto; }
.ts-forge-question { margin: 0 0 14px; color: var(--ts-muted); font-weight: 800; text-align: center; }
.ts-surface-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-width: 560px; margin: 0 auto; }
.ts-surface-options button,
.ts-immediate-options button {
	min-height: 72px;
	padding: 12px;
	border: 1px solid #c7d2fe;
	border-radius: 13px;
	background: #fff;
	color: #3730a3;
	font: inherit;
	font-size: 1.35rem;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 0 10px 22px -20px rgba(7,20,44,.7);
}
.ts-surface-options button:hover,
.ts-immediate-options button:hover { border-color: var(--ts-indigo); background: #eef2ff; transform: translateY(-2px); }
.ts-surface-options button.is-right,
.ts-immediate-options button.is-right { border-color: #059669; background: #d1fae5; color: #047857; }
.ts-surface-options button.is-wrong,
.ts-immediate-options button.is-wrong { border-color: #e11d48; background: #fff1f2; color: #be123c; animation: ts-talisman-wrong .35s ease; }

.ts-school-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.ts-school-seal {
	min-height: 132px;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 7px;
	padding: 14px;
	border: 1px solid #d9d4c7;
	border-radius: 14px;
	background: #fff;
	color: var(--ts-ink);
	box-shadow: 0 10px 22px -20px rgba(7,20,44,.6);
	cursor: pointer;
	transition: transform .18s cubic-bezier(.22,1,.36,1), background-color .18s ease, border-color .18s ease;
}
.ts-school-seal:hover { transform: translateY(-3px); border-color: #a5b4fc; background: #eef2ff; }
.ts-school-seal > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #eef2ff; color: var(--ts-indigo); }
.ts-school-seal strong { text-align: center; }
.ts-school-seal small { color: var(--ts-muted); text-align: center; }
.ts-school-seal.is-right { border-color: #6ee7b7; background: #ecfdf5; }
.ts-school-seal.is-right > span { background: #d1fae5; color: #047857; }
.ts-school-seal.is-wrong { border-color: #fda4af; background: #fff1f2; animation: ts-talisman-wrong .35s ease; }

.ts-analysis-stage { max-width: 960px; margin: 0 auto; }
.ts-stolen-piece {
	position: relative;
	overflow: hidden;
	max-width: 720px;
	margin: 0 auto;
	padding: 24px clamp(18px,4vw,34px);
	border: 1px solid #5eead4;
	border-radius: 14px;
	background: #0b2740;
	color: #ecfdf5;
	box-shadow: 0 18px 34px -26px rgba(4,47,46,.9);
	text-align: center;
}
.ts-stolen-piece h3 { position: relative; margin: 0 0 3px; color: #99f6e4; font-size: clamp(1.35rem,3vw,1.8rem); }
.ts-stolen-piece p { position: relative; color: #d1fae5; }
.ts-stolen-piece__instruction { margin: 0 0 14px; }
.ts-stolen-piece__formula {
	margin: 0 0 10px;
	color: #fff1b5 !important;
	font-size: clamp(1.35rem,4vw,2rem);
	font-weight: 900;
	letter-spacing: .02em;
	text-shadow: 0 2px 12px rgba(246,207,99,.2);
}
.ts-stolen-piece__hint { margin: 0 0 18px; font-weight: 700; }
.ts-stolen-piece__options { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.ts-stolen-piece button {
	min-height: 58px;
	padding: 9px 12px;
	border: 1px solid #5eead4;
	border-radius: 10px;
	background: #ecfdf5;
	color: #065f46;
	font: inherit;
	font-size: 1.2rem;
	font-weight: 900;
	cursor: pointer;
	transition: transform .18s cubic-bezier(.22,1,.36,1), background-color .18s ease;
}
.ts-stolen-piece button:hover { transform: translateY(-2px); background: #ccfbf1; }
.ts-stolen-piece button.is-wrong { border-color: #fda4af; background: #fff1f2; color: #be123c; animation: ts-talisman-wrong .35s ease; }
.ts-stolen-piece__scene { position: absolute; inset: 0; pointer-events: none; opacity: .17; }
.ts-stolen-piece__scene > i { position: absolute; top: -16px; right: 7%; color: #5eead4; font-size: 8rem; transform: rotate(-8deg); }
.ts-stolen-piece__scene > span { position: absolute; top: 30%; left: 9%; width: 38px; height: 62px; border: 1px solid #f6cf63; background: #fff1b5; transform: rotate(-9deg); animation: ts-stolen-hover 1.8s ease-in-out infinite alternate; }
.ts-analysis-tray {
	min-height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 9px;
	padding: 16px;
	border: 1px solid #c9aa67;
	border-radius: 14px;
	background:
		linear-gradient(rgba(255,253,248,.64),rgba(255,253,248,.64)),
		url('/assets/game/taddhita-seal/concepts/talisman-paper-texture.webp?v=20260807.1') center/cover;
	box-shadow: inset 0 0 26px rgba(154,91,54,.06);
}
.ts-analysis-tray > span { color: #8b7d68; font-weight: 700; }
.ts-analysis-tray button,
.ts-token-bank button {
	min-height: 46px;
	padding: 8px 14px;
	border: 1px solid #c9aa67;
	border-radius: 10px;
	background: #fff7df;
	color: #3f2d1c;
	font: inherit;
	font-size: clamp(1rem, 2.2vw, 1.25rem);
	font-weight: 800;
	cursor: pointer;
}
.ts-analysis-tray button:hover { background: #fff1b5; }
.ts-token-bank { min-height: 76px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 16px 0 4px; }
.ts-token-bank button { border-color: #c7d2fe; background: #eef2ff; color: #3730a3; }
.ts-token-bank button:hover { background: #e0e7ff; }
.ts-analysis-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ts-stamp {
	min-width: 160px;
	border: 3px double #fff1b5;
	outline: 2px solid var(--ts-cinnabar-dark);
	background: var(--ts-cinnabar);
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(132,37,31,.35), 0 15px 24px -15px rgba(132,37,31,.95);
	border-radius: 8px;
	text-shadow: 0 1px 0 rgba(0,0,0,.24);
}
.ts-stamp:hover:not(:disabled) { background: var(--ts-cinnabar-dark); transform: translateY(-2px); }
.ts-boss-input { display: grid; gap: 8px; color: #4b3b2a; font-weight: 800; }
.ts-boss-input textarea {
	width: 100%;
	min-height: 130px;
	resize: vertical;
	padding: 16px;
	border: 1px solid #c9aa67;
	border-radius: 14px;
	background:
		linear-gradient(rgba(255,253,248,.66),rgba(255,253,248,.66)),
		url('/assets/game/taddhita-seal/concepts/talisman-paper-texture.webp?v=20260807.1') center/cover;
	color: var(--ts-ink);
	font-size: clamp(1.2rem, 3vw, 1.7rem);
	font-weight: 700;
	line-height: 1.65;
	box-shadow: inset 0 0 28px rgba(154,91,54,.06);
}
.ts-boss-input textarea::placeholder { color: #665844; opacity: 1; }

.ts-sealed-stage {
	display: grid;
	grid-template-columns: 70px minmax(0,1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 18px;
	border-radius: 14px;
	background: #ecfdf5;
}
.ts-sealed-mark { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 14px; background: var(--ts-emerald); color: #fff; font-size: 28px; animation: ts-mark-land .5s cubic-bezier(.22,1,.36,1); }
.ts-sealed-stage h2,
.ts-sealed-stage p { margin: 0; }
.ts-sealed-stage > div p:last-of-type { margin-top: 4px; color: #4b6358; }
.ts-verified-analysis { color: #065f46; font-size: clamp(1.1rem, 2.5vw, 1.45rem); font-weight: 800; }
.ts-magic-reward { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 5px 9px; border-radius: 999px; background: #fff3c5; color: #84251f; font-size: .76rem; font-weight: 900; }

.ts-victory {
	min-height: 100vh;
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 30px;
	background: var(--ts-night);
	color: #fff;
}
.ts-victory-art { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,11,27,.9), rgba(4,11,27,.42)), var(--ts-arena-art, url('/assets/game/taddhita-seal/concepts/key-art-fox-battle.webp?v=20260807.1')) center/cover; opacity: .84; }
.ts-victory-copy { position: relative; z-index: 1; width: min(700px,100%); padding: clamp(22px,5vw,46px); border-radius: 16px; background: rgba(4,11,27,.88); box-shadow: 0 22px 44px -28px rgba(0,0,0,.9); text-align: center; }
.ts-victory-seal { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 14px; background: var(--ts-talisman); color: var(--ts-cinnabar-dark); font-size: 28px; }
.ts-victory h1 { margin: 0; font-size: clamp(2rem,5vw,3.7rem); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.ts-victory blockquote { margin: 22px 0; font-family: "Sriracha Local", "Sarabun", sans-serif; color: #fef3c7; font-size: clamp(1.1rem,2.5vw,1.5rem); }
.ts-victory p { color: #e2e8f0; }
.ts-victory-replay {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	padding: 9px 14px;
	border: 1px solid rgba(254,243,199,.46);
	border-radius: 11px;
	background: rgba(255,255,255,.08);
	color: #fef3c7;
	font-weight: 850;
}
.ts-victory-replay:hover { background: rgba(255,255,255,.15); border-color: #fef3c7; }
.ts-unlocked-summary { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.ts-unlocked-summary span { min-width: 48px; padding: 8px 12px; border-radius: 10px; background: var(--ts-talisman); color: #71261f; font-weight: 800; }
.ts-victory-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

.ts-cutscene-overlay {
	position: fixed;
	z-index: 300;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: #020617;
	isolation: isolate;
}
.ts-cutscene-overlay::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: -28px;
	background:
		linear-gradient(rgba(2,6,23,.62), rgba(2,6,23,.76)),
		var(--ts-arena-art) center/cover;
	filter: blur(20px) saturate(.8);
	transform: scale(1.06);
}
.ts-cutscene { position: absolute; z-index: 1; inset: 0; margin: 0; background: transparent; }
.ts-cutscene-video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: transparent;
}
.ts-cutscene-toolbar {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 48px max(14px, env(safe-area-inset-left));
	background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.5) 56%, transparent);
	pointer-events: none;
}
.ts-cutscene-toolbar > * { pointer-events: auto; }
.ts-cutscene-toolbar div { display: grid; gap: 2px; color: #fff; text-shadow: 0 2px 10px #020617; }
.ts-cutscene-toolbar small { color: #fef3c7; font-weight: 800; }
.ts-cutscene-toolbar strong { font-size: clamp(1.05rem,2.5vw,1.35rem); }
.ts-cutscene-toolbar button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	border: 1px solid rgba(255,255,255,.58);
	border-radius: 12px;
	background: rgba(2,6,23,.76);
	color: #fff;
	font-weight: 850;
	backdrop-filter: blur(8px);
}
.ts-cutscene-toolbar button:hover { background: rgba(30,41,59,.96); border-color: #fff; }

.ts-immediate-card { text-align: center; }
.ts-immediate-card > p:first-of-type { color: var(--ts-muted); }
.ts-immediate-word { margin: 24px 0 clamp(40px, 4vw, 52px); color: #71261f; font-size: clamp(4rem,13vw,7rem); font-weight: 900; line-height: 1; text-shadow: 0 9px 22px rgba(184,52,46,.12); }
.ts-immediate-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.ts-immediate-feedback { min-height: 26px; color: #4b5563; font-weight: 800; }
.ts-memory-summary { display: grid; gap: 8px; margin: 20px 0; text-align: left; }
.ts-memory-summary > div { display: grid; grid-template-columns: minmax(100px,1fr) 64px minmax(145px,auto); align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(255,255,255,.07); }
.ts-memory-summary strong { color: #fff; font-size: 1.1rem; }
.ts-memory-summary span { color: #fef3c7; font-weight: 900; }
.ts-memory-summary small { justify-self: end; font-weight: 900; }
.ts-memory-summary small.is-waiting { color: #fde68a; }
.ts-memory-summary small.is-due { color: #fda4af; }
.ts-memory-summary small.is-remembered { color: #6ee7b7; }
.ts-memory-summary small.is-new { color: #cbd5e1; }

.ts-character-overlay,
.ts-rank-up-overlay {
	position: fixed;
	z-index: 220;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(3,9,23,.82);
	backdrop-filter: blur(12px) saturate(1.12);
}
.ts-character-panel {
	position: relative;
	width: min(1040px,100%);
	height: min(760px,calc(100dvh - 40px));
	max-height: min(860px,calc(100vh - 40px));
	display: grid;
	grid-template-columns: minmax(290px,.82fr) minmax(420px,1.18fr);
	overflow: hidden;
	border: 1px solid rgba(246,207,99,.48);
	border-radius: 24px;
	background: #f8f2e5;
	box-shadow: 0 40px 100px -42px #000;
	animation: ts-profile-enter .48s cubic-bezier(.16,1,.3,1) both;
}
.ts-character-close {
	position: absolute;
	z-index: 4;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 50%;
	background: rgba(4,11,27,.76);
	color: #fff;
	cursor: pointer;
}
.ts-character-art { position: relative; min-height: 650px; overflow: hidden; background: #07152d; }
.ts-character-art::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(0deg,rgba(4,11,27,.98),rgba(4,11,27,.04)); pointer-events: none; }
.ts-character-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 30%; }
.ts-character-art > div { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; color: #fff; }
.ts-character-art small { color: #f6cf63; font-size: .72rem; font-weight: 900; letter-spacing: .06em; }
.ts-character-art h2 { max-width: 12ch; margin: 7px 0 7px; font-size: clamp(1.7rem,3.2vw,2.45rem); line-height: 1.2; text-wrap: balance; }
.ts-character-art p { max-width: 32ch; margin: 0; color: #e0e7ff; line-height: 1.45; }
.ts-character-sheet { min-width: 0; min-height: 0; overflow-y: auto; padding: clamp(24px,4vw,40px); color: #172033; }
.ts-character-sheet > header { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.ts-character-sheet > header > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: #142552; color: #f6cf63; }
.ts-character-sheet > header small,
.ts-character-sheet > header strong { display: block; }
.ts-character-sheet > header small { color: #6b7280; font-size: .7rem; font-weight: 900; }
.ts-character-sheet > header strong { font-size: 1.2rem; }
.ts-character-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 22px 0; }
.ts-character-stats > div { min-height: 80px; display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #d8cba9; border-radius: 14px; background: rgba(255,255,255,.76); }
.ts-character-stats i { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: #fff3c5; color: #84251f; }
.ts-character-stats span { display: grid; color: #5f6675; font-size: .72rem; font-weight: 800; }
.ts-character-stats strong { color: #111827; font-size: 1.35rem; line-height: 1.1; }
.ts-character-rank-path { padding: 13px; border-radius: 14px; background: #111e3f; color: #fff; }
.ts-character-rank-path > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: .76rem; }
.ts-character-rank-path > div:first-child b { color: #f6cf63; text-align: right; }
.ts-character-rank-bar { height: 7px; overflow: hidden; margin: 9px 0 6px; border-radius: 999px; background: rgba(255,255,255,.15); }
.ts-character-rank-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#f6cf63,#5eead4); }
.ts-character-rank-path small { color: #c7d2fe; }
.ts-card-vault-trigger { width: 100%; min-height: 68px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto 18px; align-items: center; gap: 11px; margin-top: 12px; padding: 10px 12px; border: 1px solid #d8cba9; border-radius: 14px; background: rgba(255,255,255,.78); color: #172033; text-align: left; cursor: pointer; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.ts-card-vault-trigger:hover { transform: translateY(-1px); border-color: #aa8b42; background: #fffaf0; }
.ts-card-vault-trigger[aria-expanded="true"] { border-color: #aa8b42; background: #fff7da; }
.ts-card-vault-trigger > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #17264d; color: #f6cf63; }
.ts-card-vault-trigger > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.ts-card-vault-trigger small { color: #84251f; font-size: .68rem; font-weight: 900; }
.ts-card-vault-trigger strong { font-size: .93rem; line-height: 1.32; }
.ts-card-vault-trigger > b { color: #84251f; font-size: 1rem; white-space: nowrap; }
.ts-card-vault-trigger > i { color: #6b7280; font-size: .8rem; }
.ts-card-vault { margin-top: 20px; padding-top: 18px; border-top: 1px solid #d8cba9; }
.ts-card-vault > header { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.ts-card-vault > header h3 { margin: 0 0 4px; font-size: 1.3rem; }
.ts-card-vault > header p { max-width: 48ch; margin: 0; color: #646b79; font-size: .78rem; line-height: 1.5; }
.ts-card-vault > header > b { color: #84251f; font-size: 1.1rem; white-space: nowrap; }
.ts-card-vault-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px,43%); gap: 12px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x proximity; scrollbar-color: #aa8b42 rgba(23,38,77,.1); }
.ts-rank-card { min-width: 0; overflow: hidden; scroll-snap-align: start; border: 1px solid #31436d; border-radius: 14px; background: #101d3e; color: #fff; }
.ts-rank-card.is-current { border-color: var(--ts-rank-card-accent,#f6cf63); }
.ts-rank-card-art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #07152d; }
.ts-rank-card-art::after { content: ""; position: absolute; inset: 44% 0 0; background: linear-gradient(0deg,rgba(7,21,45,.94),transparent); pointer-events: none; }
.ts-rank-card-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 24%; }
.ts-rank-card.is-locked .ts-rank-card-art img { filter: grayscale(1) brightness(.24) contrast(1.12); }
.ts-rank-card-art > span { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; color: #fff4c5; text-align: center; }
.ts-rank-card-art > span i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,244,197,.48); border-radius: 50%; background: rgba(7,21,45,.78); }
.ts-rank-card-art > span small { font-weight: 850; line-height: 1.35; }
.ts-rank-card-art > em { position: absolute; z-index: 3; top: 10px; right: 10px; padding: 5px 8px; border-radius: 999px; background: var(--ts-rank-card-accent,#f6cf63); color: #07152d; font-size: .62rem; font-style: normal; font-weight: 950; }
.ts-rank-card-copy { display: grid; gap: 3px; padding: 11px 12px 13px; }
.ts-rank-card-copy small { color: var(--ts-rank-card-accent,#f6cf63); font-size: .64rem; font-weight: 850; }
.ts-rank-card-copy strong { color: #fff; font-size: .98rem; line-height: 1.28; }
.ts-rank-card-copy p { min-height: 2.7em; margin: 1px 0 0; color: #c7d2fe; font-size: .72rem; line-height: 1.42; }
.ts-demon-ledger { margin-top: 22px; }
.ts-demon-ledger__title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ts-demon-ledger__title small { color: #84251f; font-size: .68rem; font-weight: 900; letter-spacing: .05em; }
.ts-demon-ledger__title h3 { margin: 1px 0 0; font-size: 1.25rem; }
.ts-demon-ledger__title > b { color: #84251f; font-size: 1.1rem; }
.ts-demon-ledger__empty { margin: 0; padding: 16px; border: 1px dashed #c5b892; border-radius: 12px; color: #646b79; background: rgba(255,255,255,.48); line-height: 1.55; }
.ts-demon-ledger__list { display: grid; gap: 8px; }
.ts-demon-ledger__list article { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #d8cba9; border-radius: 12px; background: rgba(255,255,255,.74); }
.ts-demon-ledger__list article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #17264d; color: #f6cf63; }
.ts-demon-ledger__list article div { min-width: 0; display: grid; }
.ts-demon-ledger__list article small { color: #6b7280; font-size: .66rem; }
.ts-demon-ledger__list article strong { overflow: hidden; color: #172033; text-overflow: ellipsis; white-space: nowrap; }
.ts-demon-ledger__list article em { color: #84251f; font-size: .72rem; font-style: normal; }
.ts-demon-ledger__list article > b { color: #047857; font-size: .72rem; white-space: nowrap; }

.ts-rank-up {
	width: min(820px,100%);
	max-height: calc(100vh - 40px);
	display: grid;
	grid-template-columns: minmax(280px,.9fr) minmax(330px,1.1fr);
	overflow: hidden;
	border: 1px solid color-mix(in srgb,var(--ts-rank-accent,#f6cf63) 72%,#fff);
	border-radius: 24px;
	background: #09152f;
	box-shadow: 0 0 0 1px rgba(255,255,255,.08),0 40px 100px -34px #000,0 0 80px color-mix(in srgb,var(--ts-rank-accent,#f6cf63) 22%,transparent);
	color: #fff;
	animation: ts-rank-ascend .72s cubic-bezier(.16,1,.3,1) both;
}
.ts-rank-up-art { position: relative; min-height: 590px; overflow: hidden; }
.ts-rank-up-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 60%,#09152f),linear-gradient(0deg,rgba(9,21,47,.72),transparent 45%); }
.ts-rank-up-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 28%; }
.ts-rank-up-copy { position: relative; display: grid; align-content: center; justify-items: start; padding: clamp(26px,5vw,54px); background: radial-gradient(circle at 0 40%,color-mix(in srgb,var(--ts-rank-accent,#f6cf63) 15%,transparent),transparent 44%); }
.ts-rank-up-sigil { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid color-mix(in srgb,var(--ts-rank-accent,#f6cf63) 70%,#fff); border-radius: 50%; background: color-mix(in srgb,var(--ts-rank-accent,#f6cf63) 18%,transparent); color: var(--ts-rank-accent,#f6cf63); font-size: 1.5rem; box-shadow: 0 0 34px color-mix(in srgb,var(--ts-rank-accent,#f6cf63) 28%,transparent); }
.ts-rank-up-copy > small { color: var(--ts-rank-accent,#f6cf63); font-weight: 950; letter-spacing: .08em; }
.ts-rank-up-copy h2 { margin: 8px 0 11px; font-size: clamp(1.45rem,3vw,2rem); line-height: 1.2; }
.ts-rank-up-copy > strong { display: block; color: #fff4c5; font-size: clamp(2.15rem,5vw,3.5rem); line-height: 1.24; text-wrap: balance; }
.ts-rank-up-copy > p { margin: 7px 0 14px; color: #c7d2fe; font-size: 1.04rem; }
.ts-rank-up-copy > div { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.06); }
.ts-rank-up-copy > div span { color: #c7d2fe; }
.ts-rank-up-copy > div b { color: var(--ts-rank-accent,#f6cf63); font-size: 1.4rem; }
.ts-rank-up-copy > button { width: 100%; }

.ts-projectile {
	position: fixed;
	z-index: 90;
	width: 48px;
	height: 78px;
	display: grid;
	place-items: center;
	padding: 5px;
	border: 1px solid #d6ab3d;
	background: url('/assets/game/taddhita-seal/concepts/talisman-paper-texture.webp?v=20260807.1') center/cover;
	color: #84251f;
	font-size: .92rem;
	font-weight: 900;
	line-height: 1.1;
	text-align: center;
	box-shadow: 0 13px 24px -14px rgba(4,11,27,.96);
	pointer-events: none;
	will-change: transform, opacity, filter;
}
.ts-projectile::before,
.ts-projectile::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px; background: rgba(132,37,31,.56); }
.ts-projectile::before { top: 7px; }
.ts-projectile::after { bottom: 7px; }
.ts-projectile-forge { border-color: #f6cf63; box-shadow: 0 0 22px rgba(246,207,99,.48), 0 13px 24px -14px rgba(4,11,27,.96); }
.ts-projectile-type {
	height: 48px;
	border: 3px double #fff4c5;
	border-radius: 50%;
	background: #9f2f29;
	color: #fff4c5;
}
.ts-projectile-analysis,
.ts-projectile-finisher { width: 58px; height: 58px; border: 4px double #fff4c5; border-radius: 50%; background: #84251f; color: #fff4c5; }
.ts-projectile-type::before,
.ts-projectile-type::after,
.ts-projectile-analysis::before,
.ts-projectile-analysis::after,
.ts-projectile-finisher::before,
.ts-projectile-finisher::after { display: none; }
.ts-ink-rune {
	position: fixed;
	z-index: 80;
	padding: 5px 9px;
	border-radius: 9px;
	background: rgba(18,35,78,.94);
	color: #fff4c5;
	font-weight: 900;
	box-shadow: 0 9px 20px -13px rgba(4,11,27,.95);
	pointer-events: none;
	will-change: transform, opacity, filter;
}
.ts-ink-rune.is-returning { background: rgba(132,37,31,.92); }
.ts-finisher {
	position: fixed;
	z-index: 110;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	background: radial-gradient(circle at center, rgba(246,207,99,.18), rgba(4,11,27,.9) 44%, rgba(4,11,27,.1) 72%);
	backdrop-filter: blur(3px) saturate(1.12);
	color: #fff4c5;
	text-align: center;
	pointer-events: none;
	animation: ts-finisher-screen 1.55s cubic-bezier(.16,1,.3,1) both;
}
.ts-finisher::before,
.ts-finisher::after {
	content: "";
	position: absolute;
	left: -8%;
	right: -8%;
	height: 2px;
	background: #f6cf63;
	box-shadow: 0 0 20px rgba(246,207,99,.9);
}
.ts-finisher::before { top: 30%; transform: rotate(-4deg); }
.ts-finisher::after { bottom: 28%; transform: rotate(3deg); }
.ts-finisher-sigil {
	position: relative;
	width: min(42vw,220px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	margin-bottom: 14px;
	border: 5px double #f6cf63;
	border-radius: 50%;
	background: rgba(132,37,31,.86);
	box-shadow: 0 18px 42px -18px rgba(4,11,27,.96), inset 0 0 0 14px rgba(246,207,99,.12);
	animation: ts-finisher-sigil 1.1s cubic-bezier(.16,1,.3,1) both;
}
.ts-finisher-sigil::before { content: ""; position: absolute; inset: 13%; border: 1px dashed #fff4c5; border-radius: 50%; }
.ts-finisher-sigil span { position: relative; font-size: clamp(2.2rem,5vw,3.4rem); font-weight: 900; white-space: nowrap; text-shadow: 0 3px 0 #71261f; }
.ts-finisher > strong { font-size: clamp(1.8rem,5vw,3.2rem); line-height: 1.1; }
.ts-finisher > small { margin-top: 5px; color: #e0e7ff; font-weight: 800; }

@keyframes ts-seal-breathe { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-7px) rotate(2deg); } }
@keyframes ts-intro-image { from { opacity: .2; transform: scale(1.08); filter: blur(8px); } to { opacity: 1; transform: scale(1.02); filter: blur(0); } }
@keyframes ts-copy-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ts-arena-shake { 0%,100% { transform: translateX(0); } 35% { transform: translateX(-7px); } 70% { transform: translateX(7px); } }
@keyframes ts-talisman-wrong { 0%,100% { transform: translateX(0); } 35% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }
@keyframes ts-seal-flash { 0% { opacity: 0; } 38% { opacity: .9; } 100% { opacity: 0; } }
@keyframes ts-seal-pulse { 0% { opacity: 0; transform: scale(.82); } 50% { opacity: 1; } 100% { opacity: .25; transform: scale(1.12); } }
@keyframes ts-mark-land { from { opacity: 0; transform: scale(.65) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes ts-combat-land { 0% { opacity: .3; transform: scale(.7) rotate(-18deg); } 65% { opacity: 1; transform: scale(1.38) rotate(4deg); } 100% { transform: scale(1.28) rotate(0); } }
@keyframes ts-formation-turn { to { transform: scale(1) rotate(366deg); } }
@keyframes ts-tail-release { from { opacity: 0; transform: translate(70px,50px) scale(.55); } to { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes ts-restart-arm { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes ts-fog-drift { from { transform: translate3d(-4%,2%,0) scale(1.02); opacity: .42; } to { transform: translate3d(5%,-3%,0) scale(1.1); opacity: .74; } }
@keyframes ts-embers-rise { 0%,100% { transform: translate3d(0,12px,0); opacity: .2; } 50% { transform: translate3d(12px,-34px,0); opacity: .76; } }
@keyframes ts-impact-hit-stop { 0%,17% { transform: translate3d(0,0,0); } 18%,29% { transform: translate3d(-5px,1px,0); } 45% { transform: translate3d(7px,-1px,0); } 68% { transform: translate3d(-3px,0,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes ts-impact-flash { 0% { opacity: .2; transform: scale(.16); } 22% { opacity: 1; transform: scale(.72); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes ts-impact-ring { 0% { opacity: .96; transform: scale(.25) rotate(-12deg); } 100% { opacity: 0; transform: scale(2.2) rotate(12deg); } }
@keyframes ts-impact-emblem { 0% { opacity: 0; transform: rotate(-22deg) scale(.34); } 32%,72% { opacity: 1; transform: rotate(-8deg) scale(1); } 100% { opacity: 0; transform: rotate(2deg) scale(1.3); } }
@keyframes ts-boss-recoil { 0%,16%,100% { transform: translate3d(0,0,0) scale(1); } 28% { transform: translate3d(16px,-3px,0) scale(.97); filter: brightness(1.55); } 54% { transform: translate3d(-5px,1px,0) scale(1.01); } }
@keyframes ts-counter-wave { 0% { opacity: .9; transform: scale(.28); box-shadow: 0 0 22px rgba(129,140,248,.76); } 100% { opacity: 0; transform: scale(3.6); box-shadow: 0 0 2px rgba(129,140,248,0); } }
@keyframes ts-combat-callout { 0% { opacity: 0; transform: translate3d(-20px,12px,0) skewX(-6deg); clip-path: inset(0 100% 0 0); } 24%,70% { opacity: 1; transform: translate3d(0,0,0) skewX(-3deg); clip-path: inset(0 0 0 0); } 100% { opacity: 0; transform: translate3d(14px,-7px,0) skewX(-2deg); } }
@keyframes ts-boss-intro { 0% { opacity: 0; transform: translate3d(-12%,0,0) scaleX(.7); clip-path: polygon(0 48%,100% 43%,100% 57%,0 52%); } 18%,72% { opacity: 1; transform: translate3d(0,0,0) scaleX(1); clip-path: polygon(0 35%,100% 20%,100% 76%,0 64%); } 100% { opacity: 0; transform: translate3d(8%,0,0) scaleX(.92); clip-path: polygon(0 47%,100% 36%,100% 62%,0 54%); } }
@keyframes ts-finisher-screen { 0% { opacity: 0; clip-path: circle(0 at 70% 38%); } 18%,72% { opacity: 1; clip-path: circle(110% at 70% 38%); } 100% { opacity: 0; clip-path: circle(115% at 70% 38%); } }
@keyframes ts-finisher-sigil { 0% { opacity: 0; transform: scale(2.2) rotate(-22deg); filter: blur(8px); } 42% { opacity: 1; transform: scale(.92) rotate(3deg); filter: blur(0); } 68%,100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); } }
@keyframes ts-stolen-hover { from { transform: translate3d(0,5px,0) rotate(-9deg); } to { transform: translate3d(0,-5px,0) rotate(-4deg); } }
@keyframes ts-magic-reveal { from { opacity: 0; transform: translateY(-8px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes ts-profile-enter { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ts-rank-ascend { 0% { opacity: 0; transform: translateY(45px) scale(.9); filter: brightness(1.7) blur(5px); } 68% { opacity: 1; transform: translateY(-4px) scale(1.01); filter: brightness(1.08) blur(0); } 100% { transform: translateY(0) scale(1); filter: brightness(1); } }

@media (max-width: 900px) {
	.ts-battle-layout { width: 100%; margin: 0 0 30px; border-radius: 0; box-shadow: none; }
	.ts-command { min-height: 62px; }
	.ts-brand { min-width: 0; }
	.ts-brand small { display: none; }
	.ts-command-progress { width: min(220px, 35vw); }
	.ts-arena { min-height: 500px; background-position: 52% center; }
	.ts-tail-seals { top: 86px; max-width: 360px; }
	.ts-school-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.ts-sealed-stage { grid-template-columns: 60px minmax(0,1fr); }
	.ts-sealed-stage .ts-primary { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 640px) {
	.ts-intro { align-items: end; }
	.ts-intro-image { inset: 0 0 auto; height: 38vh; background-size: cover; background-position: center; transform: none; }
	.ts-intro-shade { background: linear-gradient(0deg, rgba(4,11,27,1) 0%, rgba(4,11,27,.97) 59%, rgba(4,11,27,.08) 91%); }
	.ts-intro-copy { width: calc(100% - 28px); margin: 29vh auto 12px; padding: 12px 0; }
	.ts-story-line { margin-bottom: 4px; font-size: .84rem; }
	.ts-intro h1 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
	.ts-intro h2 { margin-top: 5px; font-size: 1.2rem; }
	.ts-intro blockquote { margin: 12px 0 8px; font-size: 1.05rem; line-height: 1.5; }
	.ts-intro-copy > p:last-of-type { margin: 8px 0; font-size: .9rem; line-height: 1.5; }
	.ts-intro-actions { display: grid; margin-top: 14px; }
	.ts-intro-actions > * { width: 100%; }
	.ts-atlas-head { min-height: 360px; padding: 92px 18px 34px; background-position: 58% center; }
	.ts-atlas-head h1 { font-size: clamp(2.15rem, 11vw, 3.35rem); }
	.ts-atlas-head p { font-size: .92rem; }
	.ts-chapter-list { width: calc(100% - 24px); grid-template-columns: minmax(0,1fr); gap: var(--ts-space-sm); padding-top: var(--ts-space-md); }
	.ts-chapter-open { min-height: 146px; grid-template-columns: 34px 48px minmax(0,1fr) 18px; gap: var(--ts-space-xs); padding: var(--ts-space-sm); }
	.ts-chapter-emblem { width: 46px; height: 46px; border-radius: 12px; font-size: 1.1rem; }
	.ts-chapter-copy strong { font-size: 1.05rem; }
	.ts-chapter-copy small { font-size: .78rem; }

	.ts-command { gap: 8px; padding: 8px 10px; }
	.ts-command-back,
	.ts-command-character,
	.ts-command-sound,
	.ts-command-reset { width: 44px; height: 44px; }
	.ts-brand { display: none; }
	.ts-brand-mark { display: none; }
	.ts-brand strong { font-size: .9rem; white-space: nowrap; }
	.ts-command-progress { width: auto; min-width: 90px; flex: 1; }
	.ts-command-progress small { font-size: .68rem; }

	.ts-arena { min-height: 360px; background-position: 50% 45%; }
	.ts-arena.is-chapter-gotta { background-position: 68% 45%; }
	.ts-boss-bar { top: 12px; left: 10px; width: calc(100% - 20px); grid-template-columns: 42px minmax(0,1fr); }
	.ts-boss-avatar { width: 42px; height: 42px; }
	.ts-boss-bar .ts-health { grid-column: 1 / -1; }
	.ts-tail-seals { top: 102px; left: 10px; right: 10px; max-width: none; justify-content: center; gap: 4px; }
	.ts-tail-seals > span { min-width: 32px; height: 32px; padding: 0 6px; font-size: .68rem; }
	.ts-word-focus { top: 58%; width: 90%; }
	.ts-word-focus h2 { font-size: clamp(3rem,16vw,4.4rem); }
	.ts-boss-aura { top: 24%; right: -5%; width: 58%; height: 58%; }
	.ts-impact-anchor { top: 39%; right: 17%; width: 62px; height: 62px; }
	.ts-combat-callout { top: 48%; left: 10px; padding: 6px 10px; font-size: .92rem; }
	.ts-counter-wave { top: 36%; right: 12%; width: 82px; height: 82px; }
	.ts-combat-sigil { top: 46%; right: 5%; width: 78px; height: 78px; font-size: 2.15rem; opacity: .78; }
	.ts-effect-talisman { top: 31%; right: 18%; width: 38px; height: 72px; font-size: .88rem; }
	.ts-effect-school { top: 34%; right: 6%; min-width: 84px; padding: 6px 8px; font-size: .7rem; }
	.ts-effect-formation { top: 23%; right: -3%; width: 150px; height: 150px; }
	.ts-effect-tail { top: 27%; right: 5%; font-size: .72rem; }
	.ts-master-line { left: 10px; right: 10px; bottom: 8px; min-height: 44px; padding: 8px 10px; }
	.ts-master-portrait { display: none; }
	.ts-master-line p { display: none; }
	.ts-boss-intro { clip-path: polygon(0 31%,100% 22%,100% 78%,0 68%); }
	.ts-boss-intro strong { font-size: clamp(2.8rem,17vw,4.6rem); }

	.ts-workbench { padding: 18px 12px 30px; }
	.ts-mastery { margin-bottom: 18px; }
	.ts-mastery small { font-size: .62rem; }
	.ts-mastery-icon { width: 38px; height: 38px; }
	.ts-mastery > div:not(:last-child)::after { top: 18px; left: calc(50% + 20px); width: calc(100% - 40px); }
	.ts-task-head { display: grid; gap: 9px; }
	.ts-task-badges { justify-content: flex-start; }
	.ts-magic-assist__head { align-items: stretch; }
	.ts-magic-assist__head > div { flex: 1; }
	.ts-exam-badge { width: fit-content; }
	.ts-talisman-rack { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.ts-talisman { min-height: 126px; }
	.ts-talisman { padding: 34px 10px 22px; }
	.ts-talisman-sigil { top: 13px; }
	.ts-stolen-piece { padding: 20px 12px; }
	.ts-stolen-piece__options { grid-template-columns: 1fr; }
	.ts-school-grid { gap: 9px; }
	.ts-school-seal { min-height: 116px; padding: 11px; }
	.ts-analysis-actions { position: sticky; bottom: 0; z-index: 4; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(0deg,var(--ts-paper) 72%,transparent); }
	.ts-analysis-actions > * { flex: 1; }
	.ts-sealed-stage { grid-template-columns: 54px minmax(0,1fr); padding: 14px; }
	.ts-sealed-mark { width: 54px; height: 54px; }
	.ts-victory { padding: 14px; }
	.ts-victory-copy { padding: 24px 16px; }
	.ts-victory-actions { display: grid; }
	.ts-victory-actions > * { width: 100%; }
	.ts-tutorial-actions { display: grid; }
	.ts-tutorial-actions > * { width: 100%; }
	.ts-immediate-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.ts-memory-summary > div { grid-template-columns: minmax(80px,1fr) 52px; }
	.ts-memory-summary small { grid-column: 1 / -1; justify-self: start; }
	.ts-character-overlay,
	.ts-rank-up-overlay { padding: 0; place-items: stretch; }
	.ts-character-panel { width: 100%; height: 100dvh; max-height: 100dvh; grid-template-columns: minmax(0,1fr); grid-template-rows: 38dvh auto; overflow-y: auto; border: 0; border-radius: 0; }
	.ts-character-art { min-height: 38dvh; }
	.ts-character-art > div { left: 18px; right: 64px; bottom: 16px; }
	.ts-character-sheet { overflow: visible; padding: 22px 14px 34px; }
	.ts-character-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.ts-card-vault > header { align-items: start; }
	.ts-card-vault-track { grid-auto-columns: minmax(170px,76%); }
	.ts-demon-ledger__list article { grid-template-columns: 38px minmax(0,1fr); }
	.ts-demon-ledger__list article > b { grid-column: 2; justify-self: start; }
	.ts-rank-up { width: 100%; max-height: 100dvh; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(280px,48dvh) auto; overflow-y: auto; border: 0; border-radius: 0; }
	.ts-rank-up-art { min-height: 48dvh; }
	.ts-rank-up-art::after { background: linear-gradient(0deg,#09152f,transparent 58%); }
	.ts-rank-up-copy { margin-top: -84px; padding: 26px 18px calc(28px + env(safe-area-inset-bottom)); }
	.ts-rank-up-sigil { width: 52px; height: 52px; margin-bottom: 12px; }
}

@media (max-width: 380px) {
	.ts-brand strong { font-size: .8rem; }
	.ts-command { gap: 6px; padding-inline: 7px; }
	.ts-command-progress { min-width: 64px; }
	.ts-magic-assist__head { display: grid; }
	.ts-magic-cast { width: 100%; }
	.ts-character-stats { grid-template-columns: minmax(0,1fr); }
	.ts-tail-seals > span { min-width: 29px; padding: 0 4px; }
	.ts-school-seal strong { font-size: .88rem; }
	.ts-school-seal small { font-size: .72rem; }
	.ts-analysis-tray button,
	.ts-token-bank button { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}