:root { --skin: none; --bar1: #8c7672; --bar2: #6a5753; --edge: #a8958f; --drop: #7a6460f2; --hover: #a28a85; --text: #f6efe8; --tool: #dfe6ff; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b2633; font: 13px/1.3 Tahoma, Verdana, sans-serif; color: var(--text); }
body { display: flex; flex-direction: column; }
#stage { position: relative; flex: 1; min-height: 0; }
canvas { display: block; touch-action: none; }   /* pinch zoom is the game's, not the browser's */

/* interface skin (View/Frame choice): tiled like the original */
#menubar, #toolbar, .menu-drop, #status, #panel, #help { background: var(--skin) repeat, var(--bar2); }
/* the bars share one continuous copy of the skin (anchored to the window), so the toolbar carries on from the
   menu bar instead of repeating the same strip of the texture */
#menubar, #toolbar, #status { background-attachment: fixed; }
.menu-title, .menu-item, .tool, #status, #panel, #help { text-shadow: 0 0 2px #000, 1px 1px 1px #000; }
#menubar { display: flex; border-bottom: 1px solid var(--edge); user-select: none; }
.menu { position: relative; }
.menu-title { display: block; padding: 4px 9px; font-weight: bold; text-shadow: 0 1px 1px #000a; cursor: default; }
.menu.open .menu-title, .menu-title:hover { box-shadow: inset 0 0 0 99px #ffffff2a; }
.menu-drop { display: none; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 200px; padding: 3px 0;
  border: 1px solid var(--edge); box-shadow: 4px 5px 8px #0009; }
.menu-drop.scroll { max-height: 70vh; overflow-y: auto; }
.menu.open .menu-drop { display: block; }
.menu-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px; padding: 3px 12px 3px 4px; white-space: nowrap; }
.menu-item:hover { box-shadow: inset 0 0 0 99px #ffffff2a; }
.menu-item.disabled { opacity: .45; }
.menu-item .check { text-align: center; color: #fff; }
.menu-drop.menu-sub { position: fixed; top: 0; left: 0; }
.menu.open .menu-sub { display: none; }                       /* '.menu.open .menu-drop' would show it, empty, at 0,0 */
.menu-item.sub-open { box-shadow: inset 0 0 0 99px #ffffff2a; }
.menu.open .menu-item.sub-open > .menu-sub { display: block; }
.menu-item .key { opacity: .7; padding-left: 18px; }
.menu-drop hr { border: 0; border-top: 1px solid #0007; border-bottom: 1px solid #ffffff38; margin: 3px 0; }

#toolbar { display: flex; gap: 2px; padding: 2px 6px; border-bottom: 1px solid #3d3230; }
#toolbar.hidden { display: none; }
.tool { display: flex; align-items: center; gap: 5px; padding: 3px 9px; font: bold 13px Tahoma, Verdana, sans-serif; color: var(--tool);
  background: none; border: 1px solid transparent; border-radius: 3px; text-shadow: 0 1px 1px #000a; cursor: pointer; }
.tool:hover:not(:disabled) { border-color: #ffffff50; box-shadow: inset 0 0 0 99px #ffffff22; }
.tool.on { border-color: #ffffff60; box-shadow: inset 0 0 0 99px #0003; }
.tool:disabled { opacity: .4; cursor: default; }
.tool[hidden] { display: none; }
.tool.tool-right { margin-left: auto; }
.tool svg { width: 20px; height: 20px; }
.tool-pop { position: fixed; z-index: 25; width: 280px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--edge);
  border-radius: 4px; box-shadow: 4px 5px 8px #0009; background: var(--skin) repeat, var(--bar2); text-shadow: 0 0 2px #000, 1px 1px 1px #000; }
.tool-pop label { display: grid; grid-template-columns: 64px minmax(0, 1fr) 2.5em; align-items: center; gap: 8px; }
.tool-pop input { width: 100%; margin: 0; }
.tool-pop output { text-align: right; font-variant-numeric: tabular-nums; }
.tool-pop button { width: 100%; margin-top: 6px; font: inherit; }

#status { display: flex; gap: 28px; padding: 4px 16px; border-top: 1px solid var(--edge); }
#sMusic { margin-left: auto; }
#status b { color: #fff; margin-right: 6px; }

#panel { position: absolute; top: 12px; right: 12px; width: 320px; box-sizing: border-box; padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--edge); display: none; z-index: 10; max-height: calc(100% - 24px); overflow-y: auto; }
#panel .toggle { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; }
#panel.open { display: block; }
#panel h3 { margin: 0 0 8px; font-size: 13px; }
#panel label { display: grid; grid-template-columns: 84px minmax(0, 1fr) 3.5em; align-items: center; gap: 8px; margin: 4px 0; }
#panel label input { width: 100%; margin: 0; }
#panel label output { text-align: right; font-variant-numeric: tabular-nums; }
#panel button { width: 100%; margin-top: 6px; font: inherit; }
/* message box and rankings: interface skin, thin border, Manga Temple like the tile labels */
@font-face { font-family: 'Manga Temple'; src: url('/assets/Fonts/mangat.ttf') format('truetype'); }
#msg, #ranks { background: var(--skin) repeat, var(--bar2); border: 1px solid var(--edge); border-radius: 4px;
  box-shadow: 4px 6px 14px #000a; font-family: 'Manga Temple', Tahoma, sans-serif; text-shadow: 0 0 2px #000, 1px 1px 1px #000; }
#msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 300px; max-width: min(560px, 90%);
  padding: 14px 26px 16px; text-align: center; pointer-events: none; z-index: 5; }
#msg[hidden], #ranks[hidden] { display: none; }
#note { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); max-width: min(560px, 90%); padding: 8px 18px;
  text-align: center; z-index: 6; pointer-events: none; transition: opacity .8s;
  background: var(--skin) repeat, var(--bar2); border: 1px solid var(--edge); border-radius: 4px; box-shadow: 3px 4px 10px #0009;
  font: 15px 'Manga Temple', Tahoma, sans-serif; text-shadow: 0 0 2px #000, 1px 1px 1px #000; }
#note[hidden] { display: none; }
#note.out { opacity: 0; }
#note p { margin: 1px 0; }
#msg h2 { margin: 0 0 6px; font-size: 32px; font-weight: normal; letter-spacing: .5px; }
#msg p { margin: 2px 0 0; font-size: 17px; }
#msg form { display: flex; gap: 8px; justify-content: center; margin-top: 12px; pointer-events: auto; }
#msg input, #msg button { font: 17px 'Manga Temple', Tahoma, sans-serif; padding: 3px 10px; border: 1px solid var(--edge);
  border-radius: 3px; background: #0005; color: var(--text); }
#msg input { width: 12em; }
#msg button { cursor: pointer; background: #ffffff1c; }
#msg button:hover { background: #ffffff33; }
#ranks { position: absolute; top: 16px; right: 16px;   /* near the top (James 2026-10-22) */ width: 210px; box-sizing: border-box;
  padding: 10px 14px 12px; z-index: 4; user-select: none; }
#ranks h3 { margin: 0; font-size: 22px; font-weight: normal; text-align: center; }
#ranks .sub { text-align: center; font-size: 14px; margin-bottom: 8px; opacity: .85; }
#ranks ol { margin: 0; padding: 0; list-style: none; font-size: 16px; counter-reset: rank; }
#ranks li { display: grid; grid-template-columns: 1.7em minmax(0, 1fr) auto; gap: 6px; padding: 1px 0; counter-increment: rank; }
#ranks li::before { content: counter(rank) '.'; text-align: right; }
#ranks li .n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#ranks li .t { display: flex; }
#ranks li .t i { font-style: normal; text-align: center; }
#ranks li .t .dig { width: .66em; }
#ranks li .t .col { width: .34em; }
#ranks li.new { color: #ffe08a; }
#ranks .none { margin: 4px 0 0; text-align: center; font-size: 15px; opacity: .8; }
#err { position: absolute; top: 10px; left: 12px; color: #ff8080; white-space: pre-wrap; max-width: 90vw; margin: 0; z-index: 30; }
#help { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); width: min(520px, 90vw); padding: 14px 18px; z-index: 40;
  border: 1px solid var(--edge); box-shadow: 4px 6px 14px #000a; }
#help h3 { margin: 0 0 6px; }

/* New game picker: the original's Welcome box (Geisha art, button column, preview, description) */
#picker { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: #0005; }
#picker[hidden] { display: none; }
/* Welcome page (redesigned 2026-10-23): James's ink-painting art across the whole box, a soft ink separator where the
   old side panel ended, light frosted buttons in the painting's colours (sage green, coral, ink). */
.pk-box { position: relative; display: flex; width: min(960px, 94%); aspect-ratio: 1860 / 1280; border-radius: 14px; overflow: hidden;
  background: #f1ece6 url('/assets/Welcome/Background.jpg') center / cover; box-shadow: 0 18px 48px #000b, 0 0 0 1px #ffffff40;
  font-family: 'Segoe UI', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; color: #2b2b2b; --sage: #5f8f6e; --coral: #d4604c; }
.pk-side { position: relative; flex: 0 0 17.2%; display: flex; flex-direction: column; gap: 12px; padding: 17% 2.2% 0; box-sizing: border-box; }
.pk-side::after { content: ''; position: absolute; right: 0; top: 8%; bottom: 8%; width: 2px; border-radius: 2px;
  background: linear-gradient(#2b2b2b00, #2b2b2b8c 20%, #5f8f6e8c 80%, #5f8f6e00); }
.pk-main { position: relative; flex: 1; }
.pk-main h2 { position: absolute; left: 5%; top: 4.5%; margin: 0; font-weight: 300; font-size: clamp(18px, 2.7vw, 32px); letter-spacing: .5px; color: #2b2b2b; }
.pk-main h2 span { font-weight: 600; color: var(--coral); }
.pk-close { position: absolute; right: 2.2%; top: 3%; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: #ffffffb0; color: #2b2b2b; font: 16px Arial, sans-serif; box-shadow: 0 2px 6px #0003; }
.pk-close:hover { background: #fff; }
.pk-thumb { position: absolute; left: 6%; top: 19%; width: 37%; border-radius: 10px; box-shadow: 0 10px 24px #0005, 0 0 0 4px #ffffffcc; }
.pk-starts { position: absolute; left: 6%; top: 53%; width: 37%; display: flex; gap: 4%; justify-content: center; }
.pk-note { position: absolute; left: 6%; top: 61.5%; width: 37%; text-align: center; font-size: clamp(12px, 1.3vw, 15px); color: #5a5a5a; }
.pk-desc { position: absolute; left: 4%; bottom: 4%; width: 52%; box-sizing: border-box; padding: 10px 16px; border-radius: 10px; text-align: center;
  font-size: clamp(13px, 1.5vw, 17px); color: #2b2b2b; background: #ffffff9e; backdrop-filter: blur(4px); box-shadow: 0 2px 8px #0002; }
.pk-side button, .pk-starts button { font: 600 clamp(13px, 1.45vw, 17px) 'Segoe UI', 'Noto Sans', Arial, sans-serif; letter-spacing: .3px;
  padding: 9px 6px; cursor: pointer; color: #2b2b2b; border: 0; border-radius: 999px; background: #ffffffb8;
  box-shadow: 0 2px 6px #0002, inset 0 0 0 1px #2b2b2b22; transition: background .15s, box-shadow .15s, color .15s; }
.pk-starts button { flex: 1; max-width: 50%; padding: 11px 6px; color: #fff; background: var(--coral); box-shadow: 0 4px 12px #d4604c66; }
.pk-side button.on { background: var(--sage); color: #fff; box-shadow: 0 3px 10px #5f8f6e66; }
.pk-side button:not(.on):hover { background: #fff; }
.pk-starts button:hover { background: #c4503d; box-shadow: 0 6px 16px #d4604c80; }

/* Background menu: section titles and the hover thumbnail */
.menu-header { padding: 5px 12px 3px; font: 13px 'Manga Temple', Tahoma, sans-serif; color: #ffe08a; text-shadow: 0 0 2px #000, 1px 1px 1px #000;
  cursor: default; letter-spacing: .5px; }
#menu-preview { position: fixed; z-index: 50; width: 240px; height: 150px; object-fit: cover; pointer-events: none;
  border: 1px solid var(--edge); border-radius: 3px; box-shadow: 4px 6px 14px #000c; background: #000; }
#menu-preview[hidden] { display: none; }

/* gap between the game menus and the style menus (Background, Tiles, Frame) */
.menu-spacer { width: 28px; margin: 5px 6px; border-left: 1px solid #ffffff30; }

/* Touch mode (main.js): finger-sized menus and toolbar, no key hints */
.touch .menu-title { padding: 9px 14px; font-size: 18px; }
.touch .menu-item { grid-template-columns: 28px 1fr auto; padding: 9px 18px 9px 8px; font-size: 18px; }
.touch .menu-item .key:not(.arrow) { display: none; }
.touch .menu-item.armed { box-shadow: inset 0 0 0 99px #ffffff2a; }
.touch .tool { padding: 8px 14px; font-size: 16px; }
.touch .tool svg { width: 28px; height: 28px; }
.touch .tool-pop { width: 380px; padding: 12px 14px; }
.touch .tool-pop input { height: 34px; }
.touch .tool-pop button, .touch #msg button, .touch #help button { padding: 9px 18px; }
.help-touch, .touch .help-keys { display: none; }
.touch .help-touch { display: block; }
#msg .choice { display: flex; gap: 8px; justify-content: center; margin-top: 12px; pointer-events: auto; }

/* Kumika: countdown beside the board, shown for the last 10 seconds, blinking for the last 5 (main.js) */
#kTimer { position: absolute; z-index: 6; transform: translate(-100%, -50%); padding: 0 18px; pointer-events: none;
  font: 64px 'Manga Temple', Tahoma, sans-serif; color: #fff; text-shadow: 0 0 6px #000, 2px 2px 3px #000; }
#kTimer.urgent { color: #ff6a4a; animation: kblink 1s steps(2, start) infinite; }
@keyframes kblink { to { visibility: hidden; } }
#kTimer[hidden], #sTimeBox[hidden] { display: none; }

/* Phones (James 2026-10-23, for the bus via mahjong.starbase.life): bars wrap instead of running off the screen,
   the leaderboard shrinks into the corner, the status bar wraps. */
@media (max-width: 760px) {
  #menubar, #toolbar, #status { flex-wrap: wrap; }
  .menu-spacer { display: none; }
  .tool.tool-right { margin-left: 0; }
  #status { gap: 4px 16px; padding: 4px 10px; }
  #ranks { width: 150px; padding: 6px 8px; top: 8px; right: 8px; transform-origin: top right; }
  #ranks h3 { font-size: 16px; } #ranks .sub { font-size: 11px; margin-bottom: 4px; } #ranks ol { font-size: 12px; }
  #kTimer { font-size: 40px; padding: 0 8px; }
  .menu-drop { max-width: calc(100vw - 16px); }
}
/* bars may always wrap (they fit on one line on a desktop); short landscape phones get slimmer touch bars */
#menubar, #toolbar { flex-wrap: wrap; }
@media (max-height: 500px) {
  .touch .menu-title { padding: 5px 11px; font-size: 16px; }
  .touch .tool { padding: 4px 10px; font-size: 14px; }
  .touch .tool svg { width: 22px; height: 22px; }
  #ranks { width: 150px; padding: 6px 8px; top: 8px; right: 8px; }
  #ranks h3 { font-size: 16px; } #ranks .sub { font-size: 11px; margin-bottom: 4px; } #ranks ol { font-size: 12px; }
}