/* ÇİT · Game 04 · controls share platform geometry and colors */
.fence-catalog-art{background:linear-gradient(135deg,#f8f6df,#e5f0d4);color:#527a3b}.fence-demo{font-family:ui-monospace,monospace;font-size:clamp(1rem,1.7vw,1.6rem);font-weight:900;line-height:1.65;color:#40684e;text-align:center;white-space:pre}
.fence-command-bar .arena-head-actions .btn{background:linear-gradient(180deg,#0fa39a,#0c857f);color:#fff;border-color:#0b726e;box-shadow:0 4px 0 #0a5c59,0 10px 18px #0d70681f}.fence-command-bar .arena-head-actions .btn:hover:not(:disabled){background:#0b877f!important;color:#fff!important}
.fence-playground{background:var(--theme-bg,#f7fafb);display:flex;justify-content:center;align-items:center;overflow:hidden;min-height:0}.fence-play-area{width:min(100%,700px);height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.fence-board{--fence-size:470px;--fence-n:5;position:relative;display:block;width:min(100%,var(--fence-size));height:auto;aspect-ratio:1;background:#f9fcff;border:4px solid #244055;border-radius:16px;box-shadow:0 0 0 8px #edf3f7,0 16px 30px #092b3a20;flex:0 0 auto;touch-action:manipulation;user-select:none;overflow:hidden}.fence-inner{position:absolute;inset:7%;}.fence-dot{position:absolute;transform:translate(-50%,-50%);width:7px;height:7px;background:#31566f;border-radius:50%;pointer-events:none}.fence-number{position:absolute;transform:translate(-50%,-50%);font-size:clamp(1rem,2.9vmin,2rem);font-weight:900;color:#263f52;pointer-events:none;line-height:1}.fence-edge{position:absolute;transform:translate(-50%,-50%);display:block;z-index:2;appearance:none;padding:0;background:transparent;border:0;cursor:pointer;touch-action:manipulation;border-radius:8px;overflow:visible}.fence-edge.fence-h{width:calc(var(--fence-step) * .80);height:16px}.fence-edge.fence-v{width:16px;height:calc(var(--fence-step) * .80)}.fence-edge::after{content:"";position:absolute;inset:0;opacity:.18;border-radius:inherit;background:transparent;transition:background .1s}.fence-edge:hover:not(.on)::after,.fence-edge:focus-visible:not(.on)::after{background:#24a499;opacity:.13}.fence-edge.on::after{background:#0b9187;opacity:1;border-radius:10px}.fence-edge.on.fence-h::after{height:8px;top:50%;transform:translateY(-50%)}.fence-edge.on.fence-v::after{width:8px;left:50%;transform:translateX(-50%)}.fence-edge:focus-visible{outline:2px solid #e78b4b;outline-offset:2px}.fence-controls{display:flex;justify-content:center;gap:11px;flex-wrap:wrap}.fence-controls .btn{min-width:130px;min-height:44px}.fence-play-area .feedback{width:min(100%,650px);min-height:29px}.fence-race-area{gap:10px}.fence-race-board{--fence-size:350px;box-shadow:0 0 0 5px #ffffff90,0 12px 22px #19314520}.fence-race-side .fence-number{font-size:clamp(.85rem,1.7vmin,1.5rem)}
html[data-theme="dark"] .fence-playground{background:#182735}html[data-theme="dark"] .fence-board{background:#243a4b;border-color:#a6bcd0;box-shadow:0 0 0 8px #263b4f,0 16px 30px #0004}html[data-theme="dark"] .fence-number{color:#f3f6ff}html[data-theme="dark"] .fence-dot{background:#adc2d5}html[data-theme="dark"] .fence-edge.on::after{background:#46c6ae}
@media(min-width:701px){.game-catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-card{min-width:0}.catalog-info strong{font-size:clamp(1.05rem,1.4vw,1.48rem)}}
@media(max-width:700px){.game-catalog{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(0,1fr))}.fence-board{border-width:3px;border-radius:13px}.fence-controls .btn{min-width:95px;min-height:40px;font-size:.82rem}.fence-dot{width:5px;height:5px}.fence-number{font-size:clamp(.9rem,4.5vw,1.5rem)}}
/* A4 printing: nine individual question panels */
@page fenceA4{size:A4 portrait;margin:5mm}
@media print{.fence-print-sheet{page:fenceA4;width:200mm!important;height:287mm!important;max-height:287mm!important}.fence-print-head{height:25mm!important;min-height:25mm!important;padding-top:.25mm}.fence-print-head h1{font-size:18pt!important}.fence-print-head .print-howto{font-size:8.5pt!important;margin-top:1mm!important}.fence-print-head .print-rule{font-size:9.2pt!important;margin-top:.5mm!important}.fence-print-body{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:1.5mm;min-height:0;align-items:center;justify-items:center}.fence-print-card{width:64.3mm;height:76.3mm;max-width:100%;min-height:0;display:flex;align-items:center;justify-content:center;border:.28mm solid #909090;border-radius:1.6mm;break-inside:avoid}.fence-paper-grid{position:relative;width:58mm;height:58mm}.fence-paper-dot{position:absolute;transform:translate(-50%,-50%);width:1mm;height:1mm;background:#333;border-radius:50%}.fence-paper-number{position:absolute;transform:translate(-50%,-50%);font-size:11pt;font-family:Arial,sans-serif;font-weight:800;color:#222}.fence-paper-line{position:absolute;transform:translate(-50%,-50%);background:#666}.fence-paper-line.hor{width:var(--fence-step);height:.6mm}.fence-paper-line.ver{width:.6mm;height:var(--fence-step)}.fence-print-sheet .sheet-footer{height:8mm}}

/* Instant validation: rejected segments flash briefly without changing state. */
.fence-edge.fence-invalid::after,.fence-edge.fence-invalid:hover::after{background:#e65b48!important;opacity:1!important;border-radius:10px}
.fence-edge.fence-invalid.fence-h::after{height:8px;top:50%;transform:translateY(-50%)}
.fence-edge.fence-invalid.fence-v::after{width:8px;left:50%;transform:translateX(-50%)}
html[data-theme="dark"] .fence-edge.fence-invalid::after{background:#ff7866!important}

/* v0.1.34 — catalog thumbnail containment: keep the five dotted rows
   fully inside the illustration, never over the card description. */
.fence-catalog .fence-catalog-art{
  position:relative;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
}
.fence-catalog .fence-demo{
  display:block;
  max-width:100%;
  max-height:100%;
  box-sizing:border-box;
  overflow:hidden;
  font-size:clamp(.82rem,1.2vw,1.3rem);
  line-height:1.34;
  letter-spacing:0;
  white-space:pre;
}
@media(max-height:520px){
  .fence-catalog .fence-demo{font-size:clamp(.62rem,1.05vw,.82rem);line-height:1.12}
}