:root {
  color-scheme: light;
  --ink: #34483b;
  --muted: #748273;
  --paper: #f5f2e8;
  --sage: #dfe5d6;
  --green: #627b68;
  --deep: #405c49;
  --tile: #fffdf5;
  --shadow: 0 5px 0 #c7cbbd, 0 7px 13px rgba(48, 61, 48, .13);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); }
body {
  color: var(--ink);
  font-family: ui-rounded, "Avenir Next", Avenir, system-ui, -apple-system, sans-serif;
  background-image: radial-gradient(#d8ddcf 0.7px, transparent 0.7px);
  background-size: 15px 15px;
}
button { font: inherit; cursor: pointer; }
.app {
  width: min(100%, 760px);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 18px max(26px, env(safe-area-inset-bottom));
  position: relative;
}
.hidden { display: none !important; }
.welcome {
  min-height: calc(100svh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 8px 36px;
}
.mountain-art { width: min(100%, 520px); margin-bottom: 4px; }
.mountain-art svg { width: 100%; display: block; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 750;
}
h1 {
  margin: 0;
  color: var(--deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 12vw, 76px);
  line-height: .91;
  letter-spacing: -.055em;
  font-weight: 600;
}
.subtitle { margin: 17px 0 0; font-size: 15px; letter-spacing: .08em; color: #75836f; }
.intro { max-width: 330px; margin: 24px auto 25px; color: #667366; font-size: 14px; line-height: 1.6; }
.primary {
  border: 0;
  border-radius: 999px;
  padding: 15px 34px;
  background: var(--deep);
  color: #fffdf5;
  font-weight: 700;
  box-shadow: 0 4px 0 #2e4436;
  transition: transform .12s, box-shadow .12s;
}
.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #2e4436; }
.saved-note { min-height: 18px; margin: 16px 0 0; color: var(--muted); font-size: 11px; }
.game { padding-top: 8px; }
.game-header { display: flex; align-items: center; gap: 12px; }
.game-header h2 { margin: 0; font: 600 20px Georgia, serif; color: var(--deep); }
.game-header .eyebrow { margin-bottom: 3px; font-size: 8px; }
.back-button {
  width: 38px; height: 38px; flex: 0 0 38px;
  border: 1px solid #d2d8ca; border-radius: 50%;
  background: rgba(255,255,255,.55); color: var(--deep); font-size: 23px;
}
.level-pill {
  margin-left: auto; padding: 8px 11px; border-radius: 999px;
  background: #e4e8dc; color: var(--muted); font-size: 11px; white-space: nowrap;
}
.level-pill strong { color: var(--deep); margin-left: 3px; }
.level-pill span { opacity: .7; }
.progress-line { height: 5px; background: #e1e5da; border-radius: 9px; margin: 18px 0 12px; overflow: hidden; }
.progress-line span { display: block; height: 100%; width: 0; background: #82977d; border-radius: inherit; transition: width .2s; }
.stats { display: flex; justify-content: space-between; color: #7a8678; font-size: 12px; margin-bottom: 12px; }
.stats strong { color: var(--deep); font-size: 14px; margin-left: 4px; }
.board-wrap {
  width: 100%; max-width: 650px; margin: 0 auto;
  padding: 10px 5px 14px;
  border-radius: 19px;
  background: linear-gradient(145deg, #e5e8da, #d5ddcf);
  box-shadow: inset 0 1px 5px rgba(255,255,255,.7), 0 8px 24px rgba(50,65,50,.08);
}
.board {
  width: 100%;
  aspect-ratio: 8 / 6;
  position: relative;
  overflow: hidden;
}
.tile {
  position: absolute;
  width: var(--tile-width, 11.8%);
  height: 15.1%;
  left: var(--left);
  top: var(--top);
  z-index: var(--z);
  border: 1px solid #d5d5c7;
  border-bottom: 3px solid #c3c6b8;
  border-radius: 7px;
  background: var(--tile);
  box-shadow: 0 2px 4px rgba(42,55,42,.12);
  display: grid;
  place-items: center;
  padding: 0;
  color: #4b5f4d;
  font-size: clamp(16px, 4.6vw, 29px);
  line-height: 1;
  transition: opacity .12s, transform .12s, filter .12s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tile.layer-1 { margin: -3px 0 0 2px; }
.tile.layer-2 { margin: -6px 0 0 4px; }
.tile.layer-3 { margin: -9px 0 0 6px; }
.tile.blocked { filter: brightness(.91) saturate(.78); }
.tile.free { box-shadow: var(--shadow); }
.tile.selected { outline: 3px solid #9aaf88; outline-offset: -3px; transform: translateY(-3px); }
.tile.hint { outline: 3px solid #d7a85e; outline-offset: -3px; }
.tile:disabled { cursor: default; }
.tile.removed { visibility: hidden; pointer-events: none; }
.message {
  min-height: 20px; text-align: center; margin: 13px 0 12px;
  color: #6e7d6d; font-size: 12px;
}
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.tool {
  min-height: 56px; border: 1px solid #d7ddcf; border-radius: 13px;
  background: rgba(255,255,255,.62); color: #506451;
  font-size: 10px; font-weight: 650; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
}
.tool span { font-size: 19px; line-height: 1; }
.tool:active { background: #e2e8db; }
.rules { max-width: 440px; margin: 14px auto 0; text-align: center; color: #92998c; font-size: 10px; line-height: 1.5; }
.overlay {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  padding: 22px; background: rgba(42,56,44,.45); backdrop-filter: blur(5px);
}
.dialog {
  width: min(100%, 360px); padding: 32px 25px 27px; border-radius: 24px;
  background: var(--paper); text-align: center; box-shadow: 0 18px 60px rgba(0,0,0,.2);
}
.dialog-icon { font-size: 38px; color: #8a9b7e; margin-bottom: 12px; }
.dialog h2 { margin: 0 0 10px; color: var(--deep); font: 600 30px Georgia, serif; }
.dialog p:not(.eyebrow) { color: #718071; font-size: 13px; line-height: 1.6; margin: 0 0 22px; }
@media (min-width: 600px) {
  .app { padding-top: 35px; }
  .tile { border-radius: 9px; }
  .game { max-width: 680px; margin: 0 auto; }
}
@media (max-width: 370px) {
  .app { padding-left: 11px; padding-right: 11px; }
  .tools { gap: 5px; }
  .tool { font-size: 9px; min-height: 52px; }
  .board-wrap { padding: 7px 3px 10px; }
}
/* Портреты на плитках маджонга */
.tile { overflow: hidden; background: #f5dfb8; border-color: #d4a65d; }
.tile-portrait { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; border-radius: 5px; }
.tile.selected { outline-color: #4e9a73; }
.tile.hint { outline-color: #e4a43b; }

/* Мастерская воспоминаний */
.workshop-entry { margin-top: 13px; padding: 14px 23px; border: 1px solid #b4a078; border-radius: 999px; background: #f7edda; color: var(--deep); font-weight: 700; box-shadow: 0 3px 0 #dfcfac; }
.workshop-entry:active { transform: translateY(2px); box-shadow: 0 1px 0 #dfcfac; }
.workshop { padding-top: 8px; }
.workshop-panel { margin: 45px auto 0; padding: 34px 24px; max-width: 440px; border-radius: 24px; background: #fffaf0; border: 1px solid #e8dac0; text-align: center; box-shadow: 0 8px 28px rgba(50,65,50,.07); }
.workshop-symbol { font-size: 46px; color: #b69a5d; }
.workshop-panel h3 { margin: 12px 0; color: var(--deep); font: 600 28px Georgia,serif; }
.workshop-panel p { font-size: 14px; line-height: 1.7; color: #667366; }
.workshop-panel .workshop-status { margin-top: 24px; padding: 14px; border-radius: 14px; background: #f1efe4; font-size: 12px; }

.memory-form { display:grid; gap:10px; text-align:left; margin:22px 0; }
.memory-form label { color:var(--deep); font-weight:700; font-size:13px; }
.memory-form input { width:100%; padding:12px; border:1px solid #d7d3c4; border-radius:12px; background:white; font:inherit; font-size:14px; }
.memory-form button { margin-top:9px; }
.memory-preview { width:170px; height:170px; margin:8px auto; border:9px ridge #c99c47; border-radius:12px; background:#e9ddc2; overflow:hidden; }
.memory-preview img { width:100%; height:100%; object-fit:cover; }
.memory-heading { margin-top:26px !important; font-size:23px !important; }
.memory-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.memory-card { padding:10px; background:#f5eddb; border-radius:14px; min-width:0; }
.memory-card img { width:100%; aspect-ratio:1; object-fit:cover; border:7px ridge #c99c47; border-radius:8px; }
.memory-card strong { display:block; margin-top:6px; overflow-wrap:anywhere; font-size:12px; }
.memory-card small { color:#748273; }
.memory-card button { display:block; margin:8px auto 0; background:transparent; border:0; color:#8c5b54; font-size:12px; }

/* Portrait-first mobile mahjong layout */
.app { width:min(100%, 520px); }
.game { max-width:500px; margin:0 auto; }
.board-wrap { max-width:480px; padding:8px 5px 14px; }
.board { aspect-ratio:6 / 8; }
.tile { height:11.75%; font-size:clamp(17px,5vw,29px); }
.tile-portrait { object-fit:cover; }
.game-header { gap:9px; }
.game-header h2 { font-size:clamp(17px,4.8vw,21px); }
.tools { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.tool { min-height:52px; font-size:12px; flex-direction:row; gap:8px; }
.tool span { font-size:21px; }
.workshop-panel { margin-top:22px; }
@media (max-width:390px) {
 .app { padding-left:10px; padding-right:10px; }
 .board-wrap { padding:6px 3px 11px; }
 .tile { border-radius:6px; }
 .stats { margin-bottom:8px; }
 .progress-line { margin:12px 0 9px; }
 .message { margin:10px 0; }
}

/* Warm painted-wood tile look — replaces metallic gold */
.tile {
  background:#f8e6c9;
  border:3px solid #d5a86d;
  border-bottom:5px solid #b98549;
  border-radius:12px;
  box-shadow:inset 0 0 0 2px rgba(255,251,239,.75),0 3px 6px rgba(82,55,27,.13);
}
.tile-portrait { border-radius:7px; }
.memory-preview {
  border:10px solid #d9ae75;
  border-bottom-color:#ba8650;
  border-radius:20px;
  background:repeating-linear-gradient(24deg,#f9e9ce 0px,#f9e9ce 9px,#f4dfbb 11px,#f9e9ce 17px);
  box-shadow:inset 0 0 0 3px #fff6e5,0 7px 16px rgba(80,55,26,.15);
}
.memory-preview img { border-radius:9px; }
.memory-card img {
  border:9px solid #d9ae75;
  border-bottom-color:#ba8650;
  border-radius:17px;
  box-shadow:inset 0 0 0 2px #fff6e5,0 3px 7px rgba(80,55,26,.12);
}

/* Larger portrait-shaped mahjong pieces and layered central arrangement */
.board { aspect-ratio: 5 / 9; }
.tile {
  height: 13.25%;
  border: 1px solid #d3c2a3;
  border-bottom: 3px solid #bca783;
  border-radius: 10px;
  background: #fff8e9;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 3px 5px rgba(58,56,43,.16);
}
.tile.free { box-shadow: 0 3px 0 #c5b69c, 0 5px 9px rgba(48,61,48,.16); }
.tile-portrait { border-radius: 8px; object-fit: cover; }
.board-wrap { padding: 16px 9px 20px; }
@media (max-width:390px) {
  .board-wrap { padding: 10px 5px 15px; }
}

/* Portrait crop preview for future painterly tiles */
.memory-preview { width:min(100%,225px); height:auto; aspect-ratio:3/4; padding:5px; border:5px solid #d4b589; border-bottom-color:#c4a077; border-radius:19px; overflow:hidden; }
.memory-preview img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; transform-origin:center; border-radius:10px; }
.memory-form input[type="range"] { accent-color:#69826a; padding:0; }
.memory-help { font-size:11px !important; margin:0 0 8px !important; text-align:left; color:#7e8678 !important; }

.crop-open {overflow:hidden;}
.crop-modal {position:fixed;inset:0;z-index:100;background:rgba(32,45,37,.7);display:grid;place-items:center;padding:16px;}
.crop-sheet {width:min(100%,420px);max-height:95dvh;overflow:auto;background:#f5f2e8;border-radius:24px;padding:20px;text-align:center;box-shadow:0 20px 70px #0005;}
.crop-sheet h2 {font:600 26px Georgia,serif;color:#405c49;margin:0 0 7px;}
.crop-sheet p {font-size:12px;color:#718071;margin:0 0 14px;line-height:1.5;}
.crop-viewport {width:min(100%,270px);aspect-ratio:3/4;margin:0 auto 16px;position:relative;overflow:hidden;background:#eee0c9;border:5px solid #d2b38a;border-radius:16px;touch-action:none;user-select:none;}
.crop-viewport img {position:absolute;transform:translate(-50%,-50%);max-width:none;pointer-events:none;-webkit-user-drag:none;}
.crop-sheet label {display:block;text-align:left;margin:0 0 7px;font-size:12px;color:#405c49;}
.crop-sheet input[type=range] {width:100%;accent-color:#627b68;}
.crop-actions {display:flex;gap:10px;margin-top:16px;}
.crop-actions button {flex:1;min-height:48px;border-radius:999px;}
.crop-actions button:first-child {background:#fffdf5;border:1px solid #c9d0c1;color:#405c49;}
.crop-edit {border:1px solid #aebca9;border-radius:999px;background:#e4eade;color:#405c49;padding:12px;font-weight:700;}