/* Shared responsive styles for Chaos Mahjong Night */
:root{--max-width:980px;--gap:16px}
/* glyph sizing: control tile and keyboard glyph sizes here */
:root{--tile-size:28px;--kbd-size:28px}
/* default color variables (can be overridden by body.palette-*) */
:root{--bg:#fafafa;--panel-bg:#fff;--text:#111;--muted:#666;--border:#eee;--accent:#0b66ff;--accent-2:#0b9933;--accent-3:#f39c12}
/* Utility classes for centralized styling */
.auth-status{margin-left:12px;color:#666}
.search-row{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.search-input{flex:1;padding:8px}
.small-nowrap{white-space:nowrap;color:#444}
.select-input{padding:8px}
.panel.narrow{flex:0.6}
.spacer-sm{height:12px}
.mt-8{margin-top:8px}
.mt-18{margin-top:18px}
.muted{color:#555}
#handInput{width:60%;padding:8px;margin-bottom:8px}
.btn-row{margin-top:10px;display:flex;gap:8px}
.tile-keyboard{margin-top:6px;position:relative}
.mt-12{margin-top:12px}
.text-dark{color:#222}
.hidden{display:none}
.entry-header{display:flex;align-items:center;justify-content:space-between}
.no-match{color:#666}
.auth-status{margin-left:12px;color:#666}
.error{color:#a33}
.mt-10{margin-top:10px}
.term-short{color:#555}
.term-section{margin-top:10px}
.glossary-left{flex:1}
.glossary-right{margin-left:12px}
.glossary-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.entry .icon-btn{padding:8px 12px}
.entry{display:flex;gap:12px;align-items:flex-start;padding:12px;border-bottom:1px solid #f4f4f4}
.entry-title{font-weight:700;font-size:1.05rem}
.entry-summary{margin-top:6px;color:#444}
.small-meta{color:var(--muted,#666);font-size:0.9rem;margin-top:6px}
.badge{display:inline-block;padding:4px 8px;border-radius:12px;font-size:0.9rem;margin-top:8px}
.badge-approved{background:#e6f8ea;color:#0b9933}
.badge-user{background:#e8f3ff;color:#0b66ff}
.no-match{color:#666}
.sandbox-notice{margin-top:8px;color:#a66;display:none}
.panel button + button{margin-left:8px}
body{font-family:Arial,Helvetica,sans-serif;margin:16px;background:var(--bg,#fafafa);color:var(--text,#111);-webkit-font-smoothing:antialiased}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
header h1{margin:0;font-size:1.4rem}
nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
nav a{color:inherit;text-decoration:none;padding:6px 8px;border-radius:6px}
nav a:hover{background:rgba(0,0,0,0.03)}
#authStatus{font-size:0.95rem;color:#666}
.container{max-width:var(--max-width);margin:12px auto 0;display:flex;gap:20px}
.panel{background:var(--panel-bg,#fff);padding:14px;border:1px solid var(--border,#eee);border-radius:8px;box-sizing:border-box}
.panel h2{margin-top:0}
input[type=text],textarea,input,select,button{font-size:1rem}
input,textarea,select{box-sizing:border-box;border:1px solid #ddd;padding:10px;border-radius:8px}
button{cursor:pointer}
/* Make forms and buttons more touch-friendly */
button, .icon-btn, .kbd-btn{padding:10px;border-radius:8px}
/* Tile keyboard adjustments */
#tileDisplay{gap:4px}
.kbd-btn{min-width:44px;min-height:44px}
.more-tile{min-width:44px;min-height:44px}
/* Utility: full width elements on small screens */
.full-width{width:100%}
/* Mobile-specific rules */
@media (max-width: 700px){
  body{margin:12px}
  header{flex-direction:column;align-items:flex-start}
  .container{flex-direction:column;padding:0}
  .panel{width:100%}
  nav{width:100%;order:2}
  nav a{display:inline-block}
  #authStatus{display:block;margin-top:6px}
  /* Inputs and buttons stretch full width */
  input[type=text],textarea,select,#handInput{width:100% !important}
  button, .icon-btn{width:100%;display:block}
  /* Keyboard stacks nicely */
  #tileKeyboard{width:100% !important;display:block}
  .kbd-rows{width:100%}
  .keyboard-row{flex-wrap:wrap;justify-content:center}
  .kbd-controls-right{flex-direction:row;justify-content:space-between;align-items:center}
  /* Make tiles slightly smaller on narrow devices */
  :root{--tile-size:26px;--kbd-size:26px}
  .kbd-btn{font-size:var(--kbd-size)}
  .tile{font-size:var(--tile-size)}
}
@media (max-width:420px){
  header h1{font-size:1.2rem}
  :root{--tile-size:24px;--kbd-size:24px}
  .kbd-btn{min-width:40px;min-height:40px}
  .more-tile{min-width:40px;min-height:40px}
}

/* Palette classes - apply to <body> as e.g. <body class="palette-default"> */
.palette-default{ --bg:#fafafa; --panel-bg:#fff; --text:#111; --muted:#666; --border:#eee; --accent:#0b66ff; --accent-2:#0b9933; --accent-3:#f39c12 }
.palette-dark{ --bg:#0f1113; --panel-bg:#9aa0a6; --text:#e6e6e6; --muted:#9aa0a6; --border:#222428; --accent:#6db8ff; --accent-2:#9ae6a6; --accent-3:#ffb86b }
.palette-purple{ --bg:#2b004d; --panel-bg:#d6b3ff; --text:#5a3a6a; --muted:#5a3a6a; --border:#e8dff7; --accent:#6f42c1; --accent-2:#d6b3ff; --accent-3:#ff80bf }
.palette-coral-teal{ --bg:#ff6b6b; --panel-bg:#17bebb; --text:#03363a; --muted:#4a6b6b; --border:#eef6f5; --accent:#ff6b6b; --accent-2:#17bebb; --accent-3:#ffd6ca }
.palette-mint{ --bg:#f8fffb; --panel-bg:#4b7a66; --text:#03301a; --muted:#4b7a66; --border:#e6f2ec; --accent:#24c77a; --accent-2:#2b8a7a; --accent-3:#66d7b1 }
.palette-sunset{ --bg:#fffaf6; --panel-bg:#8b5a45; --text:#3b1f12; --muted:#8b5a45; --border:#faefe6; --accent:#ff6f3c; --accent-2:#ffb86b; --accent-3:#f45b69 }
.palette-slate{ --bg:#f6f8fa; --panel-bg:#5b6b77; --text:#0b1822; --muted:#5b6b77; --border:#e8edf2; --accent:#3b82f6; --accent-2:#7f9dbf; --accent-3:#9fb6d6 }
.palette-vintage{ --bg:#fbf7f2; --panel-bg:#8b7f6e; --text:#2b2a24; --muted:#8b7f6e; --border:#f1e9e0; --accent:#b85c38; --accent-2:#e0b084; --accent-3:#d9b29a }
.palette-neon{ --bg:#0b0f14; --panel-bg:#8ad3d8; --text:#da5899; --muted:#9bd6da; --border:#07202a; --accent:#00e6a6; --accent-2:#7afcff; --accent-3:#ff66b3 }
.palette-pastel{ --bg:#fffafc; --panel-bg:#7a7a7a; --text:#2b2b2b; --muted:#7a7a7a; --border:#f5f2f6; --accent:#a495ff; --accent-2:#ffb3c6; --accent-3:#9fe6d3 }