/* Scoped palette and layout for the local, single-player picture puzzle. */
.jiin-puzzle {
    --jp-ink: #f3ece0;
    --jp-muted: #b7ad9c;
    --jp-accent: #e4c381;
    --jp-accent-ink: #292114;
    --jp-surface: #201f1c;
    --jp-panel: #292720;
    --jp-board: #151512;
    --jp-border: #625239;
    --jp-line: #b69b6138;
    --jp-hover: #dbb76f18;
    --jp-focus: #f4daa7;
    --jp-error: #e8a58b;
    --jp-gutter: 28px;
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--jp-surface);
    color: var(--jp-ink);
    box-shadow: none;
    font-size: 15px;
    font-family: 'DM Sans', system-ui, sans-serif;
    line-height: 1.5;
    overflow: hidden;
    color-scheme: dark;
}
.jiin-puzzle[open] { display: flex; flex-direction: column; }
.jiin-puzzle::backdrop { background: transparent; }
html:is([data-tema="siyah"], [data-tema="fildisi"]) .jiin-puzzle {
    --jp-ink: var(--mat-ink, #ececec);
    --jp-muted: var(--mat-muted, #adadad);
    --jp-accent: var(--mat-ink, #ececec);
    --jp-accent-ink: var(--mat-paper, #181818);
    --jp-surface: var(--mat-paper, #181818);
    --jp-panel: var(--mat-surface, #262626);
    --jp-board: var(--mat-bubble, #303030);
    --jp-border: var(--mat-border, #ffffff26);
    --jp-line: var(--mat-soft-border, #ffffff26);
    --jp-hover: var(--mat-menu-hover, #ffffff0c);
    --jp-focus: var(--mat-focus, #adadad);
}
html[data-tema="fildisi"] .jiin-puzzle { color-scheme: light; }
html[data-tema="hardal"] .jiin-puzzle {
    --jp-ink: #29241b;
    --jp-muted: #74684f;
    --jp-accent: #947029;
    --jp-accent-ink: #fffdf8;
    --jp-surface: #fffdf8;
    --jp-panel: #f4eddf;
    --jp-board: #e8e0cf;
    --jp-border: #9a742c47;
    --jp-line: #66502938;
    --jp-hover: #9a742c12;
    --jp-focus: #765210;
    --jp-error: #a74a2c;
    color-scheme: light;
}
.jiin-puzzle *, .jiin-puzzle *::before, .jiin-puzzle *::after { box-sizing: border-box; }
.jiin-puzzle [hidden] { display: none !important; }
.jiin-puzzle h2, .jiin-puzzle h3, .jiin-puzzle h4, .jiin-puzzle p { margin: 0; }
.jiin-puzzle h2 { color: var(--jp-ink); font-size: 25px; font-weight: 650; line-height: 1.25; letter-spacing: -.6px; }
.jiin-puzzle :is(h2, h3, h4, p, strong, small) { font-family: inherit; }
.jiin-puzzle h3 { color: var(--jp-ink); font-size: 19px; line-height: 1.35; font-weight: 600; }
.jiin-puzzle h4 { color: var(--jp-ink); font-size: 16px; font-weight: 600; }
.jiin-puzzle button, .jiin-puzzle select, .jiin-puzzle input { font: inherit; }
.jiin-puzzle button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jiin-puzzle button:disabled { cursor: default; opacity: .45; }
.jiin-puzzle :focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 3px; }
.jp-header {
    flex: none; display: flex; align-items: center; gap: 12px;
    padding: calc(16px + env(safe-area-inset-top, 0px)) max(calc(var(--jp-gutter) + env(safe-area-inset-right, 0px)), calc((100% - 1100px) / 2)) 16px max(calc(var(--jp-gutter) + env(safe-area-inset-left, 0px)), calc((100% - 1100px) / 2));
    border-bottom: 1px solid var(--jp-border);
}
.jp-header-copy { min-width: 0; flex: 1; }
.jiin-puzzle .jp-eyebrow { color: var(--jp-accent); font-size: 10px; font-weight: 650; letter-spacing: 1.7px; margin-bottom: 7px; }
.jp-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; color: var(--jp-ink); background: transparent; line-height: 1; }
.jp-close svg { display: block; width: 24px; height: 24px; }
.jp-body {
    flex: 1; min-height: 0;
    padding: 24px max(calc(var(--jp-gutter) + env(safe-area-inset-right, 0px)), calc((100% - 1100px) / 2)) calc(24px + env(safe-area-inset-bottom, 0px)) max(calc(var(--jp-gutter) + env(safe-area-inset-left, 0px)), calc((100% - 1100px) / 2));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--jp-border) transparent;
}
.jp-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.jp-intro p { margin-top: 6px; color: var(--jp-muted); font-size: 13px; }
.jp-return { display: flex; flex-wrap: wrap; gap: 8px; }
.jp-button { min-height: 44px; padding: 9px 15px; border: 1px solid var(--jp-border); border-radius: 11px; background: transparent; color: var(--jp-ink); font-size: 13px !important; font-weight: 550 !important; transition: background .15s, border-color .15s; }
.jp-button[aria-pressed="true"] { background: var(--jp-hover); border-color: var(--jp-accent); }
.jp-button.jp-primary { background: var(--jp-accent); border-color: var(--jp-accent); color: var(--jp-accent-ink); white-space: nowrap; }
.jp-filter-row { display: flex; gap: 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.jp-field { display: flex; flex: 1; max-width: 320px; flex-direction: column; gap: 7px; font-size: 12px; color: var(--jp-muted); }
.jp-field select { width: 100%; min-height: 44px; padding: 8px 13px; border: 1px solid var(--jp-border); border-radius: 10px; background: var(--jp-panel); color: var(--jp-ink); font-size: 14px; }
.jp-difficulties { padding: 0; border: 0; margin: 0; display: flex; gap: 7px; }
.jp-difficulties legend { padding: 0; margin-bottom: 7px; font-size: 12px; color: var(--jp-muted); }
.jp-difficulties label { position: relative; cursor: pointer; }
.jp-difficulties input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jp-difficulties span { display: flex; align-items: baseline; gap: 7px; justify-content: center; min-width: 86px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--jp-border); border-radius: 10px; color: var(--jp-ink); font-size: 15px; }
.jp-difficulties small { font-size: 11px; color: var(--jp-muted); }
.jp-difficulties input:checked + span { background: var(--jp-hover); border-color: var(--jp-accent); box-shadow: inset 0 0 0 1px var(--jp-accent); }
.jp-difficulties input:focus-visible + span { outline: 3px solid var(--jp-focus); outline-offset: 3px; }
.jp-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.jp-gallery-card { position: relative; min-width: 0; padding: 0; border: 1px solid var(--jp-border); border-radius: 14px; overflow: hidden; background: var(--jp-panel); color: var(--jp-ink); text-align: left; transition: border-color .15s, box-shadow .15s; }
.jp-gallery-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--jp-board); }
.jp-gallery-card span { display: block; padding: 10px 13px; font-size: 13px; font-weight: 550; }
.jp-gallery-card.is-selected { border-color: var(--jp-accent); box-shadow: 0 0 0 2px var(--jp-accent); }
.jp-gallery-card.is-selected::after { content: '✓'; position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--jp-accent); color: var(--jp-accent-ink); font-size: 16px; font-weight: bold; }
.jp-image-unavailable img { opacity: .25; }
.jiin-puzzle .jp-gallery-message { color: var(--jp-muted); font-size: 13px; margin-bottom: 12px; }
.jp-gallery-message:empty { display: none; }
.jp-upload-row { display: flex; align-items: center; gap: 15px; padding: 20px 0; margin-top: 7px; }
.jp-upload-row p, .jp-start-row p { font-size: 11px; color: var(--jp-muted); margin-top: 7px; }
.jp-personal-preview { width: 96px; height: 64px; object-fit: cover; border-radius: 9px; border: 1px solid var(--jp-border); }
.jp-start-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0 0; border-top: 1px solid var(--jp-border); }
.jp-selection { font-size: 14px; font-weight: 550; }
.jp-game-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 17px; }
.jp-game-title { outline: none; overflow-wrap: anywhere; }
.jiin-puzzle .jp-credit { color: var(--jp-muted); font-size: 10px; margin-top: 4px; }
.jiin-puzzle .jp-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.jp-game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.jp-progress-wrap { flex: 1; max-width: 280px; }
.jp-progress { display: block; font-size: 13px; font-weight: 550; margin-bottom: 6px; }
.jp-meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 5px; border: none; border-radius: 5px; background: var(--jp-panel); accent-color: var(--jp-accent); overflow: hidden; }
.jp-meter::-webkit-progress-bar { background: var(--jp-panel); }
.jp-meter::-webkit-progress-value { background: var(--jp-accent); }
.jp-meter::-moz-progress-bar { background: var(--jp-accent); }
.jp-controls { display: flex; gap: 8px; }
.jp-board-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 12px; border: 1px solid var(--jp-border); scrollbar-width: thin; scrollbar-color: var(--jp-border) var(--jp-board); background: var(--jp-board); }
.jp-board { position: relative; width: 100%; aspect-ratio: 3 / 2; isolation: isolate; background: var(--jp-board); }
/* Dikey resim: dik tahta, ekran yüksekliğine sığacak genişlikte ortalanır. */
.jp-board.is-portrait { aspect-ratio: 2 / 3; width: min(100%, calc((100vh - 240px) * 2 / 3)); width: min(100%, calc((100dvh - 240px) * 2 / 3)); margin: 0 auto; }
.jp-board-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; pointer-events: none; }
.jp-board-outlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke: var(--jp-line); stroke-width: 1; }
.jp-placed { position: absolute; inset: 0; pointer-events: none; }
.jp-placed > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: jp-settle .22s ease-out; }
.jp-piece-outline { stroke: #12110e80; stroke-width: .8; }
.jp-targets { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--jp-columns), 1fr); grid-template-rows: repeat(var(--jp-rows), 1fr); }
.jp-target { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; transition: background .15s; }
.jp-target:focus-visible { outline-offset: -3px; background: var(--jp-hover); }
.jp-target.is-mismatch { background: #cd684049; }
.jp-target.is-filled { cursor: default; }
.jp-board.is-dragging-over { box-shadow: inset 0 0 0 2px var(--jp-accent); }
.jp-board.is-complete .jp-piece-outline { opacity: 0; transition: opacity .6s; }
.jiin-puzzle .jp-board-help { color: var(--jp-muted); font-size: 11px; margin: 9px 0 20px; }
.jp-tray-section { padding: 18px; border: 1px solid var(--jp-border); border-radius: 16px; background: var(--jp-panel); }
.jp-tray-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.jiin-puzzle .jp-selected { color: var(--jp-muted); font-size: 12px; margin-top: 3px; }
.jp-tray { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.jp-piece { position: relative; display: grid; place-items: center; min-width: 0; min-height: 64px; aspect-ratio: 1; padding: 3px; border: 1px solid transparent; border-radius: 11px; background: var(--jp-board); user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab !important; }
.jp-piece svg { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 2px 2px #0005); }
.jp-piece.is-selected { border-color: var(--jp-accent); background: var(--jp-hover); }
.jp-piece.is-selected { box-shadow: inset 0 0 0 1px var(--jp-accent); }
.jp-piece.is-dragging { opacity: .25; }
.jp-drag-ghost { position: fixed; z-index: 10; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 5px 5px #0007); }
.jp-drag-ghost svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Dokunmatik sürükleme: parça ışıktan bir sapın ucunda; sap parçanın ortasından parmağa iner, parçanın arkasında kalır, parmağa doğru söner. */
.jp-drag-stick { position: absolute; z-index: -1; left: 50%; top: 50%; width: 4px; height: calc(50% + var(--jp-stick, 44px)); transform: translateX(-50%); border-radius: 2px; background: linear-gradient(to bottom, #fffaf0 0%, color-mix(in srgb, #fffaf0 55%, var(--jp-accent)) 55%, color-mix(in srgb, var(--jp-accent) 15%, transparent) 100%); box-shadow: 0 0 6px 1px var(--jp-accent), 0 0 16px 3px color-mix(in srgb, var(--jp-accent) 55%, transparent); animation: jp-stick-glow 1.1s ease-in-out infinite alternate; }
@keyframes jp-stick-glow { to { box-shadow: 0 0 9px 2px var(--jp-accent), 0 0 22px 5px color-mix(in srgb, var(--jp-accent) 70%, transparent); } }
.jp-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; }
.jp-page { color: var(--jp-muted); font-size: 12px; min-width: 42px; text-align: center; }
.jp-complete { text-align: center; padding: 23px 16px; margin-bottom: 14px; border: 1px solid var(--jp-border); border-radius: 15px; background: var(--jp-hover); outline: none; }
.jp-complete > span { display: block; color: var(--jp-accent); font-size: 27px; margin-bottom: 3px; }
.jp-complete p { color: var(--jp-muted); font-size: 13px; margin: 8px 0 16px; }
.jp-status { color: var(--jp-accent); font-size: 12px; min-height: 18px; margin-top: 14px; }
.jiin-puzzle .jp-save-status { color: var(--jp-muted); font-size: 10px; margin-top: 6px; }
@keyframes jp-settle { from { opacity: .5; } to { opacity: 1; } }
/* Üzerine gelme vurgusu yalnız fare/kalem olan cihazda: iPhone son dokunulan parçada :hover'ı
   bırakıyor, seçili parçayla aynı göründüğü için iki parça seçili sanılıyordu (9 Eki). */
@media (hover: hover) {
    .jp-close:hover { background: var(--jp-hover); }
    .jp-button:hover:not(:disabled) { background: var(--jp-hover); border-color: var(--jp-accent); }
    .jp-button.jp-primary:hover:not(:disabled) { background: var(--jp-accent); filter: brightness(1.08); }
    .jp-gallery-card:hover { border-color: var(--jp-accent); }
    .jp-target:hover:not(.is-filled) { background: var(--jp-hover); }
    .jp-piece:hover { border-color: var(--jp-accent); background: var(--jp-hover); }
}
@media (min-width: 900px) {
    .jp-play { display: grid; grid-template-columns: minmax(0, 1fr) 245px; column-gap: 18px; align-items: start; }
    .jp-game-heading, .jp-game-toolbar { grid-column: 1 / -1; }
    .jp-board-scroll { grid-column: 1; grid-row: 3; }
    .jp-board-help { grid-column: 1; grid-row: 4; }
    .jp-complete { grid-column: 1 / -1; grid-row: 5; }
    .jp-tray-section { grid-column: 2; grid-row: 3 / span 3; padding: 14px; }
    .jp-tray { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .jp-tray-heading { align-items: stretch; flex-direction: column; gap: 10px; }
    .jp-tray-heading > .jp-button { width: 100%; }
    .jp-pager { gap: 7px; }
    .jp-pager .jp-button { padding: 8px; font-size: 11px !important; }
    .jp-page { min-width: 32px; }
}
@media (max-width: 650px) {
    .jiin-puzzle { --jp-gutter: 16px; }
    .jiin-puzzle h2 { font-size: 23px; }
    .jp-body { padding-top: 19px; }
    .jp-intro { align-items: flex-start; flex-direction: column; margin-bottom: 19px; }
    .jp-filter-row { gap: 15px; align-items: stretch; flex-direction: column; }
    .jp-field { max-width: none; }
    .jp-difficulties { width: 100%; }
    .jp-difficulties label { flex: 1; }
    .jp-difficulties span { min-width: 0; }
    .jp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .jp-gallery-card span { font-size: 12px; padding: 9px; }
    .jp-start-row { align-items: stretch; flex-direction: column; gap: 13px; }
    .jp-game-heading { align-items: flex-start; }
    .jp-game-heading > .jp-button { flex: none; max-width: 115px; padding: 8px 11px; }
    .jp-game-toolbar { gap: 13px; flex-wrap: wrap; }
    .jp-progress-wrap { max-width: none; flex-basis: 100%; }
    .jp-controls { width: 100%; }
    .jp-controls .jp-button { flex: 1; }
    .jp-tray-section { padding: 12px; }
    .jp-tray { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .jp-tray-heading { gap: 8px; }
    .jp-tray-heading > .jp-button { max-width: 105px; flex: none; padding: 8px 10px; }
    .jp-piece { min-height: 57px; }
    .jp-board-help { max-width: 100%; }
}
@media (max-width: 360px) {
    .jp-tray { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jp-difficulties span { flex-direction: column; align-items: center; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .jiin-puzzle *, .jiin-puzzle *::before, .jiin-puzzle *::after { animation: none !important; transition: none !important; }
}