/*
	============================================================================
	TOMEVAULT STYLESHEET — BEGINNER TEACHING NOTES
	============================================================================
	HOW TO READ THIS FILE
	1) Theme tokens in :root
	2) Global/reset behavior (body, typography, shared primitives)
	3) Layout containers (shell, top bar, screen wrappers)
	4) Reusable UI components (buttons, inputs, chips, cards, modals)
	5) Feature-specific styling (DM tools, social panel, landing hero)
	6) Screen-state toggles and responsive breakpoints

	WHY CSS IS GROUPED THIS WAY
	Grouping by responsibility makes maintenance easier:
	- You can quickly find where colors live (tokens)
	- You can quickly find where components live (btn/input/chip)
	- You can quickly find where one feature lives (social panel)

	TIP FOR LEARNING
	If you want to experiment safely, only change values in :root first.
	Because components use variables, a single token change updates the whole app.
*/

:root{
	/*
		Theme tokens:
		These variables act like a design system. Reuse avoids hard-coded colors
		spread all over the stylesheet.
	*/
	--bg:#151123;
	--bg2:#1e1830;
	--surface:#2a233d;
	--surface-2:#312847;
	--surface-3:#221c33;
	--text:#f2edf8;
	--muted:#a89ebf;
	--gold:#f5c82f;
	--gold-2:#d7ac21;
	--line:rgba(207,183,255,.14);
	--line-strong:rgba(245,200,47,.42);
	--danger:#dc2f2f;
	--font-heading: 'Google Sans', 'Open Sans', system-ui, sans-serif;
	--font-ui: 'Google Sans', 'Open Sans', system-ui, sans-serif;
	--text-xs: 12px;
	--text-sm: 14px;
	--text-base: 15px;
	--text-lg: 16px;
	--text-xl: 18px;
	--text-2xl: 20px;
	--text-3xl: 24px;
	--text-4xl: 32px;
	--gold-gradient: linear-gradient(180deg, var(--gold), var(--gold-2));
	--gold-shadow: 0 8px 24px rgba(245,200,47,.22);
	--screen-gold-border: rgba(245,200,47,.52);
	--screen-gold-glow: rgba(245,200,47,.16);
	--muted-purple: #ddd1f4;
}

/* Box sizing rule keeps width/height calculations predictable. */
*{box-sizing:border-box}

/* Ensure the page can occupy full viewport height for app-like screens. */
html,body{min-height:100%}

/*
	==========================================================================
	MICRO-ANIMATION TOKENS
	==========================================================================
	Centralized timing & easing so every animation in the app feels cohesive.
	Adjust --tv-ease or --tv-dur-* to change the app's overall feel:
	  shorter durations → snappy/techy, longer → smooth/premium.
*/
:root{
	--tv-ease:cubic-bezier(.22,1,.36,1);      /* smooth deceleration – feels natural */
	--tv-ease-bounce:cubic-bezier(.34,1.56,.64,1); /* slight overshoot – playful pop */
	--tv-dur-fast:.12s;   /* micro-feedback (button press, icon pulse) */
	--tv-dur-mid:.22s;    /* standard transition (screen fade, card lift) */
	--tv-dur-slow:.36s;   /* dramatic entrance (modal, onboarding hero) */
}

/* Eliminate 300ms tap delay on touch devices for all interactive elements. */
button,a,input,select,textarea,[role="button"]{touch-action:manipulation}

/*
	Base page background and font styling.
	Note: the gritty/grid overlay was intentionally removed to match your request.
*/
body{
	margin:0;
	font-family: var(--font-ui);
	color:var(--text);
	-webkit-tap-highlight-color:transparent; /* remove blue flash on mobile taps */
	-webkit-font-smoothing:antialiased;
	background:
		linear-gradient(145deg, rgba(41,28,64,.72) 0%, rgba(33,24,58,.72) 42%, rgba(28,20,54,.78) 100%),
		radial-gradient(circle at 52% 58%, rgba(163,109,216,.22), transparent 38%),
		radial-gradient(circle at 48% 40%, rgba(143,86,188,.18), transparent 52%),
		url('backgrounds/background02.JPG');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	position:relative;
	overflow-x:hidden;
}

/*
  Main app container.
  We cap max width so content remains readable on wide screens.
*/
.app-shell{
	/* Slightly wider shell on large displays while keeping generous margins */
	width:min(1600px, 96vw);
	margin:14px auto 0;
	min-height:calc(100dvh - 14px);
}

/*
  Top app bar (only shown on non-DM dashboard screens in current UX).
*/
.topbar{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:20px;
	padding:10px 24px;
	border:none;
	border-radius:14px;
	background:linear-gradient(180deg, rgba(40,32,63,.92), rgba(34,28,53,.88));
}

.brand{display:flex;align-items:center;gap:10px}
.topbar-avatar{width:36px;height:36px;border-radius:50%;border:2px solid var(--gold);flex-shrink:0;position:relative;overflow:hidden;background:rgba(57,47,82,.7);display:grid;place-items:center}
.topbar-avatar__placeholder{width:20px;height:20px;color:rgba(200,190,220,.6)}
.topbar-avatar__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.topbar-avatar__img:not(.hidden)~.topbar-avatar__placeholder{display:none}

.brand__title{
	margin:0;
	line-height:1;
	font-size: var(--text-4xl);
	letter-spacing:.02em;
	font-weight:700;
	text-transform:none;
}

.brand__title::first-letter{color:var(--gold)}

.brand__accent{color:var(--gold)}

.brand__sub{
	margin-top:8px;
	font-size: var(--text-xl);
	color:var(--muted);
}

.status{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}

/*
	Status pills are lightweight badges for online/live/player counts.
*/
.pill{
	border:1px solid var(--line);
	background:rgba(57,47,82,.7);
	color:var(--muted);
	border-radius:10px;
	padding:9px 14px;
	font-size: var(--text-lg);
}

.pill--muted{opacity:.78}

#liveStatus{
	width:42px;
	height:42px;
	min-width:42px;
	padding:0;
	display:grid;
	place-items:center;
	color:var(--gold);
	border-color:rgba(245,200,47,.26);
	background:linear-gradient(180deg, rgba(57,47,82,.78), rgba(50,42,72,.72));
	cursor:pointer;
}

#liveStatus svg{width:20px;height:20px;display:block}

.sessionPeekWrap,
.playerSessionRef{
	position:relative;
	display:inline-flex;
	align-items:center;
}

.sessionPeek{
	position:absolute;
	top:calc(100% + 8px);
	right:0;
	min-width:280px;
	max-width:min(92vw, 420px);
	padding:10px;
	border:1px solid var(--line);
	border-radius:12px;
	background:rgba(38,31,57,.96);
	box-shadow:0 16px 36px rgba(0,0,0,.42);
	display:grid;
	gap:8px;
	z-index:120;
}

.sessionPeek__row{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	gap:12px;
}

.sessionPeek__row strong{
	font-size: var(--text-sm);
	max-width:230px;
	overflow-wrap:anywhere;
	text-align:right;
}

.sessionPeek__advanced{
	display:grid;
	gap:6px;
	padding-top:2px;
	border-top:1px dashed var(--line);
}

.sessionPeek--player{
	left:0;
	right:auto;
}

.pill--clickable{
	color:var(--text);
	background:rgba(57,47,82,.86);
}

.sessionRefChip{
	border:1px solid rgba(245,200,47,.34);
	background:rgba(56,46,82,.82);
	color:var(--gold);
	border-radius:999px;
	padding:6px 10px;
	margin-top:8px;
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size: var(--text-sm);
	font-weight:700;
	cursor:pointer;
}

.sessionRefChip svg{width:16px;height:16px;display:block}

@keyframes copyPulse{
	0%{transform:scale(1)}
	45%{transform:scale(1.05)}
	100%{transform:scale(1)}
}

#liveStatus.is-copied,
.sessionRefChip.is-copied,
.sessionPeek .btn.is-copied{
	animation:copyPulse .28s ease-out;
	border-color:rgba(245,200,47,.68);
	box-shadow:0 0 0 2px rgba(245,200,47,.18), 0 10px 22px rgba(19,13,33,.44);
}

#btnCopyLiveStatus{
	background:var(--gold-gradient);
	color:#241d12;
	border-color:transparent;
	box-shadow:0 0 10px rgba(245,200,47,.35), 0 0 3px rgba(245,200,47,.18) inset;
	font-weight:700;
}
#btnCopyLiveStatus:hover{filter:brightness(1.08)}

/*
  `.layout` is the vertical stack of screens/cards.
  Extra bottom padding avoids content being hidden behind fixed bottom bars.
*/
.layout{
	margin:18px auto 0;
	padding:0 0 130px;
	display:grid;
	gap:14px;
}

/*
  Surface components share the same elevated card language.
*/
.card,
.panel,
.modal__card,
.player-list-dropdown__inner{
	background:linear-gradient(180deg, rgba(45,38,66,.95), rgba(38,31,57,.92));
	border:1px solid var(--line);
	border-radius:14px;
	color:var(--text);
}

.card{padding:18px}

/*
	All top-level screens get a thin gold frame + subtle glow behind the panel.
	The pseudo-element sits behind each screen so the glow does not cover content.
*/
.layout > section[id^="screen"]{
	position:relative;
	isolation:isolate;
	border:1px solid var(--screen-gold-border);
	z-index:0;
}

.layout > section[id^="screen"]::after{
	content:"";
	position:absolute;
	inset:3px;
	border-radius:inherit;
	background:radial-gradient(ellipse at center, var(--screen-gold-glow), transparent 72%);
	filter:blur(12px);
	opacity:.7;
	z-index:-1;
	pointer-events:none;
}

/* Utility helpers used by JS to show/hide or mute text. */
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size: var(--text-xs)}

/*
	==========================================================================
	SCREEN TRANSITION
	==========================================================================
	When `showOnly()` reveals a screen it adds `.screen-enter`.
	A short fade+slide-up makes the switch feel app-like instead of jarring.
*/
@keyframes screenEnter{
	from{opacity:0;transform:translateY(6px)}
	to{opacity:1;transform:translateY(0)}
}
.screen-enter{animation:screenEnter var(--tv-dur-mid) var(--tv-ease) both}

