:root{
  --ink:#182320;--paper:#f4ead4;--paper-light:#fffaf0;--petrol:#174f50;--petrol-dark:#103c3d;
  --coral:#e56247;--yellow:#efc849;--violet:#6d547c;--line:rgba(24,35,32,.17);
  --shadow:0 14px 36px rgba(24,35,32,.12);--radius:22px;--safe-bottom:max(10px,env(safe-area-inset-bottom));
  --constraint: #39745a;

  --constraint-deep: #214b3a;
  --joker: #c6563d;
  --joker-deep: #843224;
}

*{box-sizing:border-box}html,body{height:100%;overscroll-behavior:none}html{scroll-behavior:smooth}body{margin:0;height:100dvh;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
button,input{font:inherit}button{color:inherit}.hidden{display:none!important}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:100;background:#fff;padding:12px}
.ambient{position:fixed;border-radius:999px;opacity:.2;pointer-events:none;z-index:-1}.ambient-a{width:330px;height:330px;right:-190px;top:130px;background:var(--joker)}.ambient-b{width:260px;height:260px;left:-170px;bottom:5%;background:var(--constraint)}
.topbar{position:relative;z-index:30;flex:0 0 auto;padding:max(7px,env(safe-area-inset-top)) 12px 7px;background:linear-gradient(to bottom,rgba(244,234,212,.99),rgba(244,234,212,.94));backdrop-filter:blur(16px);border-bottom:1px solid rgba(24,35,32,.08)}
.app-logo{max-width:760px;margin:0 auto 6px;text-align:center;line-height:1}.app-logo span{position:relative;display:inline-block;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:1.42rem;letter-spacing:-.055em;padding:0 12px 2px}.app-logo span::before,.app-logo span::after{content:"✦";position:absolute;top:50%;font-family:system-ui,sans-serif;font-size:.48rem;font-style:normal;transform:translateY(-42%);opacity:.75}.app-logo span::before{left:0}.app-logo span::after{right:0}
.mode-tabs{max-width:760px;margin:auto;display:grid;grid-template-columns:1.18fr 1fr 46px;padding:4px;border:1px solid rgba(24,35,32,.13);background:rgba(255,250,240,.9);border-radius:16px;box-shadow:0 5px 18px rgba(24,35,32,.07)}
.mode-tab{border:0;background:transparent;padding:9px 6px;border-radius:11px;font-weight:760;font-size:.76rem;cursor:pointer;white-space:nowrap}.mode-tab.active{background:var(--ink);color:var(--paper-light)}
.memory-tab{position:relative;display:grid;place-items:center;padding:0}.memory-icon{font-size:1.16rem;line-height:1}.memory-count{position:absolute;right:2px;top:1px;background:var(--coral);color:white;min-width:17px;height:17px;padding:0 4px;border-radius:99px;font-size:.57rem;display:grid;place-items:center;font-weight:850;border:2px solid var(--paper-light)}
main{width:100%;max-width:760px;margin:auto;min-height:0;flex:1 1 auto;padding:10px 12px calc(8px + var(--safe-bottom));overflow:hidden}body{display:flex;flex-direction:column}.view{display:none;height:100%;min-height:0;animation:rise .25s ease}.view.active{display:flex;flex-direction:column}@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.intro-block{flex:0 0 auto;padding:0 2px 10px}

.compact-intro h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.08rem,4.35vw,1.6rem);
  line-height:1.04;
  text-align: center;
  letter-spacing:-.035em;
  margin:0;max-width:100%;
  text-wrap:balance
}
  
.compact-intro>p{line-height:1.4;margin:7px 0 0;color:rgba(24,35,32,.72);font-size:.84rem}
.section-kicker,.card-label{margin:0 0 5px;text-transform:uppercase;letter-spacing:.15em;font-size:.61rem;font-weight:850}.draw-panel{background:rgba(255,250,240,.74);border:1px solid var(--line);border-radius:var(--radius);padding:13px;box-shadow:var(--shadow)}fieldset{border:0;padding:0;margin:0 0 11px}legend{font-size:.64rem;font-weight:850;margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em}.segmented,.number-choice{display:grid;gap:7px}.segmented{grid-template-columns:1fr 1fr}.number-choice{grid-template-columns:repeat(3,1fr)}.segmented input,.number-choice input{position:absolute;opacity:0}.segmented span,.number-choice span{display:grid;place-items:center;min-height:38px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.46);font-weight:760;cursor:pointer;font-size:.83rem}.segmented input:checked+span,.number-choice input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.primary-button,.secondary-button,.done-button,.danger-button{border:0;border-radius:13px;min-height:43px;padding:0 13px;font-weight:820;cursor:pointer}.primary-button{background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;width:100%}.secondary-button{background:rgba(255,250,240,.9);border:1px solid var(--line)}.done-button{background:var(--yellow)}.danger-button{background:var(--coral);color:white}.primary-button:disabled,.secondary-button:disabled{opacity:.38;cursor:not-allowed}
#view-cards.has-cards .intro-block,#view-cards.has-cards .draw-panel,#view-cards.has-cards .saved-combos-link{display:none}.workspace{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0}.card-stack{flex:1 1 auto;min-height:0;display:grid;gap:8px}.card-stack:has(.inspiration-card:only-child){grid-template-rows:1fr}.card-stack:has(.inspiration-card:nth-child(2):last-child){grid-template-rows:repeat(2,1fr)}.card-stack.three{grid-template-rows:repeat(3,1fr)}

