
:root{--ink:#404356;--soft:#777987;--paper:#fffaf2;--white:#fff;--peach:#fff1dc;--yellow:#ffe2a0;--coral:#ff8292;--coralstrong:#f56e82;--mint:#80d9c0;--blue:#8bc7f3;--lilac:#c7b0ee;--stroke:#eee8e4;--shadow:0 15px 45px rgba(154,126,104,.10);--radius:25px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-rounded,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;line-height:1.6;-webkit-text-size-adjust:100%}button,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.47}a{color:inherit}button:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #589ed2;outline-offset:3px}[hidden]{display:none!important}
.page{max-width:1100px;margin:0 auto;padding:0 24px 54px}.sitehead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 0 16px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:22px;font-weight:900;letter-spacing:-.5px}.brandlogo{height:42px;width:42px;display:inline-grid;place-items:center;background:var(--coral);border:3px solid #fff;border-radius:15px;box-shadow:0 5px 12px #ff829245;font-size:25px;transform:rotate(-8deg)}.headright{display:flex;align-items:center;gap:12px}.phase{font-size:11px;font-weight:900;letter-spacing:.08em;color:#885461;background:#ffe5e9;border-radius:50px;padding:6px 12px}.home{font-size:12px;font-weight:800;text-decoration:none;border:1px solid var(--stroke);background:#fff;border-radius:50px;padding:9px 12px}.home:hover{text-decoration:underline}
.hero{text-align:center;padding:23px 0 28px;position:relative}.mini-label{display:inline-block;background:#e4f7ef;color:#3b806b;padding:6px 14px;border-radius:50px;font-size:12px;font-weight:900;letter-spacing:.04em}.hero h1{margin:15px 0 8px;font-size:clamp(29px,4.3vw,48px);letter-spacing:-.05em;line-height:1.32;font-weight:900}.hero h1 span{background:linear-gradient(transparent 66%,#ffda83 66%);white-space:nowrap}.hero p{margin:0;color:var(--soft);font-weight:650;font-size:14px}.hero .spark{position:absolute;pointer-events:none;font-size:25px;opacity:.8}.spark.one{left:7%;top:33%}.spark.two{right:9%;top:23%}.spark.three{right:5%;bottom:19%;font-size:17px}
.steps{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:1px 0 21px}.stepguide{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900;color:#707583}.stepnum{width:24px;height:24px;display:grid;place-items:center;background:white;border:1px solid #ece6df;border-radius:50%;font-size:11px}.steps .arr{color:#bcb5b2;font-size:17px}
.setupgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);gap:18px;align-items:stretch}.panel{background:var(--white);border:1px solid #f0ebe7;border-radius:var(--radius);padding:24px 24px 21px;box-shadow:var(--shadow);position:relative;overflow:hidden}.panel:before{position:absolute;content:"";inset:0 0 auto;height:6px;background:var(--coral)}.panel.second:before{background:var(--mint)}.panelheading{display:flex;align-items:flex-start;gap:13px;margin:4px 0 18px}.iconwrap{flex-shrink:0;height:47px;width:47px;display:grid;place-items:center;border-radius:16px;background:#ffe5e9;font-size:23px}.second .iconwrap{background:#def7ee}.paneltitle{font-size:19px;font-weight:900;line-height:1.3;margin:2px 0}.panelsub{font-size:12px;color:var(--soft);font-weight:600;margin:3px 0 0}.labelrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.fieldlabel{font-size:13px;font-weight:900}.countchip{font-size:12px;color:#7d5b2f;background:#fff2d5;padding:3px 11px;border-radius:50px;font-weight:900}.nameinput{display:block;width:100%;min-height:225px;max-height:360px;padding:15px 16px;border:2px solid #eee8e5;background:#fffdf9;border-radius:17px;color:var(--ink);font-size:15px;line-height:1.55;resize:vertical;transition:border-color .15s}.nameinput:focus{outline:none;border-color:var(--coralstrong);box-shadow:0 0 0 4px #ff829220}.nameinput::placeholder{color:#a4a3a9}.inputtools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}.help{font-size:12px;color:var(--soft);font-weight:600}.softbutton{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 13px;background:#fff;border:1px solid #ece7e3;color:#555b69;border-radius:12px;font-size:12px;font-weight:900}.softbutton:hover{background:#fff7ec}.softbutton:active{transform:translateY(1px)}.errorline{font-size:12px;color:#b54852;font-weight:750;margin:12px 0 0;min-height:18px}.errorline:empty{display:none}
.controlbig{display:flex;align-items:center;justify-content:center;gap:18px;background:#f9fcf9;border:1px solid #e6f0ea;border-radius:22px;padding:21px 10px 20px;margin:22px 0 16px}.countbtn{height:56px;width:56px;display:grid;place-items:center;border-radius:17px;background:#fff;color:var(--ink);font-size:30px;font-weight:700;line-height:1;border:2px solid #e2eae6;box-shadow:0 4px 0 #e2eae6}.countbtn:hover:not(:disabled){border-color:var(--mint);background:#f4fff9}.countbtn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #e2eae6}.countdisplay{text-align:center;min-width:99px}.countdisplay strong{display:block;font-size:47px;line-height:1.05;font-weight:900;font-variant-numeric:tabular-nums}.countdisplay small{display:block;font-size:12px;font-weight:900;color:var(--soft);margin-top:4px}.balanced{text-align:center;background:#e3f7ee;color:#3d795f;font-weight:900;border-radius:13px;padding:10px 6px;font-size:12px;min-height:39px}.balanced:empty{display:none}.tippanel{background:#fffbef;border-radius:15px;padding:14px;display:flex;gap:9px;align-items:flex-start;margin-top:14px;color:#8b6d46;font-size:12px;font-weight:700}.tippanel b{white-space:nowrap}.goarea{text-align:center;padding:23px 0 4px}.startbutton{width:min(440px,100%);min-height:65px;border:0;border-radius:20px;background:var(--coral);color:#fff;font-weight:900;font-size:20px;letter-spacing:.03em;box-shadow:0 7px 0 #e96e80,0 18px 32px #ff82923d;transition:transform .15s,box-shadow .15s}.startbutton:not(:disabled):hover{background:var(--coralstrong);transform:translateY(-2px)}.startbutton:not(:disabled):active{transform:translateY(5px);box-shadow:0 2px 0 #e96e80}.startbutton:disabled{box-shadow:none}.micro{font-size:12px;color:#84838a;margin:16px 0 0;font-weight:650}.bottomrow{display:flex;justify-content:center;gap:8px;margin:16px 0 0}
.resultbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.backbutton{border:1px solid #e8dfd8;border-radius:15px;padding:10px 15px;background:#fff;font-size:13px;font-weight:900;color:var(--ink)}.backbutton:hover{background:#fff7ef}.result-actions{display:flex;gap:8px;flex-wrap:wrap}.result-action{background:#fff;border:1px solid #e8dfd8;border-radius:14px;padding:10px 14px;font-size:12px;font-weight:900;color:var(--ink)}.result-action:hover{background:#fff7eb}.result-action.highlight{background:#ff8292;color:#fff;border-color:#ff8292}.result-action.highlight:hover{background:#f56e82}
.stage{background:#fff;border-radius:26px;border:1px solid #f0ebe7;padding:23px;box-shadow:var(--shadow);min-height:300px}.stagelabel{text-align:center;color:#6c987c;background:#e5f8ed;font-size:12px;font-weight:900;width:fit-content;margin:3px auto 6px;border-radius:50px;padding:5px 15px}.stage h2{text-align:center;font-size:clamp(25px,3.8vw,41px);font-weight:900;line-height:1.35;letter-spacing:-.05em;margin:7px 0}.stage .stagehint{text-align:center;font-size:13px;color:var(--soft);font-weight:700;margin:0 0 21px}.teamgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:15px}.teamcard{background:#fff;min-width:0;border:2px solid #f0eae6;border-radius:20px;overflow:hidden;animation:pop .48s backwards;box-shadow:0 5px 18px #5a4a4610}.teamcardhead{padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#404356}.teamcardhead strong{font-size:18px;font-weight:900}.teammembers{list-style:none;padding:10px 13px 15px;margin:0;display:grid;gap:8px}.teammembers li{padding:9px 12px;background:#faf9f7;border-radius:10px;word-wrap:break-word;overflow-wrap:anywhere;font-size:14px;font-weight:850}.membernum{font-size:11px;opacity:.8;font-weight:900}.teamcard:nth-child(5n + 1) .teamcardhead{background:#ffccd2}.teamcard:nth-child(5n + 2) .teamcardhead{background:#bcebdd}.teamcard:nth-child(5n + 3) .teamcardhead{background:#ffe3a3}.teamcard:nth-child(5n + 4) .teamcardhead{background:#bee0fa}.teamcard:nth-child(5n) .teamcardhead{background:#dfd0f8}.teamcard:nth-child(5n + 1){border-color:#ffe0e4}.teamcard:nth-child(5n + 2){border-color:#d9f5e9}.teamcard:nth-child(5n + 3){border-color:#fff0cb}.teamcard:nth-child(5n + 4){border-color:#dbeefe}.teamcard:nth-child(5n){border-color:#eee4fc}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.result-foot{text-align:center;font-size:12px;font-weight:650;color:var(--soft);margin:15px 0}.footnote{border-top:1px solid #eee9e2;display:flex;justify-content:center;gap:15px;flex-wrap:wrap;text-align:center;padding:23px 0 4px;font-size:11px;color:#94929a;font-weight:650}.screen{min-height:0}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,15px);z-index:20;opacity:0;pointer-events:none;border-radius:13px;padding:11px 17px;background:#404356;color:#fff;max-width:calc(100vw - 24px);font-size:13px;font-weight:850;text-align:center;transition:opacity .2s,transform .2s}.toast.on{opacity:1;transform:translate(-50%,0)}.warning{padding:10px 14px;border-radius:13px;background:#fff1dc;color:#8f4e34;border:1px solid #f7dcbe;font-size:12px;font-weight:800;margin:11px auto;max-width:800px;text-align:center}
.stage:fullscreen{border-radius:0;border:0;overflow:auto;background:var(--paper);padding:25px max(22px,4vw) 60px;width:100vw;height:100vh}.stage:fullscreen .teamgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));max-width:1500px;margin:auto}.stage:fullscreen .teammembers li{font-size:clamp(14px,1.8vw,24px);padding:12px 16px}.stage:fullscreen .teamcardhead strong{font-size:clamp(18px,2vw,28px)}.stage:fullscreen .stagehint{font-size:16px}.stage:fullscreen h2{font-size:clamp(30px,4vw,56px)}.stage:fullscreen .fs-exit{display:block}.fs-exit{display:none;position:sticky;top:0;margin:0 0 -35px auto;z-index:4;background:#fff;border:1px solid #eadfd8;border-radius:11px;padding:9px 13px;color:var(--ink);font-size:12px;font-weight:900}
@media(max-width:760px){.page{padding:0 15px 34px}.hero{padding:14px 0 20px}.hero h1{font-size:30px;margin-top:11px}.hero .spark{display:none}.hero p{font-size:12px}.setupgrid{grid-template-columns:1fr;gap:14px}.panel{padding:20px 17px 18px;border-radius:20px}.nameinput{min-height:177px}.steps{gap:7px;margin-bottom:16px}.stepguide{font-size:10px;gap:4px}.steps .arr{font-size:12px}.stepnum{height:21px;width:21px}.goarea{padding-top:23px}.stage{padding:18px 13px;border-radius:20px}.teamgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.teamcard{border-radius:14px}.teamcardhead{padding:9px 10px;gap:5px}.teamcardhead strong{font-size:14px}.teammembers{padding:8px;gap:6px}.teammembers li{font-size:12px;padding:8px;line-height:1.4}.resultbar{flex-direction:column;align-items:stretch}.backbutton{align-self:flex-start}.result-actions{display:grid;grid-template-columns:1fr 1fr}.result-action{padding:11px 5px;font-size:12px}.stage:fullscreen{padding:12px 10px 40px}.stage:fullscreen .teamgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stage:fullscreen .teamcardhead strong{font-size:14px}.stage:fullscreen .teammembers li{font-size:12px;padding:8px}.stage:fullscreen .fs-exit{margin-bottom:0;position:sticky}.sitehead{padding-top:15px}.brand{font-size:19px}.brandlogo{width:36px;height:36px;font-size:22px}.home{font-size:11px;padding:7px 10px}}
@media(max-width:360px){.page{padding-inline:11px}.phase{display:none}.steps{gap:4px}.panelheading{gap:9px}.paneltitle{font-size:17px}.brand{font-size:17px}.controlbig{gap:12px}.countbtn{width:53px;height:53px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.sitehead,.hero,.steps,.resultbar,.result-foot,.footnote,.bottomrow,.goarea,.fs-exit,.toast{display:none!important}.page{max-width:none;margin:0;padding:0}.stage{border:0;box-shadow:none;padding:0}.teamcard{break-inside:avoid;animation:none}.teamgrid{grid-template-columns:repeat(3,1fr)}}

/* Phase 2: advanced setting and results tools */
button,select,input{font:inherit}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #589ed2;outline-offset:3px}
.optional-settings{margin-top:16px;border:1px solid #e7eee8;background:#fafffc;border-radius:16px;overflow:hidden}
.optional-settings summary{padding:13px 15px;cursor:pointer;font-size:13px;font-weight:900;color:#4a7562;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.optional-settings summary::-webkit-details-marker{display:none}
.optional-settings summary::after{content:'＋';font-size:21px;line-height:1}
.optional-settings[open] summary::after{content:'－'}
.optional-body{padding:0 14px 15px}
.optional-body p{font-size:12px;font-weight:700;color:var(--soft);margin:1px 0 12px}
.separate-selects{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}
.select-field{min-width:0;display:flex;flex-direction:column;gap:5px;font-weight:800;font-size:12px}
.separate-selects select{background:#fff;color:var(--ink);border:1px solid #dce9e2;padding:10px 7px;width:100%;min-width:0;border-radius:10px;font-size:13px}
.between{font-weight:900;font-size:11px;color:#789586;align-self:end;padding-bottom:13px}
.condition-badge{margin-left:auto;font-size:10px;background:#d8f1e1;color:#387556;border-radius:50px;padding:3px 7px}
.optionerror{color:#a83f4b;font-size:12px;font-weight:800;margin:8px 0 0;min-height:0}
.result-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px}
.result-tools .result-action{padding:10px 14px}
.swaphint{font-size:12px;font-weight:800;color:#667276;background:#f2faf6;border-radius:12px;padding:9px 12px;margin-bottom:14px;text-align:center}
.teamcardhead{align-items:center}
.teamheadleft{display:flex;align-items:center;gap:5px;min-width:0;flex:1}
.teamcardhead strong{overflow-wrap:anywhere}
.rename-icon{border:1px solid #40435628;background:#ffffffa6;border-radius:8px;min-width:31px;min-height:31px;font-size:13px;flex-shrink:0}
.rename-editor{width:100%;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.rename-editor input{border:1px solid #a7aaae;border-radius:8px;background:#fff;padding:7px;max-width:100%;min-width:85px;flex:1;color:#404356;font-size:13px}
.rename-editor button{border:0;border-radius:8px;min-width:31px;min-height:31px;color:var(--ink);background:#fff;font-size:14px;font-weight:900}
.teammembers li{padding:0;min-width:0}
.memberpick{display:block;width:100%;border:2px solid transparent;padding:8px 10px;border-radius:10px;color:var(--ink);text-align:left;background:#faf9f7;font-weight:850;line-height:1.4;font-size:14px;word-break:break-word;cursor:pointer}
.memberpick:hover{border-color:#d8e6df;background:#fffefb}
.memberpick.selected{border-color:#ea7e90;background:#fff1f3;box-shadow:0 0 0 2px #fff4f5 inset}
.print-only{display:none}
@page{size:A4 landscape;margin:12mm}
@media(max-width:760px){.result-tools{display:grid;grid-template-columns:1fr 1fr}.result-tools .result-action{padding:11px 5px}.memberpick{font-size:12px;padding:7px}.swaphint{margin-bottom:10px}.separate-selects{gap:5px}.optional-body{padding-inline:10px}.optional-settings summary{font-size:12px}}
@media(max-width:350px){.result-tools{gap:6px}.result-tools .result-action{font-size:11px}.select-field{font-size:11px}.separate-selects select{font-size:11px}}
/* In projector mode, hide editor-only controls but keep team names readable. */
.stage:fullscreen .rename-icon,.stage:fullscreen .rename-editor{display:none}
.stage:fullscreen .memberpick{font-size:clamp(14px,1.8vw,24px);padding:12px 16px;cursor:default;background:#faf9f7;border:0}
.stage:fullscreen .swaphint{display:none}
@media(max-width:760px){.stage:fullscreen .memberpick{font-size:12px;padding:8px}}
@media print{
  body,html{background:#fff!important;color:#222;overflow:visible!important;height:auto!important}
  .sitehead,.hero,.steps,.setupgrid,.resultbar,.result-tools,.result-foot,.footnote,.bottomrow,.goarea,.fs-exit,.toast,.warning,.swaphint{display:none!important}
  .print-only{display:block!important;text-align:center;font-size:11pt;margin:0 0 8mm;font-weight:700}
  .screen[hidden]{display:none!important}
  .page{max-width:none;margin:0;padding:0}.stage{border:0;box-shadow:none;padding:0;min-height:0}
  .stage h2{font-size:20pt}.stagehint{font-size:10pt!important;margin-bottom:4mm!important}
  .teamgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4mm}
  .teamcard{break-inside:avoid;page-break-inside:avoid;animation:none!important;border:1px solid #bbb;box-shadow:none}
  .teamcardhead{padding:3mm}.teamcardhead strong{font-size:12pt}
  .rename-icon,.rename-editor{display:none!important}.teammembers{padding:2mm;gap:1mm}
  .teammembers li{break-inside:avoid}.memberpick{border:0!important;background:#fff!important;color:#111!important;padding:2mm;font-size:10pt}
  .stage:fullscreen{height:auto;overflow:visible}
}

/* Phase 2.1 - multiple no-same-team rules */
.apart-list{display:grid;gap:10px}
.apart-row{border:1px solid #e2ebe5;border-radius:13px;padding:11px;background:#fff;min-width:0}
.apart-rowhead{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:7px;color:#4a7562;font-weight:900;font-size:12px}
.apart-pair-inputs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:7px}
.apart-pair-inputs .select-field select{background:#fffdf8;border:1px solid #dce9e2;border-radius:10px;padding:10px 6px;min-width:0;width:100%;font-size:13px;color:var(--ink)}
.apart-remove{border:1px solid #f4d6d6;background:#fff8f8;color:#a0434d;font-size:11px;font-weight:900;padding:5px 10px;border-radius:8px}
.apart-add{margin-top:12px;width:100%;background:#f3fff9;border:1px dashed #70c7a9;color:#34745b;font-size:13px;font-weight:900;padding:11px 8px;border-radius:12px}
.apart-add:hover:not(:disabled){background:#dcfaed}
.apart-empty{padding:14px;text-align:center;background:#fff;border:1px dashed #d5e8dc;border-radius:12px;color:#697c70;font-size:12px;font-weight:750}
.apart-counter{font-size:11px;color:#708576;display:block;margin-top:8px}
@media(max-width:420px){.apart-row{padding:9px}.apart-pair-inputs{gap:4px}.apart-pair-inputs .select-field select{font-size:11px;padding:9px 3px}.apart-pair-inputs .between{font-size:10px}.apart-remove{font-size:11px}}

.setupgrid{align-items:start}

/* Phase 3 additions: discreet language and sharing controls */
.langswitch{display:inline-flex;align-items:center;justify-content:center;min-width:47px;min-height:38px;border-radius:22px;background:#e7f7ee;color:#39745a;border:1px solid #cbeadd;text-decoration:none;font-size:12px;font-weight:900;padding:5px 10px}
.langswitch:hover{background:#d8f5e7}.headright{flex-wrap:wrap;justify-content:flex-end;gap:7px}.phase{white-space:nowrap}
.share-section{border:1px solid #efebe7;border-radius:19px;background:#fff;margin:25px auto 4px;max-width:1100px;padding:18px 22px;box-shadow:0 10px 25px rgba(154,126,104,.07)}
.share-contents{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.share-heading{font-size:15px;font-weight:900;margin:0 0 4px}.share-explain{font-size:12px;color:var(--soft);margin:0;font-weight:650;line-height:1.65}
.share-buttons{display:flex;gap:7px;flex-wrap:wrap}.share-btn{display:inline-flex;align-items:center;justify-content:center;min-height:39px;border:1px solid #eae2e3;background:#fffaf7;color:#49515f;border-radius:11px;padding:8px 12px;text-decoration:none;font-size:12px;font-weight:900;cursor:pointer}.share-btn:hover{background:#fff1e9}.share-btn:focus-visible,.langswitch:focus-visible{outline:3px solid #589ed2;outline-offset:3px}
@media(max-width:620px){.share-contents{display:block}.share-buttons{margin-top:12px}.share-btn{flex:1;min-width:0}.sitehead{gap:7px}.headright{gap:5px}.brand{font-size:18px}.brandlogo{height:36px;width:36px;font-size:21px}.home{font-size:11px;padding:9px}.phase{font-size:9px;padding:5px 7px}}
@media(max-width:370px){.share-btn{flex:1 1 46%}.page{padding-inline:13px}}
@media print{.share-section{display:none!important}}