/*
	==========================================================================
	BUTTON PRESS FEEDBACK
	==========================================================================
	A tiny scale-down on :active mimics a physical press — satisfying on touch
	and helpful as an instant visual cue that the tap registered.
	Duolingo, Discord, and most native apps use this pattern.
*/
button:active:not(:disabled),
.btn:active:not(:disabled),
.chip:active{transform:scale(.97);transition:transform var(--tv-dur-fast) var(--tv-ease)}

/*
	==========================================================================
	CARD HOVER LIFT & TAP
	==========================================================================
	On desktop, cards subtly float on hover (border glow + slight rise).
	On mobile, the :active press-down gives the same tactile feedback.
*/
.item,
.inventoryCard,
.landingSessionItem{
	transition:transform var(--tv-dur-mid) var(--tv-ease),
	           border-color var(--tv-dur-mid) ease,
	           box-shadow var(--tv-dur-mid) ease;
}
.item:hover,
.inventoryCard:hover,
.landingSessionItem:hover{
	transform:translateY(-2px);
}
.item:active,
.inventoryCard:active,
.landingSessionItem:active{
	transform:scale(.985);transition:transform var(--tv-dur-fast) var(--tv-ease);
}

/*
	==========================================================================
	COIN VALUE PULSE
	==========================================================================
	When JS adds `.coin-pulse` after a wallet update, the coin badge briefly
	glows gold — drawing the eye so the player notices their balance changed.
*/
@keyframes coinPulse{
	0%{box-shadow:0 0 0 0 rgba(245,200,47,.5)}
	70%{box-shadow:0 0 0 6px rgba(245,200,47,0)}
	100%{box-shadow:0 0 0 0 rgba(245,200,47,0)}
}
.coin-pulse{animation:coinPulse .5s var(--tv-ease)}