.inspiration-card{position:relative;min-height:0;border-radius:19px;padding:14px 39px 12px 15px;overflow:hidden;box-shadow:0 8px 20px rgba(24,35,32,.11);transform-origin:center;display:flex;flex-direction:column;justify-content:flex-start}

.inspiration-card.rajoite {
  background: linear-gradient(145deg, var(--constraint), var(--constraint-deep));
  color: #f5fff7;
}

.inspiration-card.jokeri {
  background: linear-gradient(145deg, var(--joker), var(--joker-deep));
  color: #f8fff9;
}

.inspiration-card blockquote{
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.18rem,4.9vw,1.52rem);
  line-height:1.18;
  text-align: center;
  letter-spacing:-.018em;
  margin:auto 0;
  position:relative;
  z-index:2}

.inspiration-card .card-label{opacity:.72}
.card-number{position:absolute;right:10px;bottom:7px;font-family:Georgia,"Times New Roman",serif;font-size:2.85rem;line-height:1;color:rgba(243, 230, 172, 0.13)}

.jokeri .card-number{color:rgba(255, 165, 165, 0.13)}

.card-icon{position:absolute;right:7px;width:27px;height:27px;border-radius:50%;border:1px solid rgba(24,32,61,.18);background:rgba(255,255,255,.26);color:inherit;display:grid;place-items:center;cursor:pointer;font-weight:900;z-index:4;backdrop-filter:blur(8px)}.replace-card{top:7px}.remove-card{top:40px;font-size:1rem}.workspace-actions{flex:0 0 auto;display:grid;grid-template-columns:1.1fr .7fr 1fr;gap:7px;padding-top:8px}.workspace-actions button{min-height:42px;font-size:.72rem;padding:0 8px}.workspace-actions #addCard.hidden-action{display:none}.workspace-actions:has(#addCard.hidden-action){grid-template-columns:1fr 1fr}
.saved-combos-link{width:100%;border:0;border-top:1px solid var(--line);background:transparent;display:flex;justify-content:space-between;padding:14px 3px 3px;margin-top:12px;font-weight:760;cursor:pointer;font-size:.82rem}
#view-challenge{overflow:hidden}.challenge-empty,.challenge-card{flex:1 1 auto;min-height:0;border-radius:var(--radius);padding:18px;background:rgba(255,250,240,.76);border:1px solid var(--line);box-shadow:var(--shadow)}.challenge-empty{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.challenge-symbol{font-size:2.55rem;margin-bottom:4px}.challenge-empty p{font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;line-height:1.28;max-width:310px}.challenge-empty .primary-button{max-width:320px}

.challenge-card{
  background:linear-gradient(145deg,#77608a,#4e3c5a);
  color:white;
  display:flex;
  flex-direction: column;
  flex-direction:column}

.challenge-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

.challenge-content h3 {
  margin: 0 0 0.7rem;
  text-align: center;
}

.challenge-content p {
  margin: 0;
  text-align: center;
}

.challenge-card h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,7.5vw,3.6rem);
  line-height:1;
  text-align: center;
  margin:10px 0 8px;
}

.challenge-card>p:not(.card-label){
  font-size:clamp(1.3rem,4.5vw,1.6rem);
  line-height:1.7;
  text-align: center;
  margin:0;
  overflow:auto}

.challenge-content > p {
  font-size: clamp(1.05rem, 4.5vw, 1.25rem);
  line-height: 1.42;
  text-align: center;
}

