*{ box-sizing: border-box; }
html,body{
margin:0;
padding:0;
height:100%;
background: var(--bg-deep);
color: var(--text-primary);
font-family: 'Nunito', sans-serif;
}
body{
background-image:
radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.035), transparent 45%),
radial-gradient(ellipse at 85% 80%, rgba(255,255,255,0.03), transparent 50%),
linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
min-height: 100vh;
display:flex;
justify-content:center;
padding: 32px 16px 60px;
}
/*
* Only sudoku.html's carries this class. It's what centers
* the puzzle both horizontally and vertically and fits it to the
* viewport height without scrolling. Deliberately NOT applied to
* every page: `align-items: center` on a flex body is a known trap
* when content is taller than the viewport (admin.html, with its
* long color-picker form, is exactly that case) - the *start* of
* the overflowing content becomes unreachable even with scrolling
* enabled, which is exactly what happened to admin.html's "back to
* game" link before this was split out.
*/
body.game-body{
height: 100vh;
height: 100dvh;
min-height: 0;
align-items: center;
padding: 16px 20px;
overflow-y: auto;
}
.noise{
position: fixed;
inset: 0;
pointer-events:none;
opacity: 0.05;
mix-blend-mode: overlay;
z-index: 0;
}
.wrap{
position: relative;
z-index:1;
width: 100%;
max-width: 920px;
display: flex;
flex-direction: column;
max-height: 100%;
}
header{
display:flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 24px;
margin-bottom: 12px;
border-bottom: 1px dashed var(--board-line-thin);
padding-bottom: 10px;
flex-shrink: 0;
}
.header-right{
display:flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.auth-nav{
display:flex;
align-items:center;
gap: 12px;
font-size: 13px;
}
.nav-greeting{
color: var(--text-dim);
}
.nav-link{
color: var(--accent);
text-decoration: none;
font-weight: 700;
background: none;
border: none;
font-family: 'Nunito', sans-serif;
font-size: 13px;
cursor: pointer;
padding: 0;
}
.nav-link:hover{ text-decoration: underline; }
h1{
font-family: 'Caveat', cursive;
font-weight: 700;
font-size: 42px;
margin: 0;
color: var(--text-primary);
letter-spacing: 0.5px;
line-height: 1;
}
h1 span{ color: var(--accent); }
.tagline{
font-family: 'Caveat', cursive;
font-size: 18px;
color: var(--text-dim);
margin: 2px 0 0;
}
.stats{
display:flex;
gap: 20px;
align-items:center;
font-size: 15px;
color: var(--text-dim);
}
.stat-value{
font-weight: 800;
color: var(--text-primary);
font-size: 18px;
margin-left: 6px;
font-variant-numeric: tabular-nums;
}
.stat-coins{ color: var(--accent); }
.win-stats .stat-coins{ color: var(--accent); }
.layout{
display:flex;
gap: 24px;
align-items:flex-start;
flex-wrap: wrap;
justify-content: center;
min-height: 0;
}
.board-column{
display:flex;
flex-direction: column;
align-items:center;
gap: 12px;
}
.board-frame{
background: var(--board-bg);
border-radius: 14px;
padding: 14px;
box-shadow: inset 0 0 0 1px rgba(232,230,217,0.08), 0 12px 30px rgba(0,0,0,0.35);
position: relative;
}
.board{
display: grid;
grid-template-columns: repeat(var(--grid-size, 9), minmax(0, 1fr));
grid-template-rows: repeat(var(--grid-size, 9), minmax(0, 1fr));
width: min(78vw, 50vh, 430px);
height: min(78vw, 50vh, 430px);
background: var(--board-line-thick);
gap: 1px;
border: 3px solid var(--board-line-thick);
border-radius: 4px;
overflow: hidden;
}
.cell{
background: var(--board-bg);
display:flex;
align-items:center;
justify-content:center;
position: relative;
cursor: pointer;
user-select: none;
font-family: 'Nunito', sans-serif;
font-size: clamp(16px, 3.6vw, 24px);
font-weight: 700;
color: var(--text-user);
transition: background 0.12s ease;
}
/* 16x16 packs nearly 3x as many cells into the same board footprint. */
.board[data-size="16"] .cell{
font-size: clamp(9px, 2vw, 14px);
}
.cell.given{ color: var(--text-given); font-weight: 800; cursor: default; }
.cell[data-br="1"]{ border-right: 2.5px solid var(--board-line-thick); }
.cell[data-bb="1"]{ border-bottom: 2.5px solid var(--board-line-thick); }
.board[data-size="16"] .cell[data-br="1"]{ border-right-width: 1.5px; }
.board[data-size="16"] .cell[data-bb="1"]{ border-bottom-width: 1.5px; }
/* Diagonal mode: a faint always-on tint marks which cells carry the
extra diagonal constraint, independent of selection/peer state. */
.cell[data-diag="1"]{ box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--diagonal-tint, #7f7f7f) 8%, transparent); }
.cell.peer{ background: var(--board-peer-bg); }
.cell.same-value{ background: var(--accent-secondary-dim); }
.cell.selected{ background: var(--accent-dim); }
.cell.error{ color: var(--accent-danger) !important; }
.cell.error.selected{ background: var(--accent-danger-dim); }
.cell.hint-flash{ animation: flash 0.6s ease; }
@keyframes flash{
0%{ background: var(--accent); }
100%{ background: var(--accent-dim); }
}
.notes-grid{
position:absolute;
inset:0;
display:grid;
grid-template-columns: repeat(var(--notes-cols, 3), 1fr);
grid-template-rows: repeat(var(--notes-rows, 3), 1fr);
pointer-events:none;
}
.notes-grid span{
display:flex;
align-items:center;
justify-content:center;
font-size: clamp(7px, 1.5vw, 10px);
font-weight: 700;
color: var(--accent-secondary);
font-family: 'Nunito', sans-serif;
}
.board[data-size="16"] .notes-grid span{
font-size: clamp(4px, 0.9vw, 6px);
}
.controls{
display:flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 430px;
}
.pill-row-label{
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-dim);
margin-bottom: 5px;
}
.unlock-modes-btn{
display: block;
margin-top: 8px;
padding: 9px 12px;
background: var(--accent-dim);
border: 1.5px dashed var(--accent);
border-radius: 8px;
color: var(--accent);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 12.5px;
text-decoration: none;
text-align: center;
transition: all 0.15s ease;
}
.unlock-modes-btn:hover{ background: var(--accent); color: var(--accent-contrast); }
.pill-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
}
.pill{
flex: 1;
background: transparent;
border: 1.5px solid var(--board-line-thin);
color: var(--text-dim);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 14px;
padding: 9px 6px;
border-radius: 999px;
cursor: pointer;
transition: all 0.15s ease;
letter-spacing: 0.3px;
}
.pill:hover{ border-color: var(--accent-dim); color: var(--text-primary); }
.pill.active{
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
.pill:disabled{ opacity: 0.5; cursor: default; pointer-events: none; }
.keypad{
display:grid;
grid-template-columns: repeat(9, 1fr);
gap: 8px;
width: min(78vw, 50vh, 430px);
}
.key{
background: var(--bg-panel);
border: 1.5px solid var(--board-line-thin);
color: var(--text-primary);
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 19px;
padding: 12px 0;
border-radius: 8px;
cursor: pointer;
transition: all 0.12s ease;
}
.key:hover{ border-color: var(--accent); color: var(--accent); }
.key:active{ transform: scale(0.94); }
.keypad[data-size="16"]{
grid-template-columns: repeat(16, 1fr);
}
.keypad[data-size="16"] .key{
font-size: 13px;
padding: 9px 0;
}
.action-row{
display:flex;
gap: 10px;
}
.action-btn{
flex:1;
display:flex;
flex-direction: column;
align-items:center;
gap: 4px;
background: var(--bg-panel);
border: 1.5px solid var(--board-line-thin);
color: var(--text-dim);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 12.5px;
padding: 10px 4px;
border-radius: 8px;
cursor: pointer;
transition: all 0.12s ease;
}
.action-btn:hover{ color: var(--text-primary); border-color: var(--accent-dim); }
.action-btn.toggled{ color: var(--accent); border-color: var(--accent); }
.action-btn svg{ width: 18px; height: 18px; }
.new-game-btn{
background: var(--accent);
color: var(--accent-contrast);
border: none;
font-family: 'Caveat', cursive;
font-size: 24px;
font-weight: 700;
padding: 12px 0;
border-radius: 10px;
cursor: pointer;
letter-spacing: 0.5px;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.new-game-btn:hover{ box-shadow: 0 6px 18px rgba(232,196,104,0.25); }
.new-game-btn:active{ transform: scale(0.98); }
.new-game-btn:disabled{ opacity: 0.6; cursor: default; box-shadow: none; }
.footnote{
font-size: 13px;
color: var(--text-dim);
text-align:center;
line-height: 1.6;
}
.win-overlay{
position: fixed;
inset:0;
background: rgba(10,15,13,0.82);
display:none;
align-items:center;
justify-content:center;
z-index: 50;
padding: 20px;
}
.win-overlay.show{ display:flex; }
.win-card{
background: var(--bg-panel);
border: 1.5px solid var(--accent-dim);
border-radius: 14px;
padding: 32px 36px;
text-align:center;
max-width: 360px;
}
.win-card h2{
font-family:'Caveat', cursive;
font-size: 44px;
color: var(--accent);
margin: 0 0 6px;
}
.win-card p{ color: var(--text-dim); margin: 4px 0 20px; font-size: 15px; }
.win-stats{
display:flex;
justify-content: center;
gap: 28px;
margin-bottom: 22px;
}
.win-stats div{ text-align:center; }
.win-stats .num{ font-size: 26px; font-weight: 800; color: var(--text-primary); display:block; }
.win-stats .lbl{ font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.game-over-card h2{ color: var(--accent-danger); }
.game-over-card p{ color: var(--text-dim); font-size: 14px; margin: 0 0 20px; line-height: 1.6; }
/* Covers just the board (board-frame has position:relative), not
the whole page - blocks interaction with the puzzle underneath
and holds off starting the timer until the player is ready. */
.start-overlay{
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(10,15,13,0.72);
border-radius: 10px;
z-index: 20;
}
.start-overlay.show{ display: flex; }
.start-card{
background: var(--bg-panel);
border: 1.5px solid var(--accent-dim);
border-radius: 14px;
text-align: center;
padding: 24px 28px;
}
.start-card p{
color: var(--text-dim);
font-size: 14px;
margin: 0 0 16px;
}
.start-card .new-game-btn{
padding: 12px 36px;
width: auto;
}
/* Desktop: the panel is a transparent wrapper - its children (Mode,
Difficulty, How to play) lay out exactly as if they were direct
children of .controls, preserving the normal spacing/order. Only
on mobile does this become an actual collapsible dropdown. */
.mobile-options-panel{
display: contents;
}
.options-menu-btn{
display: none;
background: none;
border: 1.5px solid var(--board-line-thin);
color: var(--text-dim);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
cursor: pointer;
}
.options-menu-btn:hover{ border-color: var(--accent); color: var(--accent); }
@media (max-width: 600px){
h1{ font-size: 42px; }
.layout{ gap: 20px; }
/* Tighter outer margins so more width is actually available for
the board itself - paired with the calc()-based board width
below, which sizes against this exact padding rather than an
approximate vw percentage. */
body.game-body{ padding: 8px 8px; }
.board-column{ gap: 8px; }
.controls{ gap: 10px; }
.board-frame{ padding: 6px; }
.board, .keypad{
width: min(calc(100vw - 28px), 56vh, 430px);
}
.board{ height: min(calc(100vw - 28px), 56vh, 430px); }
/* 16x16's keypad has 16 buttons - a single row makes each one
tiny. On mobile specifically, wrap into 2 rows of 8: since the
16 buttons are already in numeric DOM order (1..16), switching
to 8 columns with no explicit row count makes the grid
auto-wrap into exactly two rows (1-8, then 9-16) with no JS
changes needed. Desktop keeps the single row (still readable
there, and matches the board width in one line). */
.keypad[data-size="16"]{
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 1fr;
gap: 6px;
}
.keypad[data-size="16"] .key{
font-size: 15px;
padding: 8px 0;
}
/* Hides the title/tagline entirely on mobile to reclaim vertical
space - the header still shows stats + nav + the options toggle. */
.title-block{ display: none; }
.header-right{
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px 12px;
width: 100%;
}
.stats{ font-size: 12px; gap: 10px; }
.options-menu-btn{ display: inline-block; }
/* Mode, Difficulty, and How to play collapse into one dropdown,
toggled by the header's Options button, so they don't take up
permanent vertical space on a small screen. */
.mobile-options-panel{
display: none;
position: fixed;
top: 84px;
left: 16px;
right: 16px;
z-index: 45;
flex-direction: column;
gap: 14px;
background: var(--bg-panel);
border: 1.5px solid var(--board-line-thin);
border-radius: 12px;
padding: 18px;
box-shadow: 0 16px 34px rgba(0,0,0,0.35);
max-height: 70vh;
overflow-y: auto;
}
.mobile-options-panel.open{
display: flex;
}
}
.how-to-play-btn{
background: none;
border: none;
color: var(--text-dim);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 13px;
text-decoration: underline;
cursor: pointer;
padding: 2px 0;
align-self: center;
}
.how-to-play-btn:hover{ color: var(--accent); }
.rules-overlay{
position: fixed;
inset: 0;
background: rgba(10,15,13,0.82);
display: none;
align-items: center;
justify-content: center;
z-index: 55;
padding: 20px;
}
.rules-overlay.show{ display: flex; }
.rules-card{
position: relative;
background: var(--bg-panel);
border: 1.5px solid var(--accent-dim);
border-radius: 14px;
padding: 30px 32px;
max-width: 460px;
max-height: 82vh;
overflow-y: auto;
}
.rules-card h2{
font-family: 'Caveat', cursive;
font-size: 38px;
color: var(--text-primary);
margin: 0 0 12px;
}
.rules-card h2 span{ color: var(--accent); }
.rules-card h3{
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-dim);
margin: 18px 0 8px;
}
.rules-card h3:first-of-type{ margin-top: 0; }
.rules-card p{
color: var(--text-primary);
font-size: 14.5px;
line-height: 1.6;
margin: 0;
}
.rules-card ul{
margin: 0;
padding-left: 18px;
color: var(--text-primary);
font-size: 14px;
line-height: 1.7;
}
.rules-card li{ margin-bottom: 4px; }
.rules-close{
position: absolute;
top: 14px;
right: 14px;
background: none;
border: none;
color: var(--text-dim);
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 4px;
}
.rules-close:hover{ color: var(--text-primary); }
.sprite{
position: fixed;
left: 0;
top: 0;
width: 224px;
height: 224px;
pointer-events: none;
z-index: 0;
opacity: 0.92;
will-change: transform;
}
.sprite-inner{ width: 100%; height: 100%; }
.sprite-inner.sprite-flip{ transform: scaleX(-1); }
.sprite-img{
width: 100%;
height: 100%;
display: block;
-webkit-user-drag: none;
user-select: none;
image-rendering: -webkit-optimize-contrast;
}
.grass-tuft{
position: absolute;
left: 3%;
top: 76%;
font-size: 20px;
color: #8fb89a;
opacity: 0;
transition: opacity 0.4s ease;
}
.sprite.state-graze .grass-tuft{ opacity: 1; }
.sprite-zzz{
position: absolute;
right: 6%;
top: 2%;
font-family: 'Caveat', cursive;
font-weight: 700;
font-size: 28px;
color: var(--accent);
opacity: 0;
}
.sprite.state-sleep .sprite-zzz{ opacity: 0.9; animation: zzz-float 3s ease-in-out infinite; }
@keyframes zzz-float{
0%{ transform: translateY(0); opacity: 0; }
20%{ opacity: 0.9; }
100%{ transform: translateY(-18px); opacity: 0; }
}
/* ===== Auth pages (signup / login / profile) ===== */
.auth-body{
align-items: safe center;
}
.auth-wrap{
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
margin: 0 auto;
}
.auth-back{
display:inline-block;
color: var(--text-dim);
text-decoration: none;
font-size: 13px;
margin-bottom: 18px;
}
.auth-back:hover{ color: var(--text-primary); }
.auth-card{
background: var(--bg-panel);
border: 1.5px solid var(--board-line-thin);
border-radius: 14px;
padding: 32px 30px;
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.auth-card h1{
font-family: 'Caveat', cursive;
font-size: 40px;
margin: 0 0 4px;
color: var(--text-primary);
}
.auth-card h1 span{ color: var(--accent); }
.auth-subtitle{
font-size: 14px;
color: var(--text-dim);
margin: 0 0 24px;
}
.field{
display:flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
.field label{
font-size: 13px;
font-weight: 700;
color: var(--text-dim);
}
.field input{
background: var(--bg-deep);
border: 1.5px solid var(--board-line-thin);
border-radius: 8px;
padding: 10px 12px;
color: var(--text-primary);
font-family: 'Nunito', sans-serif;
font-size: 15px;
}
.field input:focus{
outline: none;
border-color: var(--accent);
}
.field-hint{
font-size: 12px;
color: var(--text-dim);
}
.consent-field{
margin-bottom: 16px;
}
.consent-field label{
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12.5px;
color: var(--text-dim);
line-height: 1.5;
cursor: pointer;
}
.consent-field input[type="checkbox"]{
flex-shrink: 0;
margin-top: 2px;
width: 15px;
height: 15px;
accent-color: var(--accent);
}
.consent-field a{ color: var(--accent); }
.form-message{
font-size: 13.5px;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 16px;
line-height: 1.5;
display: none;
}
.form-message.show{ display: block; }
.form-message.error{
background: var(--accent-danger-dim);
color: var(--accent-danger);
}
.form-message.success{
background: var(--accent-secondary-dim);
color: var(--accent-secondary);
}
.auth-submit{
width: 100%;
background: var(--accent);
color: var(--accent-contrast);
border: none;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 15px;
padding: 12px 0;
border-radius: 8px;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.auth-submit:hover{ box-shadow: 0 6px 18px rgba(232,196,104,0.25); }
.auth-submit:active{ transform: scale(0.98); }
.auth-submit:disabled{ opacity: 0.6; cursor: default; }
.auth-switch{
text-align: center;
font-size: 13.5px;
color: var(--text-dim);
margin-top: 18px;
}
.auth-switch a{ color: var(--accent); text-decoration: none; font-weight: 700; }
.auth-switch a:hover{ text-decoration: underline; }
/* Profile page */
.profile-row{
display:flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px dashed var(--board-line-thin);
gap: 12px;
}
.profile-row:last-of-type{ border-bottom: none; }
.profile-label{
font-size: 13px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.profile-value{
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.profile-value.stat-coins{ color: var(--accent); font-size: 20px; }
.profile-edit-btn{
background: none;
border: 1.5px solid var(--board-line-thin);
color: var(--text-dim);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 12.5px;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
transition: all 0.12s ease;
}
.profile-edit-btn:hover{ color: var(--text-primary); border-color: var(--accent-dim); }
.danger-zone{
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--board-line-thin);
}
.danger-zone h2{
font-size: 14px;
color: var(--accent-danger);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 6px;
}
.danger-zone p{
font-size: 13px;
color: var(--text-dim);
margin: 0 0 14px;
line-height: 1.5;
}
.danger-btn{
background: transparent;
border: 1.5px solid var(--accent-danger);
color: var(--accent-danger);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 13.5px;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
transition: all 0.12s ease;
}
.danger-btn:hover{ background: var(--accent-danger-dim); }
.confirm-inline{
display:none;
margin-top: 12px;
padding: 14px;
background: var(--accent-danger-dim);
border-radius: 8px;
font-size: 13.5px;
color: var(--text-primary);
}
.confirm-inline.show{ display:block; }
.confirm-inline .field{ margin: 10px 0; }
.confirm-row{ display:flex; gap: 8px; margin-top: 10px; }
.confirm-row button{
flex: 1;
padding: 9px 0;
border-radius: 8px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 13px;
cursor: pointer;
border: none;
}
.confirm-yes{ background: var(--accent-danger); color: #2a1410; }
.confirm-no{ background: transparent; border: 1.5px solid var(--board-line-thin) !important; color: var(--text-dim); }
/* ===== Theme shop ===== */
.shop-balance{
font-size: 15px;
font-weight: 700;
color: var(--text-dim);
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px dashed var(--board-line-thin);
}
.shop-balance .stat-coins{ color: var(--accent); font-size: 18px; }
.theme-grid{
display: flex;
flex-direction: column;
gap: 14px;
}
.theme-card{
display:flex;
align-items:center;
gap: 14px;
padding: 14px;
border: 1.5px solid var(--board-line-thin);
border-radius: 10px;
}
.theme-swatches{
display:flex;
flex-shrink: 0;
}
.theme-swatch{
width: 24px;
height: 40px;
display:inline-block;
}
.theme-swatch:first-child{ border-radius: 8px 0 0 8px; }
.theme-swatch:last-child{ border-radius: 0 8px 8px 0; }
.theme-card-body{ flex: 1; }
.theme-name{
font-weight: 800;
color: var(--text-primary);
font-size: 15px;
}
.theme-price{
font-size: 13px;
color: var(--text-dim);
margin-top: 2px;
}
.theme-owned-badge{
font-size: 12px;
font-weight: 700;
color: var(--accent-secondary);
background: var(--accent-secondary-dim);
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
}
.theme-buy-btn{ white-space: nowrap; }
.theme-buy-btn:disabled{ opacity: 0.5; cursor: default; }
/* ===== Profile: Appearance / theme picker ===== */
.appearance-section{
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--board-line-thin);
}
.appearance-section h2{
font-size: 14px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 6px;
}
.appearance-section p{
font-size: 13px;
color: var(--text-dim);
margin: 0 0 14px;
line-height: 1.5;
}
.theme-shop-link{
color: var(--accent);
font-weight: 700;
text-decoration: none;
}
.theme-shop-link:hover{ text-decoration: underline; }
.theme-options{
display:flex;
flex-direction: column;
gap: 10px;
}
.theme-option{
display:flex;
align-items:center;
gap: 12px;
padding: 10px 12px;
border: 1.5px solid var(--board-line-thin);
border-radius: 10px;
cursor: pointer;
background: none;
width: 100%;
text-align: left;
font-family: 'Nunito', sans-serif;
}
.theme-option.active{
border-color: var(--accent);
background: var(--accent-dim);
}
.theme-option .theme-swatches{ }
.theme-option .theme-swatch{ width: 18px; height: 28px; }
.theme-option-name{
flex: 1;
font-weight: 700;
font-size: 14px;
color: var(--text-primary);
}
.theme-option-check{
font-size: 12px;
font-weight: 800;
color: var(--accent);
display: none;
}
.theme-option.active .theme-option-check{ display: inline; }
/* ===== Admin page ===== */
.admin-wrap{
max-width: 1400px;
margin: 0 auto;
padding: 0 8px;
}
.admin-title{
font-family: 'Caveat', cursive;
font-size: 40px;
margin: 0 0 20px;
color: var(--text-primary);
}
.admin-title span{ color: var(--accent); }
.admin-layout{
display: grid;
grid-template-columns: 260px 1fr 420px;
gap: 20px;
align-items: start;
}
@media (max-width: 1100px){
.admin-layout{ grid-template-columns: 1fr; }
}
.admin-layout .auth-card{ padding: 20px; }
.admin-list-header{
display:flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.admin-list-header h2{
font-size: 15px;
color: var(--text-primary);
margin: 0;
}
.admin-theme-list{
display:flex;
flex-direction: column;
gap: 8px;
}
.admin-theme-item{
display:flex;
align-items:center;
gap: 10px;
padding: 10px;
border: 1.5px solid var(--board-line-thin);
border-radius: 8px;
cursor: pointer;
background: none;
width: 100%;
text-align:left;
font-family: 'Nunito', sans-serif;
}
.admin-theme-item.active{
border-color: var(--accent);
background: var(--accent-dim);
}
.admin-theme-item .theme-swatches{ flex-shrink: 0; }
.admin-theme-item .theme-swatch{ width: 14px; height: 22px; }
.admin-theme-item-name{
flex: 1;
font-size: 13.5px;
font-weight: 700;
color: var(--text-primary);
}
.admin-theme-item-price{
font-size: 11.5px;
color: var(--text-dim);
}
.field-row{
display:flex;
gap: 14px;
}
.field-row .field{ flex: 1; }
.color-field-group{
margin-top: 18px;
padding-top: 14px;
border-top: 1px dashed var(--board-line-thin);
}
.color-field-group h3{
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-dim);
margin: 0 0 10px;
}
.color-fields-grid{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
.color-field{
display:flex;
flex-direction: column;
gap: 4px;
}
.color-field label{
font-size: 12px;
font-weight: 700;
color: var(--text-dim);
}
.color-field-inputs{
display:flex;
gap: 6px;
align-items:center;
}
.color-field-inputs input[type="color"]{
width: 34px;
height: 34px;
padding: 0;
border: 1.5px solid var(--board-line-thin);
border-radius: 6px;
background: none;
cursor: pointer;
flex-shrink: 0;
}
.color-field-inputs input[type="text"]{
flex: 1;
min-width: 0;
background: var(--bg-deep);
border: 1.5px solid var(--board-line-thin);
border-radius: 6px;
padding: 7px 8px;
color: var(--text-primary);
font-family: 'Nunito', sans-serif;
font-size: 12.5px;
}
.preview-title{
font-size: 14px;
color: var(--text-primary);
margin: 0 0 4px;
}
.preview-frame-wrap{
border: 1.5px solid var(--board-line-thin);
border-radius: 10px;
overflow: hidden;
height: 640px;
}
.preview-frame{
width: 100%;
height: 100%;
border: none;
background: #fff;
}
/* ===== Legal / Terms page ===== */
.legal-card h1{ margin-bottom: 14px; }
.legal-disclaimer{
background: var(--accent-danger-dim);
color: var(--accent-danger);
border-radius: 8px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.6;
margin: 0 0 22px;
}
.legal-card h2{
font-size: 15px;
color: var(--text-primary);
margin: 22px 0 8px;
}
.legal-card h2:first-of-type{ margin-top: 0; }
.legal-card p{
color: var(--text-primary);
font-size: 14px;
line-height: 1.65;
margin: 0 0 10px;
}
.legal-card ul{
margin: 0 0 10px;
padding-left: 18px;
color: var(--text-primary);
font-size: 14px;
line-height: 1.7;
}
.legal-card li{ margin-bottom: 4px; }
/* ===== Coin shop ===== */
.coin-package-list{
display: flex;
flex-direction: column;
gap: 12px;
}
.coin-package-card{
display:flex;
align-items:center;
justify-content: space-between;
padding: 16px;
border: 1.5px solid var(--board-line-thin);
border-radius: 10px;
}
.coin-package-amount{
font-size: 17px;
font-weight: 800;
color: var(--text-primary);
}
.coin-package-amount span{
font-size: 12px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
}
.coin-buy-btn{ white-space: nowrap; }
.coin-buy-btn:disabled{ opacity: 0.5; cursor: default; }
/* ===== Subscribe page ===== */
.sub-status-card{
background: var(--accent-secondary-dim);
border-radius: 10px;
padding: 18px;
}
.sub-status-label{
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-dim);
margin-bottom: 4px;
}
.sub-status-value{
font-size: 16px;
font-weight: 800;
color: var(--accent-secondary);
}
.coming-soon-card{
text-align: center;
padding: 20px 10px;
}
.coming-soon-icon{
font-size: 32px;
margin-bottom: 10px;
}
.coming-soon-card h2{
font-size: 17px;
color: var(--text-primary);
margin: 0 0 8px;
}
.coming-soon-card p{
font-size: 14px;
color: var(--text-dim);
line-height: 1.6;
margin: 0;
}