update frame

app/styles.css

@@ -863,13 +863,16 @@
       min-height: 100%;
       padding: 18px;
       box-sizing: border-box;
+      overflow-x: clip;
     }
 
     .tarot-frame-shell {
       width: min(1480px, 100%);
+      max-width: 100%;
       margin: 0 auto;
       display: grid;
       gap: 16px;
+      min-width: 0;
     }
 
     .tarot-frame-header {
@@ -988,6 +991,27 @@
       box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
     }
 
+    .tarot-frame-field {
+      display: grid;
+      gap: 6px;
+      color: #e2e8f0;
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+    }
+
+    .tarot-frame-field select {
+      width: 100%;
+      padding: 9px 10px;
+      border: 1px solid rgba(99, 102, 241, 0.34);
+      border-radius: 12px;
+      background: rgba(15, 23, 42, 0.7);
+      color: #f8fafc;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
     .tarot-frame-settings-group {
       display: grid;
       gap: 10px;
@@ -1099,11 +1123,17 @@
 
     .tarot-frame-board-grid {
       display: block;
+      width: 100%;
+      min-width: 0;
     }
 
     .tarot-frame-panel {
-      --frame-cell-size: clamp(34px, 3.1vw, 52px);
-      --frame-gap: clamp(2px, 0.3vw, 6px);
+      --frame-grid-zoom-scale: 1;
+      --frame-base-cell-width: clamp(32px, 2.6vw, 46px);
+      --frame-cell-width: calc(var(--frame-base-cell-width) * var(--frame-grid-zoom-scale));
+      --frame-cell-height: calc(var(--frame-cell-width) * 1.5);
+      --frame-base-gap: clamp(2px, 0.3vw, 6px);
+      --frame-gap: calc(var(--frame-base-gap) * var(--frame-grid-zoom-scale));
       display: grid;
       gap: 14px;
       padding: 18px;
@@ -1113,7 +1143,8 @@
         radial-gradient(circle at top, rgba(59, 130, 246, 0.08), transparent 34%),
         linear-gradient(180deg, #161622 0%, #0f0f17 100%);
       box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24);
-      overflow: auto;
+      overflow: hidden;
+      min-width: 0;
     }
 
     .tarot-frame-panel-head {
@@ -1151,6 +1182,21 @@
       white-space: nowrap;
     }
 
+    .tarot-frame-grid-viewport {
+      width: 100%;
+      max-width: 100%;
+      overflow: auto;
+      overscroll-behavior: contain;
+      min-width: 0;
+    }
+
+    .tarot-frame-grid-track {
+      width: max-content;
+      min-width: max-content;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
     .tarot-frame-legend {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1178,18 +1224,19 @@
 
     .tarot-frame-grid {
       display: grid;
-      grid-template-columns: repeat(var(--frame-grid-size), var(--frame-cell-size));
-      grid-template-rows: repeat(var(--frame-grid-size), var(--frame-cell-size));
+      grid-template-columns: repeat(var(--frame-grid-size), var(--frame-cell-width));
+      grid-template-rows: repeat(var(--frame-grid-size), var(--frame-cell-height));
       gap: var(--frame-gap);
       justify-content: center;
       align-content: center;
+      width: max-content;
       min-width: max-content;
     }
 
     .tarot-frame-slot {
       position: relative;
-      width: var(--frame-cell-size);
-      height: var(--frame-cell-size);
+      width: var(--frame-cell-width);
+      height: var(--frame-cell-height);
       border-radius: 8px;
       transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
     }
@@ -1362,8 +1409,8 @@
     .tarot-frame-drag-ghost {
       position: fixed;
       z-index: 120;
-      width: 86px;
-      height: 129px;
+      width: 90px;
+      height: 135px;
       pointer-events: none;
       border-radius: 14px;
       overflow: hidden;
@@ -1434,7 +1481,7 @@
       }
 
       .tarot-frame-panel {
-        --frame-cell-size: 28px;
+        --frame-base-cell-width: 26px;
       }
 
       .tarot-frame-card-badge {