
.ft-wrap{--ft-panel:#f8fafc;--ft-card:#fff;--ft-text:#17202a;--ft-muted:#64748b;--ft-border:#dbe3ea;--ft-green:#166534;--ft-green2:#15803d;max-width:1200px;margin:20px auto;color:var(--ft-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ft-hero{display:flex;justify-content:space-between;align-items:center;padding:28px;border-radius:22px;background:linear-gradient(135deg,#14532d,#166534,#1d4ed8);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12);margin-bottom:18px}
.ft-hero h1{margin:8px 0 4px;font-size:30px}.ft-hero p{margin:0;opacity:.9}.ft-badge{font-size:11px;font-weight:800;letter-spacing:1.4px;background:rgba(255,255,255,.16);padding:7px 10px;border-radius:99px}.ft-hero-icon{font-size:55px}
.ft-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-bottom:18px}.ft-card{background:var(--ft-card);border:1px solid var(--ft-border);border-radius:18px;padding:18px;box-shadow:0 5px 20px rgba(15,23,42,.06);margin-bottom:18px}
.ft-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.ft-card h2{font-size:19px;margin:0}.ft-pill{background:#dcfce7;color:#166534;border-radius:99px;padding:6px 10px;font-size:12px;font-weight:700}
.ft-river{position:relative;height:330px;border-radius:16px;overflow:hidden;border:3px solid #64748b;background:linear-gradient(90deg,#9ccc65 0 30%,#43a5e5 30% 70%,#9ccc65 70%)}.ft-bank{position:absolute;top:12px;font-size:12px;font-weight:800;color:#214b27;z-index:7}.ft-left{left:12px}.ft-right{right:12px}.ft-water-label{position:absolute;left:44%;top:47%;color:#fff;font-weight:800;letter-spacing:2px;opacity:.55}
.ft-boat{position:absolute;left:calc(30% - 38px);top:55%;width:76px;height:30px;background:#8b5a2b;border-radius:8px 8px 25px 25px;color:#fff;text-align:center;font-size:10px;font-weight:700;padding-top:7px;z-index:3;transition:left 1s ease}
.ft-person{position:absolute;left:calc(30% - 13px);top:42%;font-size:28px;z-index:6;transition:left 1s ease}.ft-object{position:absolute;font-size:32px;z-index:5;transition:left 1s ease,top .5s ease}.ft-grass{left:8%;top:23%}.ft-goat{left:8%;top:68%}.ft-wolf{left:8%;top:45%}
.ft-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.ft-btn{border:0;border-radius:10px;padding:11px 15px;min-height:44px;font-weight:800;cursor:pointer;background:#334155;color:#fff}.ft-btn-green{background:var(--ft-green)}.ft-btn-light{background:#e2e8f0;color:#1e293b}.ft-full{width:100%;margin-top:12px}
.ft-help,.ft-muted{font-size:13px;color:var(--ft-muted);line-height:1.5}.ft-move-text{margin-top:10px}
.ft-score-box{display:flex;align-items:center;justify-content:space-between;gap:15px}.ft-score{font-size:42px;font-weight:900;color:var(--ft-green)}.ft-class{font-weight:800;padding:9px 12px;border-radius:10px;background:#f1f5f9}.ft-progress{height:16px;border-radius:99px;background:#e2e8f0;overflow:hidden;margin:8px 0 15px}.ft-progress div{height:100%;width:0;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e);transition:width .5s}#ft-chart{width:100%;height:250px;background:#fff;border:1px solid var(--ft-border);border-radius:12px}
.ft-form{display:grid;gap:10px}.ft-form label{display:grid;grid-template-columns:1fr 80px;align-items:center;gap:10px;font-size:14px;font-weight:650}.ft-form input{width:100%;min-height:44px;border:1px solid var(--ft-border);border-radius:9px;padding:7px 10px;font-size:16px}.ft-form input:focus{outline:3px solid #bbf7d0;border-color:var(--ft-green)}
.ft-guide{margin-top:14px;padding:12px;background:#f8fafc;border:1px solid var(--ft-border);border-radius:12px}.ft-scale{font-size:13px;margin-top:5px}.ft-scale b{display:inline-flex;width:23px;height:23px;align-items:center;justify-content:center;background:#dcfce7;color:#166534;border-radius:50%;margin-right:5px}.ft-info h3{font-size:14px;margin:13px 0 3px;color:var(--ft-green)}.ft-info p{margin:0;font-size:13px;color:var(--ft-muted);line-height:1.5}
.ft-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.ft-step{padding:12px 8px;border-radius:10px;background:#f1f5f9;font-size:12px;text-align:center;min-height:65px}.ft-step.active{background:#166534;color:#fff}.ft-step.done{background:#dcfce7;color:#14532d}.ft-admin-page{padding-right:20px}
@media(max-width:850px){.ft-grid{grid-template-columns:1fr}.ft-steps{grid-template-columns:repeat(7,95px);overflow-x:auto;padding-bottom:5px}.ft-hero h1{font-size:24px}.ft-river{height:290px}}

.ft-action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.ft-action-row .ft-btn{flex:1;min-width:190px}
@media(max-width:600px){.ft-action-row{flex-direction:column}.ft-action-row .ft-btn{width:100%;min-width:0}}

.ft-rule-analysis{margin-top:22px;border-top:1px solid #e5e7eb;padding-top:18px}
.ft-rule-table{overflow-x:auto;border:1px solid #e5e7eb;border-radius:10px}
.ft-rule-row{display:grid;grid-template-columns:minmax(280px,1fr) 60px 70px 80px;gap:8px;padding:9px 12px;border-bottom:1px solid #eef2f7;font-size:13px}
.ft-rule-head{font-weight:700;background:#f8fafc}
@media(max-width:700px){.ft-rule-row{grid-template-columns:minmax(210px,1fr) 55px 65px 70px;font-size:12px}}

/* Manual game dashboard */
.ft-game-card{position:relative;overflow:hidden}.ft-game-board{position:relative;height:360px;border:2px solid #94a3b8;border-radius:18px;overflow:hidden;background:linear-gradient(90deg,#a8d37d 0 29%,#48a9e8 29% 71%,#a8d37d 71%);user-select:none;touch-action:none}.ft-game-board:before{content:"";position:absolute;left:29%;right:29%;top:0;bottom:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.18) 0 18px,transparent 18px 38px);opacity:.45}.ft-game-bank{position:absolute;top:14px;z-index:2;display:flex;flex-direction:column;gap:3px;font-size:12px;color:#214b27}.ft-game-bank strong{font-size:14px}.ft-game-bank span{font-size:11px;opacity:.85}.ft-game-bank-left{left:14px}.ft-game-bank-right{right:14px;text-align:right}.ft-game-river-label{position:absolute;top:45%;left:43%;color:#fff;font-weight:900;letter-spacing:4px;opacity:.65;z-index:2}.ft-game-token,.ft-game-human{position:absolute;z-index:8;display:flex;align-items:center;justify-content:center;font-size:38px;width:52px;height:52px;transition:left .35s ease,top .25s ease;cursor:pointer;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}.ft-game-grass{left:12%;top:28%}.ft-game-goat{left:12%;top:58%}.ft-game-wolf{left:12%;top:43%}.ft-game-human{left:13.5%;top:60%;font-size:34px;pointer-events:auto;z-index:12;cursor:pointer}.ft-game-boat{position:absolute;left:10%;top:68%;z-index:10;width:105px;height:55px;background:#8b5a2b;border:3px solid #633d1c;border-radius:12px 12px 34px 34px;color:#fff;display:flex;align-items:center;justify-content:center;gap:2px;flex-direction:column;cursor:grab;touch-action:none;transition:left .45s ease,transform .12s ease;box-shadow:0 7px 12px rgba(0,0,0,.2)}.ft-game-boat.dragging{cursor:grabbing;transform:scale(1.05)}.ft-game-boat span{font-size:25px;line-height:20px}.ft-game-boat small{font-size:8px;font-weight:900}.ft-game-boat b{position:absolute;right:-8px;top:-10px;font-size:23px;display:none;cursor:pointer;z-index:15;padding:2px 4px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(0,0,0,.18)}.ft-game-boat-side{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.88);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;z-index:11}.ft-game-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.ft-game-counter{margin-left:auto;font-size:13px;color:var(--ft-muted)}.ft-game-status{display:inline-block;max-width:360px;padding:7px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:12px;font-weight:800}.ft-game-status.ok,.ft-game-status.win{background:#dcfce7;color:#166534}.ft-game-status.warn{background:#fef3c7;color:#92400e}.ft-game-status.lose{background:#fee2e2;color:#991b1b}.ft-game-rules{margin-top:12px;padding:12px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#475569;font-size:13px;line-height:1.55}.ft-game-modal{display:none;position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.72);align-items:center;justify-content:center;padding:20px}.ft-game-modal.show{display:flex}.ft-game-modal-box{width:min(480px,100%);background:#fff;border-radius:22px;padding:28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:ftBoom .24s ease-out}.ft-game-boom{font-size:68px;line-height:1}.ft-game-modal-box h2{margin:10px 0 8px;font-size:30px}.ft-game-modal-box p{margin:0 auto 18px;color:#475569;line-height:1.6}.ft-game-modal-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}@keyframes ftBoom{0%{transform:scale(.65) rotate(-3deg);opacity:0}70%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}@media(max-width:650px){.ft-game-board{height:330px}.ft-game-token{font-size:32px}.ft-game-human{font-size:30px}.ft-game-boat{width:88px}.ft-game-status{max-width:100%}.ft-game-counter{margin-left:0;width:100%}.ft-game-bank span{display:none}.ft-game-river-label{left:40%;font-size:12px}}

/* v1.3.8 — responsive scene, headings, labels */
.ft-hero h1{
  color:#fff!important;
  font-size:clamp(24px,3.2vw,34px);
  line-height:1.12;
  margin:8px 0 5px;
  font-weight:800;
}
.ft-hero h2{
  color:#fff!important;
  font-size:clamp(16px,2.15vw,22px);
  line-height:1.2;
  margin:0 0 10px;
  font-weight:750;
}
.ft-problem{
  color:#fff!important;
  font-size:clamp(12px,1.45vw,15px);
  line-height:1.55;
  max-width:850px;
  margin:0 0 10px!important;
  opacity:.96!important;
}
.ft-rules-summary{
  display:grid;
  gap:6px;
  max-width:900px;
  font-size:clamp(11px,1.25vw,13px);
  line-height:1.45;
}
.ft-rules-summary div{
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  border-radius:8px;
  color:#fff;
}
.ft-rules-summary b{color:#fff}

/* Scene objects: compact, proportional, with readable labels */
.ft-river .ft-object,
.ft-river .ft-person{
  width:auto!important;
  min-width:70px;
  height:auto!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  text-align:center;
}
.ft-river .ft-object .ft-emoji,
.ft-river .ft-person .ft-emoji{
  font-size:clamp(25px,3.2vw,34px);
  line-height:1;
}
.ft-river .ft-object-label{
  display:block;
  white-space:nowrap;
  font-size:clamp(8px,1vw,10px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:.35px;
  color:#173b20;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(23,59,32,.16);
  border-radius:999px;
  padding:2px 5px;
  box-shadow:0 1px 3px rgba(0,0,0,.10);
}
.ft-river .ft-grass{left:7%;top:19%}
.ft-river .ft-wolf{left:7%;top:39%}
.ft-river .ft-goat{left:7%;top:59%}
.ft-river .ft-person{left:calc(30% - 35px);top:42%;z-index:6}
.ft-river .ft-person .ft-object-label{color:#173b20}

/* Game objects */
.ft-game-token,
.ft-game-human{
  width:70px!important;
  height:auto!important;
  min-height:54px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  text-align:center;
}
.ft-game-token .ft-emoji,
.ft-game-human .ft-emoji{
  font-size:clamp(25px,3vw,34px);
  line-height:1;
}
.ft-game-token .ft-object-label,
.ft-game-human .ft-object-label{
  display:block;
  white-space:nowrap;
  font-size:clamp(8px,1vw,10px);
  line-height:1;
  font-weight:800;
  letter-spacing:.3px;
  color:#17202a;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.12);
  border-radius:999px;
  padding:2px 5px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.ft-game-grass{left:8%;top:19%}
.ft-game-wolf{left:8%;top:38%}
.ft-game-goat{left:8%;top:57%}
.ft-game-human{left:calc(10% + 18px);top:55%;z-index:12}
.ft-game-boat{z-index:10}

@media(max-width:700px){
  .ft-hero{padding:20px 16px}
  .ft-hero-icon{font-size:40px}
  .ft-river{height:300px}
  .ft-river .ft-object-label,
  .ft-game-token .ft-object-label,
  .ft-game-human .ft-object-label{font-size:8px;padding:2px 4px}
  .ft-river .ft-object .ft-emoji,
  .ft-river .ft-person .ft-emoji,
  .ft-game-token .ft-emoji,
  .ft-game-human .ft-emoji{font-size:27px}
  .ft-river .ft-grass{top:16%}
  .ft-river .ft-wolf{top:37%}
  .ft-river .ft-goat{top:58%}
  .ft-river .ft-person{top:43%;left:calc(30% - 30px)}
  .ft-game-board{height:330px}
  .ft-game-grass{top:16%}
  .ft-game-wolf{top:35%}
  .ft-game-goat{top:54%}
  .ft-game-human{top:55%;left:calc(10% + 8px)}
}
@media(max-width:400px){
  .ft-hero{padding:18px 12px}
  .ft-hero h1{font-size:23px}
  .ft-hero h2{font-size:15px}
  .ft-problem{font-size:11px}
  .ft-rules-summary{font-size:10px}
  .ft-river{height:285px}
  .ft-river .ft-object-label,
  .ft-game-token .ft-object-label,
  .ft-game-human .ft-object-label{font-size:7px;letter-spacing:0}
  .ft-river .ft-object .ft-emoji,
  .ft-river .ft-person .ft-emoji,
  .ft-game-token .ft-emoji,
  .ft-game-human .ft-emoji{font-size:24px}
  .ft-game-board{height:310px}
  .ft-game-boat{width:82px!important;height:48px}
}

/* Fuzzy result is intentionally minimal before calculation */
#ft-score,#ft-progress,#ft-chart{display:none}
.ft-score-box{min-height:58px;align-items:center}
#ft-class{margin-left:auto;margin-right:auto}
.ft-steps-placeholder{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:#64748b;padding:18px}
.ft-steps-placeholder strong{font-size:18px;color:#475569}
.ft-steps-placeholder small{font-size:12px;line-height:1.5}
.ft-steps-placeholder-icon{font-size:25px}

/* v1.3.9 — final compact object typography */
.ft-river .ft-object .ft-object-label,
.ft-river .ft-person .ft-object-label,
.ft-game-token .ft-object-label,
.ft-game-human .ft-object-label{
  font-size:9px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.2px!important;
  padding:2px 5px!important;
  white-space:nowrap!important;
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}
.ft-river .ft-object .ft-emoji,
.ft-river .ft-person .ft-emoji,
.ft-game-token .ft-emoji,
.ft-game-human .ft-emoji{
  font-size:27px!important;
  line-height:1!important;
  width:auto!important;
  height:auto!important;
}
.ft-river .ft-object,
.ft-river .ft-person,
.ft-game-token,
.ft-game-human{
  font-size:9px!important;
}
@media(max-width:700px){
  .ft-river .ft-object .ft-object-label,
  .ft-river .ft-person .ft-object-label,
  .ft-game-token .ft-object-label,
  .ft-game-human .ft-object-label{font-size:8px!important;padding:2px 4px!important}
  .ft-river .ft-object .ft-emoji,
  .ft-river .ft-person .ft-emoji,
  .ft-game-token .ft-emoji,
  .ft-game-human .ft-emoji{font-size:25px!important}
}
@media(max-width:400px){
  .ft-river .ft-object .ft-object-label,
  .ft-river .ft-person .ft-object-label,
  .ft-game-token .ft-object-label,
  .ft-game-human .ft-object-label{font-size:7px!important;padding:2px 4px!important}
  .ft-river .ft-object .ft-emoji,
  .ft-river .ft-person .ft-emoji,
  .ft-game-token .ft-emoji,
  .ft-game-human .ft-emoji{font-size:23px!important}
}


/* v1.4.0 — force compact labels; prevents WordPress/theme typography from enlarging object names */
.ft-river .ft-object,
.ft-river .ft-person,
.ft-game-token,
.ft-game-human{
  font-size:24px !important;
  width:82px !important;
  min-width:82px !important;
  max-width:82px !important;
  height:auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  line-height:1 !important;
  text-align:center !important;
}
.ft-river .ft-object .ft-emoji,
.ft-river .ft-person .ft-emoji,
.ft-game-token .ft-emoji,
.ft-game-human .ft-emoji{
  font-size:24px !important;
  line-height:24px !important;
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
}
.ft-river .ft-object .ft-object-label,
.ft-river .ft-person .ft-object-label,
.ft-game-token .ft-object-label,
.ft-game-human .ft-object-label{
  all:unset !important;
  display:block !important;
  box-sizing:border-box !important;
  width:auto !important;
  max-width:82px !important;
  margin:0 !important;
  padding:1px 3px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  font-family:Arial,sans-serif !important;
  font-size:11px !important;
  line-height:12px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  color:#173b20 !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(23,59,32,.15) !important;
  border-radius:5px !important;
  box-shadow:none !important;
}
.ft-game-token .ft-object-label,
.ft-game-human .ft-object-label{color:#17202a !important}
@media(max-width:700px){
  .ft-river .ft-object,
  .ft-river .ft-person,
  .ft-game-token,
  .ft-game-human{width:72px !important;min-width:72px !important;max-width:72px !important;font-size:22px !important}
  .ft-river .ft-object .ft-emoji,
  .ft-river .ft-person .ft-emoji,
  .ft-game-token .ft-emoji,
  .ft-game-human .ft-emoji{font-size:22px !important;line-height:22px !important;width:22px !important;height:22px !important;flex-basis:22px !important}
  .ft-river .ft-object .ft-object-label,
  .ft-river .ft-person .ft-object-label,
  .ft-game-token .ft-object-label,
  .ft-game-human .ft-object-label{font-size:9px !important;line-height:10px !important;max-width:72px !important;padding:1px 2px !important}
}
@media(max-width:400px){
  .ft-river .ft-object,
  .ft-river .ft-person,
  .ft-game-token,
  .ft-game-human{width:64px !important;min-width:64px !important;max-width:64px !important}
  .ft-river .ft-object .ft-object-label,
  .ft-river .ft-person .ft-object-label,
  .ft-game-token .ft-object-label,
  .ft-game-human .ft-object-label{font-size:8px !important;line-height:9px !important;max-width:64px !important}
}