/*
	==========================================================================
	MODAL ENTRANCE / EXIT
	==========================================================================
	Showing/hiding modals with a combined backdrop-fade + card-scale feels
	polished and draws focus. The JS toggles `.modal--entering` / `.modal--leaving`.
*/
@keyframes modalBgIn{from{opacity:0}to{opacity:1}}
@keyframes modalCardIn{
	from{opacity:0;transform:scale(.95) translateY(8px)}
	to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes modalBgOut{from{opacity:1}to{opacity:0}}
@keyframes modalCardOut{
	from{opacity:1;transform:scale(1) translateY(0)}
	to{opacity:0;transform:scale(.95) translateY(8px)}
}
.modal--entering{animation:modalBgIn var(--tv-dur-slow) var(--tv-ease) both}
.modal--entering .modal__card,
.modal--entering .createModalCard{animation:modalCardIn var(--tv-dur-slow) var(--tv-ease-bounce) both}
.modal--leaving{animation:modalBgOut var(--tv-dur-mid) var(--tv-ease) both;pointer-events:none}
.modal--leaving .modal__card,
.modal--leaving .createModalCard{animation:modalCardOut var(--tv-dur-mid) var(--tv-ease) both}

/*
	==========================================================================
	TOAST EXIT
	==========================================================================
	Slide-down + fade when a toast is about to be removed, mirroring the entry.
*/
@keyframes toastOut{
	from{opacity:1;transform:translateY(0)}
	to{opacity:0;transform:translateY(8px)}
}
.toast--leaving{animation:toastOut .18s ease-in forwards}

/*
	==========================================================================
	OVERSCROLL CONTAINMENT
	==========================================================================
	Prevents the "rubber-band" pull-to-refresh/bounce on mobile browsers,
	which can feel broken in an app context. Each scrollable container that
	needs its own scroll should also set this so nested scrolls don't escape.
*/
html{overscroll-behavior:contain;scroll-behavior:smooth}

/*
	==========================================================================
	EMPTY STATE ILLUSTRATIONS
	==========================================================================
	Richer empty states with centered layout, muted icon, and call-to-action
	text so the user knows what to do next (inspired by Finch / DnD Beyond).
*/
.emptyState{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:8px;
	padding:28px 16px;
	color:var(--muted);
}
.emptyState__icon{font-size:40px;line-height:1;opacity:.55}
.emptyState__title{font-size:var(--text-2xl);font-weight:700;color:var(--text);opacity:.7}
.emptyState__hint{font-size:var(--text-lg);max-width:260px;line-height:1.4}

/*
	==========================================================================
	SKELETON LOADING PLACEHOLDER
	==========================================================================
	A shimmer card shown while Firestore data is loading.
	Uses a repeating CSS gradient animation — no JS needed for the shimmer.
*/
@keyframes shimmer{
	from{background-position:-400px 0}
	to{background-position:400px 0}
}
.skeleton{
	border-radius:12px;
	background:linear-gradient(90deg,
		rgba(57,47,82,.5) 0%,
		rgba(80,66,110,.6) 40%,
		rgba(57,47,82,.5) 80%);
	background-size:800px 100%;
	animation:shimmer 1.4s ease-in-out infinite;
}
.skeleton--card{height:72px;border-radius:14px}
.skeleton--line{height:14px;border-radius:6px;width:60%}
.skeleton--line-short{height:14px;border-radius:6px;width:35%}

/* Flexible row primitives used throughout forms and action groups. */
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row--inline{display:flex;align-items:center;gap:10px}
.row--end{justify-content:flex-end}

/* Keep a clear gap between text inputs and nearby action rows/buttons. */
.input + .row,
textarea.input + .row,
.input + .row--inline,
textarea.input + .row--inline,
.input + .row--end,
textarea.input + .row--end{
	margin-top:12px;
}

.row + .input,
.row + textarea.input,
.row--inline + .input,
.row--inline + textarea.input{
	margin-top:10px;
}

/* Headings default to fantasy display treatment; specific headings can override. */
h1,h2,h3,h4{margin:0;font-family:var(--font-heading);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
h2{font-size: var(--text-3xl)}
h3{font-size: var(--text-2xl)}

/* Preserve exact casing for the DM title string requested by user. */
#dmDashTitle{text-transform:none}

/* Subtle brand wordmark shown on dashboard screens instead of verbose title. */
.brand-wordmark{
	font-family:var(--font-heading);
	font-size:var(--text-xl);
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
	opacity:.7;
	line-height:1;
	margin-bottom:2px;
	user-select:none;
}
.brand-wordmark__accent{color:var(--gold);opacity:1}

/*
	==========================================================================
	BUTTON SYSTEM
	==========================================================================
	Two button variants:
	.btn          — Primary gold (call-to-action): "Create Session", "Join", "Save"
	.btn--ghost   — Secondary transparent: "Cancel", "Back", navigation

	BEGINNER NOTE — min-height:44px:
	Apple's Human Interface Guidelines recommend 44px minimum touch targets.
	This ensures buttons are easy to tap on phones, even for thick fingers.

	BEGINNER NOTE — var(--gold-gradient):
	Using a CSS variable for the gradient means we can change the gold color
	in one place (:root) and every button updates automatically.
*/
.btn{
	border:1px solid transparent;
	border-radius:10px;
	min-height:44px;
	padding:10px 18px;
	font-size: var(--text-2xl);
	line-height:1;
	font-weight:700;
	cursor:pointer;
	background:var(--gold-gradient);
	color:#241d12;
	box-shadow:var(--gold-shadow);
}

.btn:hover{filter:brightness(1.06)}

.btn--ghost{
	background:rgba(57,47,82,.7);
	color:var(--text);
	border-color:var(--line);
	box-shadow:none;
}

.btn--small{font-size: var(--text-xl);padding:8px 14px;min-height:40px}

/*
	Global button hover polish:
	- Applies to every real <button> in the app
	- Keeps glow extremely subtle so it feels premium, not flashy
*/
button{
	transition:box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

button:hover:not(:disabled){
	box-shadow:0 0 0 1px rgba(245,200,47,.14), 0 4px 12px rgba(245,200,47,.08);
}

/* Form controls share dark-surface + gold focus ring style. */
.label{display:block;color:#ddd1f4;font-size: var(--text-2xl);margin:8px 0}

.input{
	width:100%;
	min-height:48px;
	border-radius:10px;
	border:1px solid rgba(203,177,250,.18);
	background:rgba(38,31,57,.94);
	color:var(--text);
	padding:10px 14px;
	font-size: var(--text-2xl);
}

.input::placeholder{color:#9388af}

.input:focus{
	outline:none;
	border-color:var(--line-strong);
	box-shadow:0 0 0 3px rgba(245,200,47,.14);
}

textarea.input{resize:vertical;min-height:120px}

/* Horizontal separator line. */
.hr{border:0;height:1px;background:rgba(190,167,231,.12);margin:12px 0}

/* DM dashboard header row: title left, logout right. */
.dashHeader{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px}

.playerCountInline{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size: var(--text-xl);
	line-height:1;
	padding:10px 12px;
	cursor:pointer;
}

/* Split layout helpers (currently single pane by design). */
.split{display:grid;grid-template-columns:1fr;gap:12px}
.singlePane{grid-template-columns:1fr}

.panel{padding:14px}
.panel--main h3{display:none}

.dmSocialHeader{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:8px;
}

#dmSplit.social-mode #dmSocialPanel{display:block !important}
#dmSplit.social-mode #dmHandoutsPanel{display:none !important}
#dmSocialPanel{text-align:center}
#dmSocialPanel .socialMeta,
#dmSocialPanel .dmSocialHeader,
#dmSocialPanel .list,
#dmSocialPanel .emptyState{text-align:left}

/* Add/search tools row above handout list. */
.dashTools{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-bottom:14px}

/* Filter chip row (All/Loot/Npc/etc.). */
.chipRow{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 16px}

.chip{
	border:1px solid var(--line);
	background:rgba(57,47,82,.8);
	color:#bfb3d8;
	border-radius:999px;
	padding:8px 14px;
	font-size: var(--text-2xl);
	line-height:1;
	cursor:pointer;
}

.chip--active{
	color:#2a2110;
	background:var(--gold-gradient);
	border-color:transparent;
	box-shadow:var(--gold-shadow);
}

/* Per-disposition chip colours */
.chip--unknown.chip--active{
	background:linear-gradient(140deg,#b0b8c4 0%,#8e96a4 100%);
	color:#23252a;
	box-shadow:0 2px 10px rgba(160,170,185,.35);
}
.chip--friendly.chip--active{
	background:linear-gradient(140deg,#5ec26a 0%,#3a9e48 100%);
	color:#0f2613;
	box-shadow:0 2px 10px rgba(58,158,72,.35);
}
.chip--enemy.chip--active{
	background:linear-gradient(140deg,#e87040 0%,#c9432a 100%);
	color:#1a0c06;
	box-shadow:0 2px 10px rgba(200,67,42,.35);
}
.chip--neutral.chip--active{
	background:var(--gold-gradient);
	color:#2a2110;
	box-shadow:var(--gold-shadow);
}

/* Generic list container used for handouts and players. */
.list{display:grid;gap:12px}

/*
  Card row representing one handout/player.
  `item--revealed` adds the requested subtle glow for revealed handouts.
*/
.item{
	border:1px solid var(--line);
	border-radius:14px;
	background:linear-gradient(180deg, rgba(49,41,72,.93), rgba(43,36,62,.92));
	padding:14px;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:12px;
	cursor:pointer;
}

.item:hover{border-color:rgba(245,200,47,.42)}

.item--revealed{
	border-color:rgba(245,200,47,.62);
	box-shadow:
		0 0 0 1px rgba(245,200,47,.22) inset,
		0 10px 26px rgba(245,200,47,.14);
}

.item__meta{display:flex;gap:12px;align-items:flex-start}

/* Visual identity token shown per handout (emoji selected in builder). */
.itemEmoji{
	width:34px;
	height:34px;
	display:grid;
	place-items:center;
	border-radius:8px;
	background:rgba(255,255,255,.04);
	border:1px solid var(--line);
}

.itemIconSvg{width:20px;height:20px;display:block}
.itemThumbIcon{width:22px;height:22px;display:block}

.tag{
	display:inline-flex;
	border-radius:999px;
	padding:4px 9px;
	border:1px solid var(--line);
	background:rgba(62,52,90,.72);
	color:#c9bddf;
	font-size: var(--text-xl);
	text-transform:uppercase;
}

/* QR container ensures code is framed and readable. */
.qr{
	width:272px;height:272px;
	display:grid;place-items:center;
	border-radius:12px;
	background:#fff;
	margin:8px auto;
	overflow:hidden;
	border:6px solid #c9a84c;
	box-shadow:0 0 0 4px rgba(201,168,76,.28), 0 0 26px 4px rgba(201,168,76,.2), inset 0 0 0 2px rgba(201,168,76,.14);
}

.qrReader{border:1px solid var(--line);border-radius:12px;overflow:hidden}

/*
  Social panel refinements to feel native/app-like:
  - grouped metadata rows
  - compact action row
  - stronger visual hierarchy near QR block
*/
.socialMeta{
	display:grid;
	gap:8px;
	margin:8px 0 12px;
	padding:10px 12px;
	border:1px solid var(--line);
	border-radius:10px;
	background:rgba(35,29,53,.74);
}

.socialMeta__row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	font-size: var(--text-xl);
}

.socialActions{
	margin-top:10px;
	gap:10px;
}

.socialActions .btn{
	font-size: var(--text-xl);
	min-height:42px;
	padding:8px 12px;
}

/*
  Manual DM assignment controls:
  compact layout inside modal claim controls.
*/
.assignRow{
	margin-top:10px;
	padding:10px;
	border:1px solid var(--line);
	border-radius:10px;
	background:rgba(35,29,53,.62);
}

.assignRow .label{
	font-size: var(--text-lg);
	margin:0;
	color:var(--muted);
	text-transform:none;
}

.assignRow .input{
	min-height:40px;
	font-size: var(--text-xl);
}

.assignRow .btn{
	font-size: var(--text-xl);
	min-height:40px;
	padding:8px 12px;
}

/*
	Modal backdrop and card treatment for dialogs/overlays.
	BEGINNER NOTE — position:fixed + inset:0 creates a full-viewport overlay.
	z-index:90 ensures the modal sits above all other content.
	display:grid + place-items centers the card both horizontally and vertically.
	overflow-y:auto lets the user scroll long handout details within the modal.
*/
.modal{
	position:fixed;
	inset:0;
	z-index:90;
	background:rgba(9,7,13,.74);
	display:grid;
	place-items:start center;
	padding:20px;
	overflow-y:auto;
}

.modal__card{
	width:min(760px,96vw);
	max-height:calc(100dvh - 40px);
	padding:18px;
	border-radius:14px;
	box-shadow:0 26px 70px rgba(0,0,0,.5);
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	display:flex;
	flex-direction:column;
	gap:10px;
	overscroll-behavior:contain;
}

.createModalCard{max-height:88dvh;overflow:auto}

.modal__top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:4px;
	position:static;
	top:auto;
	z-index:auto;
	padding:0;
	background:transparent;
}

#modalTitle{
	text-transform:none;
	font-size:clamp(24px, 3.8vw, 36px);
	line-height:1.12;
	word-break:break-word;
}

.modal #modalTag{
	font-size: var(--text-base);
	padding:3px 9px;
}

.modal .btn{
	font-size: var(--text-lg);
	min-height:46px;
}

.modalText{
	font-size: var(--text-lg);
	line-height:1.34;
}

/* Icon button styles used in modals and compact tool actions. */
.iconBtn,
.iconBtnLarge{
	border:1px solid var(--line);
	border-radius:10px;
	background:rgba(57,47,82,.72);
	color:#ddd2f4;
	cursor:pointer;
}

.iconBtn{min-height:40px;min-width:40px;padding:6px 10px;font-size: var(--text-xl)}

.iconBtnLarge{
	width:46px;height:46px;
	display:flex;align-items:center;justify-content:center;
}

/* Active ambience transport state highlight (requested yellow indicator). */
.iconBtnLarge.is-active{
	background:var(--gold-gradient);
	color:#241d12;
	border-color:transparent;
	box-shadow:var(--gold-shadow);
}

/* Content blocks inside modal body. */
.modalText{
	background:rgba(36,30,53,.82);
	border:1px solid rgba(191,170,226,.14);
	border-radius:12px;
	padding:11px 13px;
	margin-top:8px;
	white-space:pre-wrap;
}

/* Optional generated handout image shown in detail modal. */
.handoutModalImageRow{
	display:flex;
	align-items:flex-start;
	gap:12px;
	justify-content:center;
	margin:2px auto 8px;
}
.handoutModalImageRow .handoutModalImageWrap{
	margin:0;
}
.btnPlayerClaim{
	display:flex;
	align-items:center;
	gap:6px;
	white-space:nowrap;
	font-size:var(--text-base);
	padding:8px 14px;
	border-radius:12px;
	margin-top:auto;
	margin-bottom:auto;
}
.handoutModalImageWrap{
	width:min(168px, 46vw);
	height:min(168px, 46vw);
	min-height:min(168px, 46vw);
	flex: 0 0 auto;
	border-radius:999px;
	overflow:hidden;
	border:1px solid var(--line);
	margin:2px auto 8px;
	display:block;
}

.handoutModalImage{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:49% 50%;
	transform:scale(1.56);
	transform-origin:center;
	display:block;
}

#modalDMClaimControls > .row:not(.assignRow){
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:10px;
	width:100%;
	align-items:stretch;
}

#modalDMClaimControls > .row:not(.assignRow) .btn{
	width:100%;
	min-height:46px;
}

/* Secret block inside handout modal. */
.secret{
	margin-top:12px;
	padding:12px;
	border-radius:12px;
	border:1px solid rgba(245,200,47,.4);
	background:rgba(64,53,33,.25);
}

.secret__label{font-size: var(--text-lg);color:var(--gold);font-weight:800;letter-spacing:.04em;text-transform:uppercase}

.secretBlock{
	border:1px solid rgba(191,170,226,.14);
	border-radius:12px;
	padding:12px;
	background:rgba(40,33,58,.58);
}

/* DM handout moderation controls (reveal + edit actions). */
.revealStarRow{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:10px;
	margin:6px 0 12px;
}

.revealStarBtn{
	min-height:64px;
	border-radius:14px;
	border:1px solid rgba(245,200,47,.36);
	background:linear-gradient(180deg, rgba(76,63,108,.92), rgba(57,47,82,.9));
	color:var(--text);
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:10px;
	padding:10px 12px;
	font-size: var(--text-2xl);
	font-weight:700;
	cursor:pointer;
	box-shadow:0 10px 30px rgba(11,8,18,.35);
}

.revealStarBtn:hover{filter:brightness(1.05)}

.revealStarBtn__icon{
	width:36px;
	height:36px;
	border-radius:999px;
	display:grid;
	place-items:center;
	background:rgba(245,200,47,.16);
	flex:0 0 auto;
}

.revealStarBtn__iconSvg{width:21px;height:21px;display:block}

.revealStarBtn__text{line-height:1.05;text-align:left}

.revealStarBtn--active{
	background:var(--gold-gradient);
	color:#241d12;
	border-color:transparent;
	box-shadow:0 10px 30px rgba(245,200,47,.3);
}

.revealStarBtn--active .revealStarBtn__icon{
	background:rgba(36,29,18,.2);
}

.modalActionRow{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:10px;
	align-items:stretch;
}

.modalActionRow--bottom{
	/*
		Beginner note:
		`position: sticky` keeps Save/Edit/Delete pinned to the bottom edge
		of the scrolling modal so actions are always easy to reach.
	*/
	position:sticky;
	bottom:0;
	padding-top:10px;
	background:linear-gradient(180deg, rgba(38,31,57,.0), rgba(38,31,57,.94) 32%);
	z-index:2;
}

.modalActionRow .btn{width:100%;min-height:46px}

.modalSaveState{
	margin:8px 2px 0;
	font-size: var(--text-lg);
	color:var(--muted);
	min-height:1.2em;
}

.modalSaveState.is-dirty{color:var(--gold)}

.btn--active{
	background:var(--gold-gradient);
	color:#241d12;
	border-color:transparent;
	box-shadow:var(--gold-shadow);
}

/*
	Non-blocking toast notifications.
	BEGINNER NOTE — pointer-events:none:
	The toast container covers part of the screen but is invisible.
	pointer-events:none means clicks pass through it to the content behind.
	Individual toast items re-enable pointer-events so they can be interacted with.
	z-index:120 is above the modal (90) so toasts show even during modal views.
*/
.toastStack{
	position:fixed;
	right:12px;
	bottom:calc(78px + env(safe-area-inset-bottom));
	z-index:120;
	display:grid;
	gap:8px;
	width:min(380px, calc(100vw - 24px));
	pointer-events:none;
}

.toast{
	border:1px solid var(--line);
	border-radius:12px;
	background:rgba(43,36,62,.96);
	color:var(--text);
	padding:10px 12px;
	font-size: var(--text-xl);
	box-shadow:0 10px 28px rgba(0,0,0,.35);
	opacity:0;
	transform:translateY(8px);
	animation:toast-in .18s ease-out forwards;
}

.toast--success{border-color:rgba(45,204,113,.55)}
.toast--error{border-color:rgba(220,47,47,.58)}

@keyframes toast-in{
	from{opacity:0;transform:translateY(8px)}
	to{opacity:1;transform:translateY(0)}
}

.modalTextEditable{
	outline:none;
	border-color:var(--line-strong);
	box-shadow:0 0 0 2px rgba(245,200,47,.2) inset;
	background:rgba(50,41,72,.92);
}

#modalTitle.modalTextEditable{
	border:1px solid var(--line-strong);
	border-radius:12px;
	padding:10px 12px;
	margin-top:6px;
	margin-bottom:6px;
}

/*
  Create modal personality controls (inspired by reference screenshots):
  icon grid, color dots, AI portrait card.
*/
.iconPickerGrid{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	gap:8px;
}

.iconTile{
	min-height:56px;
	border:1px solid var(--line);
	border-radius:10px;
	background:rgba(57,47,82,.5);
	cursor:pointer;
	color:var(--text);
	display:grid;
	place-items:center;
}

.iconTile__svg{width:22px;height:22px;display:block}

.iconTile--active{
	border-color:var(--line-strong);
	box-shadow:0 0 0 1px rgba(245,200,47,.3) inset;
	background:rgba(70,57,92,.7);
}

.colorRow{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.colorDot{
	width:34px;
	height:34px;
	border-radius:999px;
	border:2px solid rgba(255,255,255,.2);
	background:var(--dot);
	cursor:pointer;
}

.colorDot--active{
	box-shadow:0 0 0 2px rgba(245,200,47,.7);
	border-color:#fff;
}

.aiBlock{
	border:1px solid rgba(191,170,226,.14);
	border-radius:12px;
	padding:12px;
	background:rgba(40,33,58,.58);
}

.aiBlock__head{
	justify-content:space-between;
	align-items:center;
}

/*
	Create modal top portrait treatment:
	- circular portrait frame (profile-like)
	- placeholder icon while no image is available
	- status line for generation progress/errors
*/
.portraitHero{
	display:grid;
	justify-items:center;
	gap:10px;
	padding:10px 12px 14px;
	border:1px solid rgba(191,170,226,.14);
	border-radius:12px;
	background:rgba(40,33,58,.48);
	margin-bottom:10px;
}

.portraitFrame{
	position:relative;
	width:132px;
	height:132px;
	border-radius:999px;
	overflow:hidden;
	border:2px solid rgba(245,200,47,.42);
	background:radial-gradient(circle at 32% 24%, rgba(255,255,255,.12), rgba(0,0,0,.22));
	box-shadow:0 10px 26px rgba(0,0,0,.3), 0 0 0 1px rgba(245,200,47,.16) inset;
}

.portraitPreview{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	transform:scale(1.14);
	transform-origin:center;
}

.portraitPlaceholder{
	position:absolute;
	inset:0;
	display:grid;
	place-items:center;
	color:rgba(255,230,160,.82);
	text-shadow:0 3px 10px rgba(0,0,0,.45);
}

.portraitPlaceholder svg{width:54px;height:54px;display:block}

.btnInlineIcon{width:20px;height:20px;display:inline-block;vertical-align:-3px;margin-right:8px}

.imageNavRow{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	flex-wrap:wrap;
}

.imageNavBtn{
	width:40px;
	height:40px;
	border-radius:10px;
	border:1px solid var(--line);
	background:rgba(57,47,82,.76);
	color:var(--text);
	display:grid;
	place-items:center;
	cursor:pointer;
}

.imageNavBtn:hover{filter:brightness(1.08)}
.imageNavBtn:active{transform:translateY(1px)}
.imageNavBtn.is-active{border-color:var(--line-strong);color:var(--gold)}

.imageNavBtn svg{
	width:20px;
	height:20px;
	display:block;
}

.imagePickerPanel{
	width:min(560px, 100%);
	border:1px solid rgba(191,170,226,.18);
	border-radius:12px;
	padding:10px;
	background:rgba(33,27,50,.88);
}

.imagePickerPanel__title{
	margin-bottom:8px;
	text-align:center;
}

.imagePickerGrid{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:8px;
	max-height:220px;
	overflow:auto;
	padding-right:2px;
}

.imagePickerTile{
	border:1px solid var(--line);
	border-radius:8px;
	background:rgba(57,47,82,.56);
	padding:0;
	overflow:hidden;
	cursor:pointer;
	aspect-ratio:1/1;
}

.imagePickerTile img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	transform:scale(1.14);
	transform-origin:center;
	display:block;
}

.imagePickerTile.is-active{
	border-color:var(--line-strong);
	box-shadow:0 0 0 2px rgba(245,200,47,.22) inset;
}

#dmImageStatus{
	text-align:center;
	min-height:1.1rem;
}

