/* Pocket Workshop — accepted 2026-09-15 concept. Gameplay remains on the canvas. */
:root { --workshop-teal: #176576; --workshop-edge: #0d4553; }
body { background: #dfc8a8; }
#app {
  position: relative;
  width: 100%; max-width: 560px; margin: auto;
  height: 100dvh;
  background: #fbf3e7 url('/art/workshop-v1/workbench.webp') center / cover no-repeat;
  box-shadow: 0 0 32px #5d412b24;
}
#hud { gap: 10px; padding: 18px 18px 8px; flex: none; }
#hud .grow { display: none; }
#hud #level {
  flex: 1; min-width: 0;
  background: #e3b584 url('/art/workshop-v1/beech.webp') center / cover;
  color: #402a19; font-size: 21px; font-weight: 800;
  border-color: #c19b72; border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff5dc, 0 3px 0 #b7956f;
}
#hud .btn, #tools .btn {
  border: 2px solid var(--workshop-edge);
  background: linear-gradient(#32899a, var(--workshop-teal));
  box-shadow: inset 0 2px 0 #7cb6bb, 0 4px 0 var(--workshop-edge), 0 6px 8px #54402626;
  color: #fff8e7; border-radius: 15px;
  min-height: 46px; width: 46px; min-width: 46px; padding: 10px;
}
#hud svg, #tools svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
#board { background: transparent; }
#tools { display: flex; justify-content: center; gap: 12px; padding: 0 20px 8px; flex: none; }
#tools #hint { width: auto; min-width: 164px; min-height: 52px; gap: 10px; padding: 6px 24px; border-radius: 24px; font-size: 18px; font-weight: 750; }
#hint::after { content: attr(title); }
#status { text-align: center; color: #725b44; min-height: 30px; padding: 4px 16px 12px; font-size: 13px; line-height: 1.55; word-break: normal; overflow-wrap: anywhere; }
#panel { position: fixed; z-index: 8; padding: max(14px, var(--safe-top)) 18px max(14px, var(--safe-bottom)); background: #241b16a3; overflow-y: auto; }
#panel .card, .sheet .sheet-card {
  border: 3px solid #c49a68; border-radius: 26px;
  background: #fff7e7;
  box-shadow: inset 0 0 0 5px #edd4ae, 0 9px 0 #806247, 0 18px 32px #241b1640;
  padding: 24px; max-width: 380px;
  max-height: calc(100dvh - 48px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto;
}
#panel .card h1 { font-size: 30px; line-height: 1.6; color: #392516; margin: 0 0 8px; }
#panel .card p { word-break: normal; overflow-wrap: anywhere; line-height: 1.7; font-size: 15px; }
#panel-body canvas { border: 5px solid #d1a775; border-radius: 12px; box-shadow: inset 0 0 0 2px #fae8c9, 0 3px 0 #a4825d; }
#panel-actions button, .sheet .sheet-card > button {
  min-height: 48px; height: auto; padding: 8px 14px; border-radius: 17px;
  font: 750 17px/1.6 system-ui, 'Noto Sans Thai', sans-serif;
  border: 2px solid var(--workshop-edge); background: linear-gradient(#32899a, var(--workshop-teal));
  color: #fff8e7; box-shadow: inset 0 2px 0 #7cb6bb, 0 4px 0 var(--workshop-edge);
}
#panel-actions button.ltp-primary { order: -1; }
#panel-actions button.ghost, .sheet .sheet-card > button.ghost {
  background: transparent; color: var(--workshop-teal); box-shadow: none; border-color: transparent;
}
#app button:focus-visible, .sheet button:focus-visible { outline: 3px solid #147eac; outline-offset: 4px; }
#app button:active:not(:disabled) { transform: translateY(2px); }
#app button:disabled { opacity: .45; cursor: not-allowed; }
.loading { background: #fbf3e7 url('/art/workshop-v1/workbench.webp') center / cover; }
@media (max-height: 700px) {
  #hud { padding-top: 10px; padding-bottom: 4px; }
  #tools #hint { min-height: 44px; }
  #status { padding-bottom: 6px; font-size: 13px; }
  #panel .card { padding: 16px 20px; }
  #panel .card h1 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading .screw { animation: none; }
  #app button { transition: none; }
}

/* Full-page route and quiet, readable settings; preserve all native form behavior. */
.sheet .sheet-card { background:#fffdf5; border:1px solid #d9dece; border-radius:22px; box-shadow:0 14px 40px #14241c33; color:#243d38; padding:22px; }
.sheet .sheet-card h1 { font-size:26px; line-height:1.5; font-weight:700; color:#243d38; }
.sheet .sheet-card .purpose { border-bottom:1px solid #e0e5da; padding:18px 0; gap:14px; }
.sheet .sheet-card .purpose input[type=checkbox] { accent-color:#225c4b; width:24px; height:24px; flex:none; }
.sheet .sheet-card .purpose-year { min-height:48px; font-size:16px; border:1px solid #98ac9d; border-radius:10px; background:#fff; }
.sheet .sheet-card > button { background:#225c4b; border:1px solid #174632; box-shadow:0 3px #174632; font-weight:600; font-family:inherit; }
.sheet .sheet-card > button.danger { background:#fffdf5; color:#9f3030; border:1px solid #b36666; box-shadow:none; }
.sheet .sheet-card > button.ghost { color:#225c4b; background:transparent; border-color:transparent; box-shadow:none; }
.sheet .sheet-card .lang-switch { flex-wrap:wrap; }
.sheet .sheet-card .lang-switch button { min-height:44px; min-width:80px; }
.sheet .sheet-card .lang-switch button[aria-pressed=true] { background:#225c4b; color:#fff; }
.workshop-map-page { padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background:#faf2e6 url('/art/workshop-v1/workbench.webp') center/cover; }
.sheet .sheet-card.workshop-map { display:flex; flex-direction:column; width:100%; max-width:560px; height:100%; max-height:none; overflow:hidden; border:0; border-radius:0; box-shadow:none; padding:18px; background:transparent; }
.workshop-map h1 { flex:none; text-align:center; margin:0 0 14px; text-shadow:0 1px #fff; }
.workshop-map-scroll { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; }
.sheet-card.workshop-map .level-grid { display:block; position:relative; padding:0; margin:0; width:100%; }
.ltp-level-route { position:absolute; inset:0; width:100%; height:100%; color:#c6b698; pointer-events:none; }
.sheet-card.workshop-map .level-grid .level-cell { position:absolute; margin:0 0 0 -44px; width:88px; height:88px; min-height:88px; border-radius:50%; font-size:28px; font-weight:700; background:#e4d9c7; color:#81735f; border:3px solid #bcad94; box-shadow:inset 0 3px #fff4,0 6px #aa987c; }
.sheet-card.workshop-map .level-grid .level-cell.done { background:linear-gradient(#3f8a80,#225e57); color:white; border-color:#225e57; box-shadow:inset 0 3px #91c8b2,0 6px #1c4841; }
.sheet-card.workshop-map .level-grid .level-cell.next { background:linear-gradient(#ffe9a0,#eab84d); color:#55401d; border-color:#bb8831; box-shadow:inset 0 3px #fff3c5,0 6px #bb8831,0 0 0 7px #fffae6a8; }
.sheet-card.workshop-map .level-grid .level-cell:disabled { opacity:1; cursor:default; }
.workshop-map footer { flex:none; display:grid; gap:8px; padding-top:16px; }
.workshop-map footer button { width:100%; margin:0; font-size:16px; font-weight:600; min-height:48px; }
.workshop-map footer button.primary { background:linear-gradient(#33899a,#176576); border-color:#0d4553; color:#fff; box-shadow:0 3px #0d4553; }
#hud #level,#tools #hint,#panel-actions button { font-weight:700; }