.challenge-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;padding-top:14px}.small-button{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:inherit;border-radius:12px;min-height:40px;font-size:.72rem;font-weight:760;cursor:pointer}
#view-memory{overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px}.memory-section{margin-bottom:18px}.memory-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.memory-heading h3{font-family:Georgia,"Times New Roman",serif;font-size:1.2rem;margin:0}.memory-heading span{font-weight:850;font-size:.72rem;background:rgba(255,255,255,.55);border-radius:99px;padding:4px 8px}.memory-card,.combo-card,.history-row,.empty-note{background:rgba(255,250,240,.76);border:1px solid var(--line);border-radius:17px;padding:13px;margin-bottom:8px}.memory-card h4,.history-row h4{font-family:Georgia,"Times New Roman",serif;margin:5px 0;font-size:1.1rem}.memory-card p{line-height:1.4}.combo-card.rajoite{border-left:6px solid var(--constraint-deep)}.combo-card.jokeri{border-left:6px solid var(--joker-deep)}.combo-card.mixed{border-left:6px solid var(--violet)}.combo-meta{display:flex;justify-content:space-between;font-size:.64rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.combo-card ol{padding-left:1.25rem;margin:10px 0}.combo-card li{margin:0 0 8px;line-height:1.34;font-family:Georgia,"Times New Roman",serif}.memory-tools{display:flex;gap:7px;flex-wrap:wrap}.memory-tools button{border:1px solid var(--line);background:rgba(255,255,255,.52);border-radius:10px;padding:8px 10px;font-size:.69rem;font-weight:760}.history-row{display:flex;justify-content:space-between;align-items:center}.history-row p{font-size:.68rem;margin:2px 0;color:rgba(24,35,32,.65)}.history-row button{border:0;background:transparent;font-size:1.3rem}.empty-note{font-size:.8rem;color:rgba(24,35,32,.65)}.danger-link{border:0;background:transparent;color:#963b2d;text-decoration:underline;text-underline-offset:3px;padding:5px 0;font-size:.76rem;font-weight:760}.toast{position:fixed;left:50%;bottom:calc(10px + var(--safe-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:10px 14px;border-radius:99px;font-size:.76rem;font-weight:740;z-index:80;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{border:0;padding:0;background:transparent;max-width:min(92vw,420px);width:100%}dialog::backdrop{background:rgba(17,28,26,.52);backdrop-filter:blur(5px)}.dialog-card{background:var(--paper-light);border-radius:22px;padding:20px;box-shadow:0 25px 80px rgba(0,0,0,.25)}.dialog-card h2{font-family:Georgia,"Times New Roman",serif;font-size:1.65rem;line-height:1.05;margin:8px 0 12px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.replace-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 8px}.replace-choice{border:0;border-radius:15px;min-height:58px;font-weight:850;cursor:pointer}.rajoite-choice{background:var(--constraint);color:#18203d}.jokeri-choice{background:var(--joker);color:#3d1830}.dialog-cancel{display:block;margin:7px auto 0}.text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;font-weight:720;font-size:.76rem;cursor:pointer;padding:6px}
.is-drawing{pointer-events:none}.draw-ghost{animation:shuffle 1.5s cubic-bezier(.2,.75,.2,1) both}.draw-ghost blockquote,.draw-ghost h3,.draw-ghost>p:not(.card-label){filter:blur(5px);opacity:.35}.draw-ghost::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.3) 45%,transparent 62%);transform:translateX(-120%);animation:shine .55s linear infinite}@keyframes shuffle{0%{transform:rotate(-1.5deg) scale(.98)}20%{transform:rotate(1.2deg) translateY(-3px)}40%{transform:rotate(-.8deg) translateY(2px)}60%{transform:rotate(1deg) translateY(-2px)}80%{transform:rotate(-.5deg)}100%{transform:none}}@keyframes shine{to{transform:translateX(120%)}}

@media(min-width:620px){
.app-logo span{font-size:1.65rem}
.compact-intro h2{font-size:1.7rem}
.card-stack.three{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}
.inspiration-card blockquote{font-size:1.15rem}
.workspace-actions{max-width:520px;margin-left:auto;width:100%}}

@media(max-width:390px){
  .topbar{padding-left:9px;padding-right:9px}
  .app-logo span{font-size:1.3rem}
  .mode-tab{font-size:.7rem}
  .compact-intro h2{font-size:1.02rem}
  .draw-panel{padding:11px}
  .inspiration-card{padding:12px 36px 10px 13px}
  .inspiration-card blockquote{font-size:1.1rem}
  .challenge-actions{grid-template-columns:1fr 1fr}
  .challenge-actions .done-button{grid-column:1/-1}
  .workspace-actions{grid-template-columns:1fr .62fr .9fr}
  .workspace-actions button{font-size:.67rem}
}

@media(max-height:700px){
  .topbar{padding-top:5px}
  .app-logo span{font-size:1.22rem}
  .mode-tab{padding-top:7px;padding-bottom:7px}
  .compact-intro h2{font-size:1.08rem}
  .intro-block{padding-bottom:7px}
  .inspiration-card{padding-top:11px;padding-bottom:9px}
  .inspiration-card blockquote{font-size:1.4rem}
  .workspace-actions{padding-top:6px}
  .challenge-card h3{font-size:1.6rem}
  .challenge-card>p:not(.card-label){font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

#saveCombination {
  padding-left: 2.2rem;
  padding-right: 2.2rem;
}

#drawChallenge {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
/* Language switch */
.topbar{position:relative}
.language-toggle{position:absolute;right:12px;top:max(9px,env(safe-area-inset-top));z-index:40;border:1px solid rgba(24,35,32,.22);background:rgba(255,250,240,.88);color:var(--ink);border-radius:999px;min-width:38px;height:28px;padding:0 9px;font-size:.68rem;font-weight:850;letter-spacing:.08em;cursor:pointer;box-shadow:0 4px 12px rgba(24,35,32,.08)}
html[lang="en"] .mode-tabs{grid-template-columns:1.18fr 1fr 46px}
html[lang="en"] .mode-tab{font-size:.72rem}
@media(max-width:390px){.language-toggle{right:8px}.app-logo span{font-size:1.34rem}}