.handoutPreview{
	margin-top:8px;
	width:100%;
	max-height:250px;
	object-fit:cover;
	border-radius:10px;
	border:1px solid var(--line);
}

/*
	Right-side thumbnail for handout rows in DM/player overview lists.
	Gives each handout a compact visual identity at a glance.
*/
.item__thumb{
	width:48px;
	height:48px;
	border-radius:10px;
	overflow:hidden;
	border:1px solid var(--line);
	background:rgba(255,255,255,.04);
	display:grid;
	place-items:center;
	color:#d6c8ee;
	font-size: var(--text-lg);
	flex:0 0 auto;
}

.item__thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	transform:scale(1.14);
	transform-origin:center;
	display:block;
}

/* Floating players dropdown (triggered by player count pill). */
.player-list-dropdown{
	position:fixed;
	top:78px;
	right:20px;
	z-index:101;
	width:min(440px,92vw);
}

.player-list-dropdown__inner{padding:14px}

.playerOnlineBtn{
	width:100%;
	display:flex;
	align-items:center;
	gap:10px;
	border:1px solid var(--line);
	border-radius:10px;
	padding:10px 12px;
	background:rgba(53,45,76,.82);
	font-size: var(--text-2xl);
	color:var(--text);
	text-align:left;
	cursor:pointer;
}

.playerOnlineBtn__avatar{
	width:34px;
	height:34px;
	border-radius:999px;
	border:1px solid var(--line);
	background:rgba(66,56,96,.78);
	display:grid;
	place-items:center;
	color:#e6d9ff;
	font-size: var(--text-lg);
	line-height:1;
	overflow:hidden;
	flex:0 0 auto;
}

.playerOnlineBtn__avatarImg{width:100%;height:100%;object-fit:cover}
.playerOnlineBtn__name{font-size: var(--text-xl)}

/*
	==========================================================================
	BOTTOM BAR — App-style navigation strip
	==========================================================================
	Fixed to the bottom of the viewport like a native mobile app tab bar.
	Contains role-aware buttons: Ambience, Social (DM only), Handouts,
	Inventory, Settings.

	TECHNIQUE NOTE:
	env(safe-area-inset-bottom) adds padding on phones with curved screens or
	gesture bars (iPhone notch, Android nav pill) so buttons aren't hidden.
*/
.bottom-bar{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:60;
	padding:0;
}

.bottom-bar__inner{
	/*
		Beginner note:
		Centered button cluster gives better thumb ergonomics on phones than
		left-aligned controls.
	*/
	width:100%;
	border-radius:0;
	border-left:0;
	border-right:0;
	display:flex;
	gap:12px;
	padding:10px 14px;
	align-items:center;
	justify-content:center;
}

.bottom-bar__btn{
	/* Square hit-area makes tapping easier and visually balanced. */
	border:1px solid var(--line);
	background:rgba(57,47,82,.82);
	color:#cfc4e6;
	border-radius:10px;
	width:46px;
	height:46px;
	padding:0;
	display:flex;
	align-items:center;
	gap:8px;
	justify-content:center;
	cursor:pointer;
	font-size: var(--text-xl);
}

.bottom-bar__btn svg{width:22px;height:22px}
.bottom-bar__btn.is-active{
	background:var(--gold-gradient);
	color:#241d12;
	border-color:transparent;
	box-shadow:var(--gold-shadow);
}

/*
	Notification dot: a small circle layered on a bottom-bar button
	to signal new unread content (new handout revealed, etc.).
*/
.bottom-bar__btn{position:relative}
.notif-dot{
	position:absolute;
	top:4px;right:4px;
	width:8px;height:8px;
	border-radius:50%;
	background:var(--danger);
	box-shadow:0 0 0 2px var(--surface);
	pointer-events:none;
}

.settingsCard{
	border:1px solid var(--line);
	border-radius:14px;
	padding:14px;
	background:rgba(47,39,70,.7);
}

#screenSettings .dashHeader h2,
#screenSettingsProfile .dashHeader h2{
	font-family:var(--font-ui);
	text-transform:none;
	letter-spacing:0;
	color:var(--text);
}

#screenSettings .dashHeader .muted,
#screenSettingsProfile .dashHeader .muted{
	color:var(--muted);
}

.settingsMenu{
	display:grid;
	gap:10px;
}

.settingsMenu .btn{
	justify-self:stretch;
	width:100%;
	min-width:0;
}

.settingsRoleSwitch .btn{
	width:100%;
	min-width:0;
	justify-self:stretch;
}

.settingsAppearance{
	border:1px solid var(--line);
	border-radius:14px;
	padding:12px;
	background:rgba(47,39,70,.6);
}

.settingsAppearance .label{
	margin:0 0 8px;
	font-size: var(--text-xl);
}

.settingsAppearance__options{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:8px;
}

.settingsAppearance__options .btn{
	width:100%;
	min-width:0;
	justify-self:stretch;
}

/* Role switching section in Settings */
.settingsRoleSwitch{
	border:1px solid var(--line);
	border-radius:14px;
	padding:12px;
	background:rgba(47,39,70,.6);
}
.settingsRoleSwitch .label{margin:0 0 8px;font-size:var(--text-xl)}
.dmPinPrompt{display:grid;gap:10px;margin-top:8px}

.settingsCard__head{
	display:flex;
	gap:14px;
	align-items:flex-start;
	margin-bottom:12px;
	flex-wrap:wrap;
}

.settingsAvatarWrap{
	width:96px;
	height:96px;
	border-radius:999px;
	overflow:hidden;
	border:1px solid var(--line);
	background:rgba(58,49,84,.82);
	flex:0 0 auto;
	display:grid;
	place-items:center;
}

.settingsAvatar{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.settingsAvatarPlaceholder{
	width:56%;
	height:56%;
	color:#dccdf2;
}

.settingsAvatarPlaceholder svg{width:100%;height:100%;display:block}

.settingsAvatarActions{
	flex:1 1 280px;
	min-width:220px;
}

.characterSheetCameraPanel{
	border:1px solid var(--line);
	border-radius:12px;
	padding:10px;
	background:rgba(37,30,56,.86);
	display:grid;
	gap:10px;
}

.characterSheetVideo{
	width:100%;
	max-height:320px;
	border-radius:10px;
	border:1px solid var(--line);
	background:#000;
	object-fit:cover;
}

.profileStatsGrid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:8px 12px;
}

/* Ambience strip floats directly above bottom bar. */
.ambience-bar{
	position:fixed;
	left:0;
	right:0;
	bottom:72px;
	z-index:65;
	display:flex;
	justify-content:center;
	padding:0;
	pointer-events:none;
}

.ambience-bar.hidden{display:none !important}

.ambience-bar__inner{
	width:100%;
	border-radius:0;
	border-left:0;
	border-right:0;
	pointer-events:auto;
	padding:10px 14px;
}

.ambience-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dm-audio-controls{display:flex;align-items:center;gap:8px}

/* Browser native range color for volume track thumb/active segment. */
#dmVolume{accent-color:var(--gold)}

/*
	==========================================================================
	INVENTORY SYSTEM STYLES
	==========================================================================
	The inventory screen displays:
	- Party Treasury (DM only) — shared coin pool with distribute/grant controls
	- Per-player sections — each player's items + personal coin pouch
	- Coin controls — +/- buttons for each denomination (platinum/gold/silver/bronze)
	- Item cards — individual inventory items with edit/delete actions

	LAYOUT NOTE:
	Coins use a 4-column grid (one column per denomination).
	Items use a vertical list with card-style rows.
*/

/* Coin section (shared between party treasury and personal wallets) */
.coinSection{
	border:1px solid var(--line);
	border-radius:14px;
	padding:14px;
	background:rgba(47,39,70,.55);
	margin-bottom:14px;
}
.coinSection__head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:10px;
}
.coinSection__head h3{margin:0;font-size:var(--text-xl)}

.coinRow{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:8px;
}

.coinItem{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	padding:8px 4px;
	border:1px solid var(--line);
	border-radius:10px;
	background:rgba(38,31,57,.7);
}

