/* DICE standalone — page chrome.
   Deliberately plain: white background, simple borders, no brand panels,
   matching the clean look of the WordPress /dice-101/ page. */

* { box-sizing: border-box; }

body {
	margin: 0;
	background: #ffffff;
	color: #1a1a1a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

a { color: #1a1a1a; }

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid #e6e6e6;
}

.brand-name {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.brand-sub {
	margin-left: 10px;
	font-size: 0.85rem;
	color: #777;
}

.account {
	display: flex;
	align-items: center;
	gap: 10px;
}

.account-menu-wrap {
	position: relative;
}

.avatar-btn {
	cursor: pointer;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid #1a1a1a;
	background: #f2f2f2;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

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

.avatar-initial {
	font-weight: 700;
	font-size: 1.05rem;
	color: #1a1a1a;
}

.account-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	width: 260px;
	max-width: 80vw;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
	padding: 10px;
	z-index: 50;
}

.account-menu-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid #eee;
}

.menu-avatar {
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #f2f2f2;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.menu-avatar .avatar-initial {
	font-size: 0.95rem;
}

.account-menu-id {
	min-width: 0;
}

.menu-username {
	display: block;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menu-email {
	display: block;
	font-size: 0.82rem;
	color: #777;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menu-balance {
	display: block;
	font-size: 0.82rem;
	color: #777;
	margin-top: 2px;
	white-space: nowrap;
}

.menu-balance-amt {
	font-weight: 700;
	color: #1a1a1a;
}

.menu-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-radius: 8px;
	padding: 10px 8px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #1a1a1a;
	cursor: pointer;
}

.menu-item:hover {
	background: #f5f5f5;
}

.btn {
	cursor: pointer;
	padding: 8px 18px;
	border-radius: 999px;
	border: 2px solid #1a1a1a;
	font-size: 0.95rem;
	font-weight: 600;
	background: #ffffff;
	color: #1a1a1a;
}

.btn-dark {
	background: #1a1a1a;
	color: #ffffff;
}

.btn-light {
	background: #ffffff;
	color: #1a1a1a;
}

.btn-link {
	border: none;
	background: none;
	padding: 4px 2px;
	color: #1a1a1a;
	text-decoration: underline;
	font-weight: 600;
}

.btn-wide { width: 100%; }

.btn[disabled] { opacity: 0.55; cursor: default; }

.btn:focus-visible, input:focus-visible, .avatar-btn:focus-visible, .menu-item:focus-visible {
	outline: 3px solid #4a90d9;
	outline-offset: 2px;
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	padding: 14px 16px 0;
}

.tab {
	cursor: pointer;
	border: none;
	background: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	color: #777;
	border-bottom: 3px solid transparent;
}

.tab-icon {
	width: 22px;
	height: 22px;
	display: block;
}

.tab.is-active {
	color: #1a1a1a;
	border-bottom-color: #1a1a1a;
}

main {
	max-width: 560px;
	margin: 0 auto;
	padding: 20px 16px 48px;
}

.cb-dice-roller { margin: 0 auto; }

.hint {
	font-size: 0.9rem;
	color: #666;
}

.center { text-align: center; }

.error {
	font-size: 0.9rem;
	color: #b00020;
}

/* Sign-in panel */

.auth-panel {
	max-width: 420px;
	margin: 16px auto 0;
	padding: 20px 24px;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	background: #ffffff;
}

.auth-panel h2 { margin: 0 0 4px; font-size: 1.15rem; }

.auth-panel label {
	display: block;
	margin: 12px 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.auth-panel input,
.name-form input {
	width: 100%;
	margin-top: 4px;
	padding: 9px 12px;
	border: 1px solid #c9c9c9;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 400;
}

.auth-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
}

.auth-or {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
	color: #999;
	font-size: 0.85rem;
}

.auth-or::before, .auth-or::after {
	content: "";
	flex: 1;
	border-top: 1px solid #e6e6e6;
}

#auth-close { display: block; margin: 10px auto 0; }

/* Your record */

.record-panel {
	margin: 22px auto 0;
	max-width: 480px;
	padding: 18px 24px;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	background: #ffffff;
}

.record-panel h2 { margin: 0 0 10px; font-size: 1.1rem; }
.record-panel h3 { margin: 16px 0 6px; font-size: 0.95rem; }

.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
}