.coinIcon{
	width:38px;
	height:38px;
	display:block;
}
.coinIcon svg{width:100%;height:100%;display:block}
.coinIcon--platinum{color:#7ec8e3;filter:drop-shadow(0 0 4px rgba(126,200,227,.55))}
.coinIcon--gold{color:var(--gold);filter:drop-shadow(0 0 4px rgba(201,168,76,.55))}
.coinIcon--silver{color:#a8b0b8;filter:drop-shadow(0 0 4px rgba(168,176,184,.5))}
.coinIcon--bronze{color:#c68c53;filter:drop-shadow(0 0 4px rgba(198,140,83,.5))}

.coinIcon circle{fill:currentColor;stroke:currentColor;stroke-width:1}
.coinIcon text{fill:#1c1625}
.coinIcon--gold circle{fill:#c9a84c;stroke:#b08a30}
.coinIcon--gold text{fill:#2a1f08}
.coinIcon--platinum circle{fill:#7ec8e3;stroke:#5aa8c6}
.coinIcon--platinum text{fill:#1a1e24}
.coinIcon--silver circle{fill:#a8b0b8;stroke:#8a939c}
.coinIcon--silver text{fill:#1a1e24}
.coinIcon--bronze circle{fill:#c68c53;stroke:#a87040}
.coinIcon--bronze text{fill:#2a1508}

.coinValue{
	font-size:var(--text-2xl);
	font-weight:700;
	line-height:1;
	min-width:2ch;
	text-align:center;
}

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

.coinBtn{
	width:34px;
	height:34px;
	border-radius:8px;
	border:1px solid var(--line);
	background:rgba(57,47,82,.8);
	color:var(--text);
	font-size:var(--text-lg);
	font-weight:700;
	cursor:pointer;
	display:grid;
	place-items:center;
	line-height:1;
	padding:0;
}
.coinBtn:hover{border-color:var(--line-strong)}
.coinBtn{-webkit-user-select:none;user-select:none;touch-action:none}

/* Player inventory sections */
.inventoryPlayers{display:grid;gap:14px}

.inventoryPlayerSection{
	border:1px solid var(--line);
	border-radius:14px;
	padding:14px;
	background:rgba(42,35,61,.7);
	border-left:3px solid rgba(245,200,47,.35);
}

.inventoryPlayerHeader{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:10px;
	cursor:pointer;
}
.inventoryPlayerHeader h3{
	margin:0;
	font-size:var(--text-xl);
	display:flex;
	align-items:center;
	gap:8px;
}
.inventoryPlayerHeader__chevron{
	width:18px;
	height:18px;
	transition:transform .18s ease;
	color:var(--muted);
}
.inventoryPlayerHeader__chevron.is-open{transform:rotate(90deg)}

.inventoryPlayerCoins{margin-bottom:10px}

.inventoryItemList{display:grid;gap:10px}

.inventoryCard{
	border:1px solid var(--line);
	border-radius:12px;
	padding:12px;
	background:linear-gradient(180deg, rgba(49,41,72,.93), rgba(43,36,62,.9));
	display:flex;
	gap:12px;
	align-items:flex-start;
}
.inventoryCard:hover{border-color:rgba(148,169,199,.42)}

.inventoryCard__avatar{
	width:48px;
	height:48px;
	border-radius:10px;
	overflow:hidden;
	flex:0 0 auto;
	border:1.5px solid var(--gold);
	background:rgba(57,47,82,.5);
	display:grid;
	place-items:center;
	box-shadow:0 0 8px rgba(245,200,47,.3), 0 0 2px rgba(245,200,47,.15) inset;
}
.inventoryCard__avatar img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.18);transform-origin:center}
.inventoryCard__avatar svg{width:24px;height:24px;color:var(--muted)}

.inventoryCard__body{flex:1;min-width:0}
.inventoryCard__name{font-weight:700;font-size:var(--text-lg);line-height:1.2}
.inventoryCard__desc{
	font-size:var(--text-sm);
	color:var(--muted);
	line-height:1.3;
	margin-top:2px;
	display:-webkit-box;
	-webkit-line-clamp:2;
	line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.inventoryCard__right{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:4px;
	flex:0 0 auto;
}
.inventoryCard__amount{
	font-size:var(--text-lg);
	font-weight:700;
	color:var(--gold);
	background:rgba(245,200,47,.12);
	border:1px solid rgba(245,200,47,.3);
	border-radius:8px;
	padding:2px 8px;
	line-height:1.2;
}
.inventoryCard__actions{display:flex;gap:4px}
.inventoryCard__actionBtn{
	width:34px;
	height:34px;
	border-radius:8px;
	border:1px solid var(--line);
	background:rgba(57,47,82,.8);
	color:var(--muted);
	cursor:pointer;
	display:grid;
	place-items:center;
	padding:0;
}
.inventoryCard__actionBtn:hover{border-color:var(--line-strong);color:var(--text)}
.inventoryCard__actionBtn--delete:hover{border-color:var(--danger);color:var(--danger)}
.inventoryCard__actionBtn svg{width:14px;height:14px;display:block}

/* Floating add-item button with a pulsing gold glow to invite action. */
.fab-inventory{
	position:fixed;
	right:24px;
	bottom:calc(88px + env(safe-area-inset-bottom));
	width:52px;
	height:52px;
	border-radius:999px;
	border:none;
	background:var(--gold-gradient);
	color:#241d12;
	box-shadow:0 8px 24px rgba(245,200,47,.3);
	cursor:pointer;
	display:grid;
	place-items:center;
	z-index:60;
	transition:transform var(--tv-dur-fast) var(--tv-ease), box-shadow var(--tv-dur-mid) ease;
}
.fab-inventory svg{width:24px;height:24px;display:block}
.fab-inventory:hover{filter:brightness(1.08);box-shadow:0 6px 32px rgba(245,200,47,.42)}
.fab-inventory:active{transform:scale(.92)}

/* Create inventory modal accent styling (distinguish from handout modal) */
.createInventoryCard{
	max-height:88dvh;
	overflow:auto;
	border-color:rgba(148,169,199,.3);
}
.createInventoryCard .modal__top{
	border-bottom:1px solid rgba(148,169,199,.18);
	padding-bottom:8px;
}
.createInventoryCard h3{color:#94a9c7}

/* Inventory avatar picker */
.inventoryAvatarPicker{
	display:flex;
	align-items:center;
	gap:12px;
	margin:8px 0 4px;
}
.inventoryAvatarFrame{
	width:72px;
	height:72px;
	border-radius:12px;
	overflow:hidden;
	border:1.5px solid var(--gold);
	background:rgba(57,47,82,.5);
	display:grid;
	place-items:center;
	flex:0 0 auto;
	box-shadow:0 0 10px rgba(245,200,47,.35), 0 0 3px rgba(245,200,47,.18) inset;
}
.inventoryAvatarImg{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.18);transform-origin:center}
.inventoryAvatarPlaceholder{width:32px;height:32px;color:var(--muted)}
.inventoryAvatarPlaceholder svg{width:100%;height:100%;display:block}
.inventoryAvatarNav{display:flex;gap:6px;flex-wrap:wrap}
.invGalleryPanel{
	width:100%;
	border:1px solid rgba(191,170,226,.18);
	border-radius:12px;
	padding:10px;
	background:rgba(33,27,50,.88);
	margin-top:6px;
}
.invGalleryPanel.hidden{display:none}
.invGalleryGrid{
	display:grid;
	grid-template-columns:repeat(5, minmax(0, 1fr));
	gap:6px;
	max-height:200px;
	overflow:auto;
	padding-right:2px;
}
.invGalleryTile{
	border:1px solid var(--line);
	border-radius:8px;
	background:rgba(57,47,82,.56);
	padding:0;
	overflow:hidden;
	cursor:pointer;
	aspect-ratio:1/1;
}
.invGalleryTile img{
	width:100%;height:100%;object-fit:cover;object-position:center;
	transform:scale(1.18);transform-origin:center;display:block;
}
.invGalleryTile.is-active{
	border-color:var(--gold);
	box-shadow:0 0 0 2px rgba(245,200,47,.22) inset;
}

/* Claimed handouts sub-section within inventory */
.inventoryClaimedSection{
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid var(--line);
}
.inventoryClaimedSection h4{
	font-size:var(--text-lg);
	margin:0 0 8px;
	color:var(--muted);
	text-transform:uppercase;
	letter-spacing:.04em;
}

/* ── DM treasury distribute controls ── */
.treasuryDistributeWrap{
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid var(--line);
}
.treasuryDistribute{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.treasuryDistribute__row{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	align-items:center;
}
.treasuryDistribute__row .input--small{
	min-height:36px;
	font-size:var(--text-base);
	padding:6px 8px;
}
.treasuryDistribute__row .btn--small{
	min-height:36px;
	padding:6px 14px;
	white-space:nowrap;
}

/* ── DM per-player grant coins row ── */
.grantCoinsRow{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	align-items:center;
	margin-top:8px;
	padding:8px 10px;
	border-radius:10px;
	background:rgba(57,47,82,.4);
	border:1px solid var(--line);
}
.grantCoinsRow .input--small{
	min-height:34px;
	font-size:var(--text-sm);
	padding:5px 8px;
}
.grantCoinsRow .btn--small{
	min-height:34px;
	padding:5px 12px;
}

/*
	==========================================================================
	LANDING SCREEN
	==========================================================================
	Auth-first design with hero title + auth card / signed-in home section.

	BEGINNER NOTE — clamp(min, preferred, max):
	clamp() is a CSS function that constrains a value between a minimum and
	maximum. Example: clamp(32px, 7vw, 72px) means "use 7% of viewport width,
	but never go below 32px or above 72px." This creates responsive padding
	that adapts to screen size without needing a media query.

	BEGINNER NOTE — dvh (dynamic viewport height):
	100dvh is the actual visible height on mobile browsers, accounting for
	the browser's address bar that shrinks/grows when you scroll.
	Regular vh includes the hidden area behind the address bar.
*/
.landingCard{
	background:linear-gradient(180deg, rgba(41,34,62,.96), rgba(36,28,57,.92));
	min-height:78dvh;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
	/* Let the whole screen breathe horizontally but scale with viewport width */
	padding:36px clamp(32px, 7vw, 72px);
}

.landingHero{max-width:640px;width:100%;margin:0 auto;text-align:center}

.landingTitle{font-size: var(--text-4xl);line-height:1.04;text-transform:uppercase}
.landingTitle span{color:var(--gold)}

.landingLead{font-size: var(--text-3xl);line-height:1.35;color:#c1b4da;margin:12px auto 0;max-width:100%}

/* ── Landing logo image ── */
.landing-logo{
	width:148px;height:148px;
	border:none;
	border-radius:18px;
	background:transparent;
	margin:0 auto 14px;
	position:relative;
	display:grid;
	place-items:center;
	padding:0;
	box-shadow:none;
}

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

/* ── Auth card ── */
.auth-card{
	/* Wider, responsive auth surface that scales with page width */
	width:100%;
	max-width:640px;
	margin:0 auto;
	background:rgba(42,35,61,.85);
	border:1px solid var(--line);
	border-radius:16px;
	padding:28px 32px;
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	position:relative;
	overflow:hidden;
}
.auth-card::before{
	content:"";
	position:absolute;inset:-1px;
	border-radius:inherit;
	padding:1px;
	background:linear-gradient(135deg, rgba(245,200,47,.32), transparent 50%, rgba(245,200,47,.18));
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor;
	mask-composite:exclude;
	pointer-events:none;
	animation:authShimmer 4s ease-in-out infinite alternate;
}
@keyframes authShimmer{
	0%{opacity:.5}
	100%{opacity:1}
}

/* Tabs */
.auth-tabs{
	display:flex;gap:0;
	border-bottom:1px solid var(--line);
	margin-bottom:20px;
}
.auth-tab{
	flex:1;
	background:none;border:none;
	padding:10px 0;
	font-size:var(--text-2xl);
	font-weight:700;
	color:var(--muted);
	cursor:pointer;
	border-bottom:2px solid transparent;
	transition:color .2s, border-color .2s;
}
.auth-tab.is-active{
	color:var(--gold);
	border-bottom-color:var(--gold);
}
.auth-tab:hover:not(.is-active){color:var(--text)}

.auth-panel.hidden{display:none}

/* Form */
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-field{display:flex;flex-direction:column;gap:4px}

.auth-form .input:focus{
	box-shadow:0 0 0 2px rgba(245,200,47,.3);
	border-color:var(--gold);
	outline:none;
}
.input-helper{font-size:var(--text-sm);color:var(--muted);margin:0;line-height:1.3}
.input-error{font-size:var(--text-sm);color:var(--danger);margin:0;line-height:1.3}
.input-error.hidden{display:none}

.auth-info{
	font-size:var(--text-base);
	color:var(--muted);
	line-height:1.45;
	margin:0 0 4px;
	padding:10px 12px;
	border-left:3px solid var(--gold);
	background:rgba(245,200,47,.06);
	border-radius:0 8px 8px 0;
}

.auth-submit{width:100%;margin-top:4px}
.auth-submit.is-loading{
	pointer-events:none;opacity:.7;
	position:relative;
}
.auth-submit.is-loading::after{
	content:"";
	width:18px;height:18px;
	border:2px solid transparent;
	border-top-color:currentColor;
	border-radius:50%;
	animation:spin .6s linear infinite;
	position:absolute;
	right:14px;top:50%;
	margin-top:-9px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.auth-forgot{
	background:none;border:none;
	color:var(--muted);
	font-size:var(--text-base);
	cursor:pointer;
	text-align:left;
	padding:0;
	text-decoration:underline;
	text-underline-offset:2px;
}
.auth-forgot:hover{color:var(--gold)}

/* Divider */
.auth-divider{
	display:flex;align-items:center;gap:14px;
	margin:18px 0;
	color:var(--muted);
	font-size:var(--text-base);
}
.auth-divider::before,
.auth-divider::after{
	content:"";flex:1;height:1px;
	background:var(--line);
}

/* Social row */
.auth-social-row{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	justify-content:center;
}
.auth-social-btn{
	display:flex;
	align-items:center;
	gap:8px;
	height:42px;
	padding:0 14px;
	border-radius:10px;
	border:1px solid var(--line);
	background:var(--surface);
	color:var(--text);
	font-size:var(--text-base);
	font-weight:600;
	cursor:pointer;
	transition:border-color .2s, box-shadow .2s;
	/* On wide screens, let social buttons share a single row evenly */
	flex:1 1 0;
	justify-content:center;
}
.auth-social-btn:hover{border-color:rgba(245,200,47,.5);box-shadow:0 0 12px rgba(245,200,47,.1)}
.auth-social-btn svg{flex-shrink:0;width:24px;height:24px}

.auth-social-btn--disabled{
	opacity:.35;
	cursor:not-allowed;
	pointer-events:none;
}

/* Guest CTA */
.auth-guest-cta{
	text-align:center;
	max-width:640px;
	width:100%;
	margin:0 auto;
}
.auth-guest-actions{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
}
.auth-guest-btn{
	width:100%;
	border-style:dashed;
	border-color:rgba(245,200,47,.3);
	animation:guestPulse 3s ease-in-out infinite;
}
@keyframes guestPulse{
	0%,100%{border-color:rgba(245,200,47,.2)}
	50%{border-color:rgba(245,200,47,.5)}
}
.auth-guest-ttl{
	font-size:var(--text-sm);
	color:var(--muted);
	margin:6px 0 0;
}

/* ── Home section (post-login) ── */
.landing-home{
	width:100%;
	max-width:540px;
	margin:0 auto;
	display:flex;flex-direction:column;gap:20px;
}
.landing-welcome{
	display:flex;justify-content:space-between;align-items:center;
	font-size:var(--text-2xl);
}
.landing-welcome strong{color:var(--gold)}

.btn--link{
	background:none;border:none;
	color:var(--muted);
	font-size:var(--text-base);
	cursor:pointer;
	text-decoration:underline;
	text-underline-offset:2px;
	padding:0;
}
.btn--link:hover{color:var(--gold)}

.landing-home__actions{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
}
.landing-action-card{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:14px;
	padding:24px 16px;
	text-align:center;
	cursor:pointer;
	transition:border-color .2s, box-shadow .2s, transform .12s;
	display:flex;flex-direction:column;align-items:center;gap:8px;
}
.landing-action-card:hover{
	border-color:rgba(245,200,47,.45);
	box-shadow:var(--gold-shadow);
	transform:translateY(-2px);
}
.landing-action-card__icon{
	width:48px;height:48px;
	border-radius:12px;
	display:grid;place-items:center;
	background:rgba(245,200,47,.1);
	color:var(--gold);
}
.landing-action-card__icon svg{width:26px;height:26px}
.landing-action-card__label{
	font-size:var(--text-2xl);
	font-weight:700;
	color:var(--text);
}
.landing-action-card__sub{line-height:1.3}

/* ── One-shot banner ── */
.oneshot-banner{
	position:fixed;
	top:0;left:50%;transform:translateX(-50%);
	z-index:200;
	width:100%;max-width:720px;
	background:linear-gradient(90deg, rgba(245,200,47,.12), rgba(245,200,47,.06));
	border-bottom:1px solid rgba(245,200,47,.3);
	padding:8px 16px;
	display:flex;align-items:center;justify-content:center;gap:12px;
	font-size:var(--text-base);
	color:var(--text);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
}
.oneshot-banner.hidden{display:none}
.oneshot-banner strong{color:var(--gold)}

/* Landing sessions (post-login) */

.landingSessions__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.landingSessions__head h3{font-size: var(--text-3xl)}

.landingSessionItem{
	border:1px solid var(--line);
	border-radius:14px;
	background:rgba(52,44,75,.7);
	padding:14px 16px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	cursor:pointer;
	transition:all .18s ease;
}

.landingSessionItem:hover,
.landingSessionItem:focus-visible{
	outline:none;
	border-color:rgba(245,200,47,.42);
	box-shadow:var(--gold-shadow);
}

.landingSessionItem__left{display:flex;align-items:center;gap:12px}
.landingSessionItem__title{font-size: var(--text-3xl);text-transform:uppercase;font-weight:700}

.joinRecent{
	margin-top:12px;
	border:1px solid var(--line);
	border-radius:12px;
	padding:12px;
	background:rgba(52,44,75,.5);
}

.joinRecent__head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:8px;
	margin-bottom:8px;
}

.joinRecent__head h3{
	font-size:var(--text-xl);
	text-transform:none;
}

.joinRecent__list{
	display:grid;
	gap:8px;
}

.joinRecentItem{
	width:100%;
	text-align:left;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	border:1px solid var(--line);
	border-radius:10px;
	padding:10px 12px;
	background:rgba(42,35,61,.72);
	color:var(--text);
	cursor:pointer;
}

.joinRecentItem:hover,
.joinRecentItem:focus-visible{
	border-color:rgba(245,200,47,.4);
	box-shadow:var(--gold-shadow);
	outline:none;
}

.joinRecentItem__title{
	font-size:var(--text-lg);
	font-weight:700;
	text-transform:none;
}

/* Create handout modal internals (form spacing). */
.formGrid{display:grid;gap:12px}

/*
	==========================================================================
	LIGHT MODE OVERRIDES
	==========================================================================
	HOW THIS WORKS:
	The dark theme uses the :root token values by default.
	When JS sets body[data-theme="light"], these rules override specific
	tokens and component styles for a light appearance.

	TECHNIQUE NOTES FOR BEGINNERS:
	- We only override what CHANGES. Everything not listed here inherits
	  from the default (dark) rules — this avoids duplicating hundreds of lines.
	- body[data-theme="light"] has higher specificity than bare class selectors,
	  so these overrides naturally win without !important.
	- Semi-transparent backgrounds (rgba) let the background image bleed through
	  for a frosted-glass effect that matches the app's fantasy aesthetic.
*/
body[data-theme="light"]{
	--text:#2c2340;
	--muted:#54486e;
	--line:rgba(97,74,137,.28);
	--line-strong:rgba(215,172,33,.48);
	--screen-gold-border:rgba(215,172,33,.55);
	--screen-gold-glow:rgba(215,172,33,.14);
	background:
		linear-gradient(145deg, rgba(232,222,248,.62) 0%, rgba(222,212,241,.6) 42%, rgba(214,204,236,.66) 100%),
		radial-gradient(circle at 52% 58%, rgba(150,108,196,.12), transparent 38%),
		radial-gradient(circle at 48% 40%, rgba(131,90,177,.1), transparent 52%),
		url('backgrounds/background02.JPG');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
}

body[data-theme="light"] .topbar{
	background:linear-gradient(180deg, rgba(236,227,252,.86), rgba(223,213,244,.82));
}
body[data-theme="light"] .topbar-avatar{background:rgba(210,195,235,.7)}
body[data-theme="light"] .topbar-avatar__placeholder{color:rgba(100,80,140,.45)}

body[data-theme="light"] .card,
body[data-theme="light"] .panel,
body[data-theme="light"] .modal__card,
body[data-theme="light"] .player-list-dropdown__inner{
	background:linear-gradient(180deg, rgba(244,236,255,.9), rgba(232,223,249,.88));
}

body[data-theme="light"] .pill{
	background:rgba(236,227,252,.86);
	color:#4b3f64;
}

body[data-theme="light"] .pill--clickable{
	background:rgba(229,219,249,.95);
	color:#32274b;
}

body[data-theme="light"] .btn--ghost,
body[data-theme="light"] .input,
body[data-theme="light"] .chip,
body[data-theme="light"] .item,
body[data-theme="light"] .tag,
body[data-theme="light"] .bottom-bar__btn,
body[data-theme="light"] .settingsCard,
body[data-theme="light"] .settingsAppearance,
body[data-theme="light"] .settingsRoleSwitch,
body[data-theme="light"] .coinSection,
body[data-theme="light"] .settingsAvatarWrap,
body[data-theme="light"] .characterSheetCameraPanel,
body[data-theme="light"] .playerOnlineBtn{
	background:rgba(233,223,250,.9);
	border-color:var(--line);
	color:var(--text);
}

body[data-theme="light"] .bottom-bar__btn.is-active{
	background:var(--gold-gradient);
	color:#241d12;
	border-color:transparent;
	box-shadow:var(--gold-shadow);
}

body[data-theme="light"] .btn.btn--active,
body[data-theme="light"] .btn--ghost.btn--active{
	background:var(--gold-gradient);
	color:#241d12;
	border-color:transparent;
	box-shadow:var(--gold-shadow);
}

body[data-theme="light"] .chip{color:#4d4167}
body[data-theme="light"] .tag{color:#483d62;background:rgba(223,212,244,.92)}
body[data-theme="light"] .item:hover{border-color:rgba(215,172,33,.45)}
body[data-theme="light"] .input::placeholder{color:#796c95}
body[data-theme="light"] .landingLead{color:#4f4468}
body[data-theme="light"] .auth-card{background:rgba(244,236,255,.88);border-color:rgba(97,74,137,.25)}
body[data-theme="light"] .auth-card::before{background:linear-gradient(135deg, rgba(215,172,33,.22), transparent 50%, rgba(215,172,33,.14))}
body[data-theme="light"] .auth-tab{color:#5b4f74}
body[data-theme="light"] .auth-tab.is-active{color:var(--gold-2)}
body[data-theme="light"] .auth-social-btn{background:rgba(233,223,250,.9);border-color:rgba(97,74,137,.28);color:#2c2340}
body[data-theme="light"] .auth-info{background:rgba(245,200,47,.08);border-left-color:var(--gold-2)}
body[data-theme="light"] .landing-action-card{background:rgba(244,236,255,.9);border-color:rgba(97,74,137,.25)}
body[data-theme="light"] .landing-welcome{color:#2c2340}
body[data-theme="light"] .landing-welcome strong{color:#b08c14}
body[data-theme="light"] .landing-logo{background:transparent;border-color:transparent}
body[data-theme="light"] .oneshot-banner{background:linear-gradient(90deg, rgba(245,200,47,.1), rgba(245,200,47,.04));border-bottom-color:rgba(215,172,33,.3)}
body[data-theme="light"] .muted{color:#5b4f74}
body[data-theme="light"] .playerOnlineBtn__name{color:#32284a}
body[data-theme="light"] .socialMeta{
	background:rgba(227,216,248,.92);
	border-color:rgba(97,74,137,.34);
}
body[data-theme="light"] .socialMeta__row strong{color:#2f2547}
body[data-theme="light"] .socialMeta__row .muted{color:#4f4468}
body[data-theme="light"] #dmPlayersEmpty,
body[data-theme="light"] #dmPlayersList .muted{color:#4f4468}
body[data-theme="light"] .label{color:#4f4468}
body[data-theme="light"] .portraitHero,
body[data-theme="light"] .secretBlock,
body[data-theme="light"] .aiBlock,
body[data-theme="light"] .imagePickerPanel{
	background:rgba(225,214,246,.9);
	border-color:rgba(97,74,137,.34);
}
body[data-theme="light"] .imageNavBtn,
body[data-theme="light"] .iconTile,
body[data-theme="light"] .imagePickerTile{
	background:rgba(214,201,239,.95);
	border-color:rgba(97,74,137,.34);
	color:#2f2647;
}
body[data-theme="light"] .iconTile--active,
body[data-theme="light"] .imageNavBtn.is-active,
body[data-theme="light"] .imagePickerTile.is-active{
	background:rgba(224,211,247,.96);
	border-color:var(--line-strong);
	color:#241d12;
}
body[data-theme="light"] #dmImageStatus,
body[data-theme="light"] .imagePickerPanel__title,
body[data-theme="light"] .portraitPlaceholder{color:#4f4468;text-shadow:none}
body[data-theme="light"] .portraitFrame{
	background:radial-gradient(circle at 32% 24%, rgba(255,255,255,.62), rgba(146,121,186,.28));
}
body[data-theme="light"] .secret__label{color:#8a6a18}
body[data-theme="light"] .invGalleryPanel{
	background:rgba(225,214,246,.9);
	border-color:rgba(97,74,137,.34);
}
body[data-theme="light"] .invGalleryTile{
	background:rgba(214,201,239,.95);
	border-color:rgba(97,74,137,.34);
}
body[data-theme="light"] .invGalleryTile.is-active{
	background:rgba(224,211,247,.96);
	border-color:var(--gold);
}
body[data-theme="light"] .inventoryAvatarFrame{
	background:rgba(214,201,239,.5);
}

body[data-theme="light"] .bottom-bar__inner,
body[data-theme="light"] .ambience-bar__inner{
	background:linear-gradient(180deg, rgba(236,227,253,.9), rgba(224,214,245,.9));
	border-color:var(--line);
}

/* Light mode: modal backdrop — softer overlay for readability */
body[data-theme="light"] .modal{
	background:rgba(180,160,210,.42);
}

/* Light mode: toast notifications */
body[data-theme="light"] .toast{
	background:rgba(244,236,255,.96);
	border-color:rgba(97,74,137,.32);
	color:#2c2340;
}
body[data-theme="light"] .toast--success{border-color:rgba(76,175,80,.55)}
body[data-theme="light"] .toast--error{border-color:rgba(200,60,60,.55)}

/* Light mode: inventory cards, coin buttons, general polish */
body[data-theme="light"] .inventoryCard{
	background:rgba(233,223,250,.88);
	border-color:rgba(97,74,137,.22);
}
body[data-theme="light"] .inventoryCard:hover{border-color:rgba(215,172,33,.45)}
body[data-theme="light"] .inventoryCard__avatar{
	background:rgba(214,201,239,.5);
	box-shadow:0 0 8px rgba(215,172,33,.25), 0 0 2px rgba(215,172,33,.12) inset;
}
body[data-theme="light"] .inventoryCard__actionBtn{
	background:rgba(214,201,239,.95);
	border-color:rgba(97,74,137,.34);
	color:#4f4468;
}
body[data-theme="light"] .inventoryPlayerHeader{color:#2c2340}
body[data-theme="light"] .coinItem{
	background:rgba(245,240,255,.95);
	border-color:rgba(60,42,100,.25);
}
body[data-theme="light"] .coinValue{color:#1a1230}
body[data-theme="light"] .coinBtn{
	background:rgba(255,255,255,.95);
	border-color:rgba(60,42,100,.35);
	color:#1a1230;
	font-weight:800;
	box-shadow:0 1px 3px rgba(0,0,0,.1);
}
body[data-theme="light"] .coinBtn:hover{border-color:rgba(120,80,200,.6);background:#fff}

/* Light mode: treasury distribute & grant rows */
body[data-theme="light"] .treasuryDistribute,
body[data-theme="light"] .grantCoinsRow{
	background:rgba(225,214,246,.7);
	border-color:rgba(97,74,137,.22);
}

/* Light mode: QR reader */
body[data-theme="light"] .qrReader,
body[data-theme="light"] #qrReaderWrap{
	background:rgba(244,236,255,.95);
	border-color:rgba(97,74,137,.28);
}

/* Light mode: misc text overrides for better contrast */
body[data-theme="light"] h2,
body[data-theme="light"] h3{color:#2c2340}
body[data-theme="light"] strong{color:#251e38}

/* Light mode: skeleton shimmer — lighter tones to match light surface */
body[data-theme="light"] .skeleton{
	background:linear-gradient(90deg,
		rgba(214,201,239,.5) 0%,
		rgba(230,220,248,.7) 40%,
		rgba(214,201,239,.5) 80%);
	background-size:800px 100%;
}

/* Light mode: empty state */
body[data-theme="light"] .emptyState__title{color:#2c2340}
body[data-theme="light"] .emptyState__hint{color:#54486e}

/* Light mode: icon buttons */
body[data-theme="light"] .iconBtn,
body[data-theme="light"] .iconBtnLarge{
	background:rgba(233,223,250,.92);
	border-color:rgba(60,42,100,.22);
	color:#3a2d5c;
}
body[data-theme="light"] .iconBtn:hover,
body[data-theme="light"] .iconBtnLarge:hover{border-color:rgba(120,80,200,.45)}

/* Light mode: modal text blocks */
body[data-theme="light"] .modalText{
	background:rgba(240,234,252,.92);
	border-color:rgba(60,42,100,.2);
	color:#2c2340;
}

/* Light mode: secret content box */
body[data-theme="light"] .secret{
	background:rgba(255,248,230,.6);
	border-color:rgba(215,172,33,.35);
}

/* Light mode: reveal / claim star buttons */
body[data-theme="light"] .revealStarBtn{
	background:linear-gradient(180deg, rgba(244,236,255,.95), rgba(233,223,250,.92));
	border-color:rgba(215,172,33,.35);
	color:#2c2340;
	box-shadow:0 4px 16px rgba(60,42,100,.1);
}
body[data-theme="light"] .revealStarBtn__icon{
	background:rgba(215,172,33,.15);
}

/* Light mode: assignment row */
body[data-theme="light"] .assignRow{
	background:rgba(240,234,252,.85);
	border-color:rgba(60,42,100,.18);
}

/* Light mode: player avatar in online list */
body[data-theme="light"] .playerOnlineBtn__avatar{
	background:rgba(233,223,250,.95);
	border-color:rgba(60,42,100,.2);
	color:#4a3d6a;
}

/* Light mode: notification dot background matches light surface */
body[data-theme="light"] .notif-dot{
	box-shadow:0 0 0 2px rgba(244,236,255,.95);
}

/* Light mode: inventory section gold accent */
body[data-theme="light"] .inventoryPlayerSection{
	border-left-color:rgba(215,172,33,.45);
	background:rgba(233,223,250,.65);
}

/*
	Screen-based visibility tweaks:
	JS sets `body[data-screen=...]` and CSS conditionally hides shell regions.
*/
body[data-screen="landing"] .topbar,
body[data-screen="landing"] .bottom-bar,
body[data-screen="landing"] .ambience-bar{display:none !important}

/*
	==========================================================================
	RESPONSIVE BREAKPOINTS
	==========================================================================
	STRATEGY FOR BEGINNERS:
	We use three "mobile-first stacked" breakpoints:
	  1200px — Tablet: reduce font sizes, narrow controls
	   800px — Mobile: stack layouts vertically, full-width buttons
	   480px — Small phone: aggressive compaction for tiny screens

	HOW @media WORKS:
	`@media (max-width: 800px)` means "apply these rules ONLY when the
	viewport is 800px wide or narrower." The browser evaluates this live,
	so resizing your window (or rotating a phone) instantly applies/removes rules.

	WHY NOT USE min-width (mobile-first)?
	Our default styles target desktop. Mobile overrides are additive corrections.
	This is called "desktop-first" responsive design — equally valid as
	mobile-first, and easier when your initial design was built for desktop.
*/

/*
	Responsive breakpoint #1 (tablet-ish): reduce typography and control sizes.
*/
@media (max-width: 1200px){
	.brand__title{font-size: var(--text-3xl)}
	.brand__sub{font-size: var(--text-lg)}
	.btn{font-size: var(--text-2xl)}
	.chip,.tag,.pill,.player-list-dropdown .list > div{font-size: var(--text-lg)}
	.input,.label{font-size: var(--text-2xl)}
	.landingTitle{font-size: var(--text-4xl)}
	.landingLead{font-size: var(--text-2xl)}
	.landingSessionItem__title{font-size: var(--text-2xl)}
}

/*
  Responsive breakpoint #2 (mobile): stack controls and simplify spacing.
*/
@media (max-width: 800px){
	.app-shell{width:100%;margin:0}
	.layout{padding:0 8px calc(112px + env(safe-area-inset-bottom))}
	.card{padding:12px}
	.dashTools{grid-template-columns:1fr}
	.landingTitle{font-size: var(--text-3xl)}
	.landingLead{font-size: var(--text-xl)}
	.auth-card{padding:20px 16px}
	.auth-social-row{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:8px;
	}
	.auth-social-btn{width:100%;justify-content:center}
	.auth-social-btn span{display:none}
	.auth-guest-actions{grid-template-columns:1fr}
	.landing-home__actions{grid-template-columns:1fr}
	.landing-logo{width:112px;height:112px}
	.landing-logo{padding:0}
	.row{flex-direction:column;align-items:stretch}
	.btn{width:100%}
	.socialActions .btn{width:100%}

	/* Keep filters reachable and scrollable on narrow phones. */
	.chipRow{
		overflow-x:auto;
		flex-wrap:nowrap;
		padding-bottom:4px;
		scrollbar-width:thin;
	}

	.chip{white-space:nowrap;font-size: var(--text-lg)}

	/* Modal becomes a near full-screen sheet on mobile for better readability. */
	.modal{padding:8px;place-items:start center}
	.modal__card{width:100%;max-height:calc(100dvh - 16px);overflow:auto}
	.createModalCard{max-height:calc(100dvh - 16px)}
	.handoutModalImageWrap{width:min(156px, 54vw);height:min(156px, 54vw);min-height:min(156px, 54vw);flex: 0 0 auto;}
	.handoutModalImage{transform:scale(1.62);object-position:49% 50%}
	#modalTitle{font-size:clamp(21px, 7vw, 31px)}
	.modalText{font-size:clamp(16px, 4.5vw, 20px)}
	.revealStarRow{grid-template-columns:1fr}
	.revealStarBtn{min-height:58px;font-size: var(--text-xl)}
	.revealStarBtn__icon{width:34px;height:34px}
	#modalDMClaimControls > .row:not(.assignRow){grid-template-columns:1fr}
	.modalActionRow{grid-template-columns:repeat(2,minmax(0,1fr))}
	.modalActionRow .btn:last-child{grid-column:1 / -1}
	.modalActionRow--bottom{padding-top:8px}
	.modalSaveState{font-size: var(--text-base)}

	/* Prevent oversized desktop typography on phones. */
	.input,.label{font-size: var(--text-lg)}
	h2{font-size: var(--text-2xl)}
	h3{font-size: var(--text-xl)}
	.btn{font-size: var(--text-xl);min-height:42px;padding:10px 12px}

	/* Better one-handed bottom controls on smartphone. */
	.bottom-bar__inner,
	.ambience-bar__inner{padding:8px}
	.bottom-bar__btn{width:42px;height:42px}
	.ambience-bar{bottom:62px}
	.profileStatsGrid{grid-template-columns:1fr}
	.settingsAvatarWrap{width:84px;height:84px}
	.toastStack{right:8px;left:8px;width:auto}
	.toast{font-size: var(--text-lg)}

	/* Assignment controls stack cleanly on mobile. */
	.assignRow .btn,
	.assignRow .input{width:100%}

	.iconPickerGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/*
  Extra-small phones (<= 480px):
  aggressively compact typography and spacing for fit + tap comfort.
*/
@media (max-width: 480px){
	.topbar{padding:8px 10px}
	#liveStatus{width:38px;height:38px;min-width:38px}
	.sessionPeek{min-width:min(88vw, 320px)}
	.playerCountInline{font-size: var(--text-base);padding:8px 10px}
	.pill{font-size: var(--text-sm);padding:7px 10px}
	.landingTitle{font-size: var(--text-3xl)}
	.landingLead{font-size: var(--text-lg)}
	.landingSessions__head h3{font-size: var(--text-xl)}
	.landingSessionItem__title{font-size: var(--text-xl)}
	.qr{width:min(80vw, 272px);height:auto;aspect-ratio:1;margin:8px auto}
	.auth-tab{font-size:var(--text-xl)}
	.auth-card{padding:16px 14px}
	.landing-action-card{padding:16px 12px}
	.landing-action-card__label{font-size:var(--text-xl)}
	.landing-welcome{font-size:var(--text-xl)}
}