.stats div { min-width: 70px; }
.stats dt { font-size: 0.78rem; color: #777; }
.stats dd { margin: 0; font-size: 1.15rem; font-weight: 700; }

.recent-rolls {
	margin: 0;
	padding-left: 18px;
	font-size: 0.92rem;
}

.name-form {
	display: flex;
	align-items: end;
	gap: 10px;
	margin-top: 16px;
}

.name-form label { flex: 1; font-size: 0.9rem; font-weight: 600; }

/* Table Talk */

.talk-title { text-align: center; margin: 0 0 2px; font-size: 1.25rem; }

.talk-feed {
	margin-top: 14px;
	border-top: 1px solid #eee;
}

.msg {
	padding: 10px 2px;
	border-bottom: 1px solid #eee;
}

.msg-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.82rem;
}

.msg-name { font-weight: 700; font-size: 0.9rem; }
.msg-time { color: #999; }
.msg-del {
	margin-left: auto;
	border: none;
	background: none;
	cursor: pointer;
	color: #999;
	font-size: 0.8rem;
	text-decoration: underline;
	padding: 0;
}

.msg-text { margin-top: 2px; overflow-wrap: break-word; }

.msg-voice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.msg-voice audio { height: 36px; max-width: 260px; }
.msg-dur { font-size: 0.82rem; color: #777; }

.talk-locked {
	text-align: center;
	padding: 18px 0 6px;
}

.talk-form {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.talk-form input {
	flex: 1;
	min-width: 0;
	padding: 9px 14px;
	border: 1px solid #c9c9c9;
	border-radius: 999px;
	font-size: 1rem;
}

.voice-ui {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 10px 14px;
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	font-size: 0.92rem;
}

#voice-timer { font-variant-numeric: tabular-nums; font-weight: 700; }

.site-footer {
	padding: 18px 16px 26px;
	border-top: 1px solid #e6e6e6;
	text-align: center;
	font-size: 0.88rem;
	color: #777;
}

/* Flick-to-roll surface + roll meter (the one playful element) */

.cb-dice-tray {
	width: 100%;
	padding: 22px 8px;
	touch-action: none; /* the flick owns the gesture — no page-scroll fighting */
	cursor: grab;
	border-radius: 10px;
}

.cb-dice-tray:active { cursor: grabbing; }

.cb-dice-meter { width: 100%; }

.meter-labels {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #999;
}

.meter-word {
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #1a1a1a;
}

.meter-track {
	height: 12px;
	margin-top: 4px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	background: #f1f1ee;
	overflow: hidden;
}

.meter-fill {
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: #1a1a1a;
	transition: width 0.08s linear;
}

.meter-hint {
	margin: 0;
	font-size: 0.85rem;
	color: #666;
	text-align: center;
}

/* Throw-strength animation bands (dice.js adds .band-soft / .band-hard and
   scales the animation duration inline; STEADY keeps the original shake) */

.cb-die.band-soft.is-rolling { animation-name: cb-shake-soft; }
.cb-die.band-hard.is-rolling { animation-name: cb-shake-hard; }

@keyframes cb-shake-soft {
	0%   { transform: translate(0, 0) rotate(0deg); }
	25%  { transform: translate(-1px, -1px) rotate(-3deg); }
	50%  { transform: translate(1px, 1px) rotate(2deg); }
	75%  { transform: translate(-1px, 0) rotate(-1deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes cb-shake-hard {
	0%   { transform: translate(0, 0) rotate(0deg); }
	15%  { transform: translate(-7px, -8px) rotate(-17deg); }
	30%  { transform: translate(6px, -3px) rotate(13deg); }
	45%  { transform: translate(-5px, -10px) rotate(-11deg); }
	60%  { transform: translate(7px, 2px) rotate(15deg); }
	75%  { transform: translate(-4px, -5px) rotate(-7deg); }
	90%  { transform: translate(3px, -1px) rotate(4deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cb-die.band-soft.is-rolling,
	.cb-die.band-hard.is-rolling { animation: none; }
}

/* Your luck */

.luck-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #eee;
	font-size: 0.92rem;
}

.luck-row .luck-band { font-weight: 700; }
.luck-row .luck-nums { color: #555; font-variant-numeric: tabular-nums; }

.luck-line {
	font-weight: 600;
	margin: 10px 0 4px;
}

/* Virtual-money betting + The Charts */

.bet-bar {
	max-width: 480px;
	margin: 0 auto 18px;
	padding: 16px 20px;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	background: #ffffff;
}

.bet-money-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.bet-balance-label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #777;
}

.bet-balance { font-size: 1.3rem; font-weight: 800; }

.bet-money-row .hint { flex: 1 1 100%; }

.bet-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.bet-label {
	flex: 0 0 44px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #777;
}

.bet-types { display: flex; flex-wrap: wrap; gap: 6px; }

.bet-type {
	cursor: pointer;
	padding: 7px 12px;
	border: 1px solid #c9c9c9;
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a1a1a;
}

.bet-type small { display: block; font-size: 0.72rem; font-weight: 400; color: #777; }
.bet-type.is-on { background: #1a1a1a; color: #ffffff; border-color: #1a1a1a; }
.bet-type.is-on small { color: #ccc; }

.chips { display: flex; gap: 6px; }

.chip {
	cursor: pointer;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 2px dashed #999;
	background: #ffffff;
	font-weight: 700;
	font-size: 0.9rem;
	color: #1a1a1a;
}

.chip.is-on { background: #1a1a1a; color: #ffffff; border: 2px solid #1a1a1a; }

.bet-note { margin: 12px 0 0; }

.charts-list { margin-top: 14px; border-top: 1px solid #eee; }

.chart-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 2px;
	border-bottom: 1px solid #eee;
	font-size: 0.95rem;
}

.chart-rank { flex: 0 0 30px; font-weight: 800; color: #777; }
.chart-name { flex: 1; font-weight: 600; overflow-wrap: break-word; }
.chart-net { font-weight: 800; font-variant-numeric: tabular-nums; }
.chart-sub { flex: 1 1 100%; margin-left: 40px; font-size: 0.82rem; color: #777; }
.chart-row { flex-wrap: wrap; }
.chart-row.is-me { background: #fdfdfb; }

/* Invite + rooms */

.invite-link-row {
	display: flex;
	gap: 8px;
	margin: 12px 0;
}

.invite-link-row input {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid #c9c9c9;
	border-radius: 8px;
	font-size: 0.9rem;
	background: #fdfdfb;
}

.invite-qr { text-align: center; margin: 14px 0; }
.invite-qr canvas { border: 1px solid #e0e0e0; border-radius: 8px; }
.qr-fallback { word-break: break-all; margin: 8px 0 0; }

.invite-actions {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 10px 0 20px;
}

.invite-actions a.btn { text-decoration: none; display: inline-block; }

.room-banner {
	max-width: 480px;
	margin: 0 auto 14px;
	padding: 12px 16px;
	border: 1px solid #1a1a1a;
	border-radius: 10px;
	background: #fdfdfb;
	font-weight: 600;
	text-align: center;
}

.room-create, .room-join {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 12px 0;
	flex-wrap: wrap;
}

.room-create input[type="text"], .room-join input {
	flex: 1;
	min-width: 140px;
	padding: 9px 12px;
	border: 1px solid #c9c9c9;
	border-radius: 8px;
	font-size: 1rem;
}

.room-join input { text-transform: uppercase; letter-spacing: 0.15em; }

.room-create select {
	padding: 8px;
	border: 1px solid #c9c9c9;
	border-radius: 8px;
	font-size: 1rem;
}

.room-members { list-style: none; margin: 0; padding: 0; }

.room-members li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 8px 2px;
	border-bottom: 1px solid #eee;
	font-size: 0.95rem;
}

.room-members .rm-name { font-weight: 700; }
.room-members .rm-meta { color: #777; font-size: 0.85rem; }
.room-members .rm-turn { margin-left: auto; font-weight: 700; font-size: 0.85rem; }

.room-status {
	margin: 14px 0;
	padding: 12px 16px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background: #fdfdfb;
	font-size: 0.95rem;
}

.room-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }